腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript HTML DOM元素節(jié)點操作匯總

更新時間：2019年07月29日 10:50:31 作者：Ni_F

這篇文章主要介紹了JavaScript HTML DOM元素節(jié)點操作匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

在文檔對象模型 (DOM) 中，每個節(jié)點都是一個對象。DOM 節(jié)點有三個重要的屬性：

1. nodeName : 節(jié)點的名稱

2. nodeValue ：節(jié)點的值

3. nodeType ：節(jié)點的類型

節(jié)點類型：元素 1 ，屬性 2 ，文本 3 ，注釋 8，文檔 9。

一、添加和刪除節(jié)點（HTML 元素）

1、創(chuàng)建節(jié)點

1）創(chuàng)建該元素（元素節(jié)點）；

2）向一個已存在的元素追加該元素。

語法：appendChild(newnode)

eg:

<div id="div1">
  <p id="p1">這是一個段落</p>
  <p id="p2">這是另一個段落</p>
</div>

<script>
  var para=document.createElement("p");
  var node=document.createTextNode("這是新段落。");
  para.appendChild(node);

  var element=document.getElementById("div1");
  element.appendChild(para);
</script>

document.createElement("標(biāo)簽名"); // 創(chuàng)建元素節(jié)點

document.createTextNode("文本"); //創(chuàng)建文本節(jié)點

appendChild(); //方法向節(jié)點添加最后一個子節(jié)點。也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。用法：a.appendChild(b)，把b添加到a內(nèi)。

2.添加節(jié)點

appendChild(); //在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點。

語法，eg:同上。

insertBefore(); //insertBefore() 方法可在已有的子節(jié)點前插入一個新的子節(jié)點。

語法：insertBefore(newnode,node);

eg:

<ul id="test">
  <li>JavaScript</li>
  <li>HTML</li>
</ul> 
 
<script type="text/javascript">
   var otest = document.getElementById("test"); 
   var newli = document.createElement("li");
   newli.innerHTML="php";
   //otest.insertBefore(newli,otest.lastChild);
   otest.insertBefore(newli,otest.childNodes[1]);
</script>

3.刪除節(jié)點

removeChild() //removeChild() 方法從子節(jié)點列表中刪除某個節(jié)點。如刪除成功，此方法可返回被刪除的節(jié)點，如失敗，則返回 NULL。

語法：nodeObject.removeChild(node)

eg:

<div id="div1">
  <p id="p1">這是一個段落。</p>
  <p id="p2">這是另一個段落。</p>
</div>

<script>
  var parent=document.getElementById("div1");
  var child=document.getElementById("p1");
  parent.removeChild(child);
</script>

DOM 需要清楚需要刪除的元素，以及它的父元素。先找到希望刪除的子元素，然后使用其 parentNode 屬性來找到父元素。

4.替換節(jié)點

replaceChild //把一個給定父元素里面的一個子節(jié)點替換為另一個子節(jié)點。

語法：referencre = element.replaceChild(newChild,oldChild); //newChild: 必需，用于替換 oldChild的對象。 oldChild: 必需，被 newChild替換的對象。

eg:

<div>
  <b id="oldnode">JavaScript</b>是一個很常用的技術(shù)，為網(wǎng)頁添加動態(tài)效果。</div>
  <a href="javascript:replaceMessage()" rel="external nofollow" > 將加粗改為斜體</a>
 
  <script type="text/javascript">
    function replaceMessage(){
    　　var b=document.getElementById("oldnode");
    　　var newNode=document.createElement("i");
    　　newNode.innerHTML=b.innerHTML;
    　　b.parentNode.replaceChild(newNode,b);
    }  
 </script>

注意：當(dāng) oldnew 被替換時，所有與之相關(guān)的屬性內(nèi)容都將被移除。 newChild必須先被建立。

5.訪問子節(jié)點

childNodes //訪問選定元素節(jié)點下的所有子節(jié)點的列表，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性。

語法：elementNode.childNodes //可用childNodes[i]數(shù)組的形式表示第幾個子元素

eg:

<div>
  javascript 
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
   var int=document.getElementsByTagName("div")[0].childNodes;
   for (var i=0;i<int.length;i++)
   {
     document.write("名字："+int[i].nodeName+"<br>");
   }
   document.write("子節(jié)點個數(shù)："+int.length+"<br>");
</script>

6.訪問子節(jié)點的第一和最后項

firstChild //返回‘childNodes'數(shù)組的第一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL。

語法：node.firstChild //與elementNode.childNodes[0]是同樣的效果。

lastChild //返回‘childNodes'數(shù)組的第一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL。

語法：node.lastChild //與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。

eg：

<div id="con">
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
  var x=document.getElementById("con");
  document.write("第一個子節(jié)點："+x.firstChild.nodeName+"<br>");
  document.write("最后一個子節(jié)點："+x.lastChild.nodeName);
</script>

7.訪問父節(jié)點

parentNode //獲取指定節(jié)點的父節(jié)點

語法：elementNode.parentNode

eg:

<div id="text">
  <p id="con"> parentNode 獲取指點節(jié)點的父節(jié)點</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

注意: 父節(jié)點只有一個，瀏覽器兼容問題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個文本節(jié)點。

8.訪問兄弟節(jié)點

nextSibling //可返回某個節(jié)點之后緊跟的節(jié)點（處于同一樹層級中）。

語法：nodeObject.nextSibling

previousSibling //可返回某個節(jié)點之前緊跟的節(jié)點（處于同一樹層級中）。

語法：nodeObject.previousSibling

eg:

<ul id="myList">
  <li id="item1">Coffee</li>
  <li id="item2">Tea</li>
</ul>
<p id="demo">點擊按鈕來獲得首個項目的下一個同胞。</p>
<button onclick="myFunction()">試一下</button>
<script>
  function myFunction()
  {
    var x=document.getElementById("demo"); 
    x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
  }
</script>

注意: 如果無此節(jié)點，則該屬性返回 null。兩個屬性獲取的是節(jié)點。Internet Explorer 會忽略節(jié)點間生成的空白文本節(jié)點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:判斷節(jié)點nodeType是否為1, 如是為元素節(jié)點，跳過。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: