前言
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
1. nodeName : 節點的名稱
2. nodeValue ：節點的值
3. nodeType ：節點的類型
節點類型：元素 1 ，屬性 2 ，文本 3 ，注釋 8，文檔 9。
一、添加和刪除節點（HTML 元素）
1、創建節點
1）創建該元素（元素節點）；
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("標簽名"); // 創建元素節點
document.createTextNode("文本"); //創建文本節點
appendChild(); //方法向節點添加最后一個子節點。也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。 用法：a.appendChild(b)，把b添加到a內。
2.添加節點
appendChild(); //在指定節點的最后一個子節點列表之后添加一個新的子節點。
語法，eg:同上。
insertBefore(); //insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法：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.刪除節點
removeChild() //removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 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.替換節點
replaceChild //把一個給定父元素里面的一個子節點替換為另一個子節點。
語法：referencre = element.replaceChild(newChild,oldChild); //newChild: 必需，用于替換 oldChild的對象。 oldChild: 必需，被 newChild替換的對象。
eg:
<div> <b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁添加動態效果。</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>注意：當 oldnew 被替換時，所有與之相關的屬性內容都將被移除。 newChild必須先被建立。
5.訪問子節點
childNodes //訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
語法：elementNode.childNodes //可用childNodes[i]數組的形式表示第幾個子元素
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("子節點個數："+int.length+"<br>");</script>6.訪問子節點的第一和最后項
firstChild //返回‘childNodes'數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：node.firstChild //與elementNode.childNodes[0]是同樣的效果。
lastChild //返回‘childNodes'數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 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("第一個子節點："+x.firstChild.nodeName+"<br>"); document.write("最后一個子節點："+x.lastChild.nodeName);</script>7.訪問父節點
parentNode //獲取指定節點的父節點
語法：elementNode.parentNode
eg:
<div id="text"> <p id="con"> parentNode 獲取指點節點的父節點</p></div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.nodeName);</script>注意: 父節點只有一個，瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。
8.訪問兄弟節點
nextSibling //可返回某個節點之后緊跟的節點（處于同一樹層級中）。
語法：nodeObject.nextSibling
previousSibling //可返回某個節點之前緊跟的節點（處于同一樹層級中）。
語法：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>注意: 如果無此節點，則該屬性返回 null。兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:判斷節點nodeType是否為1, 如是為元素節點，跳過。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
