溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何理解JavaScript DOM中的Node節(jié)點，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
在DOM（文檔對象模型）中，HTML文檔的層次結構被表示為樹形結構，HTML文檔的樹形表示主要包含表示元素或標記的節(jié)點和標識文本串的節(jié)點構成。在JavaScript DOM中，Node常常被翻譯成節(jié)點，下面我們通過實例，來了解一下Node的屬性及方法。
Node的屬性介紹：
nodeType：顯示節(jié)點的類型 nodeName：顯示節(jié)點的名稱 nodeValue：顯示節(jié)點的值 attributes：獲取一個屬性節(jié)點 firstChild：表示某一節(jié)點的***個節(jié)點 lastChild：表示某一節(jié)點的***一個子節(jié)點 childNodes：表示所在節(jié)點的所有子節(jié)點 parentNode：表示所在節(jié)點的父節(jié)點 nextSibling：緊挨著當前節(jié)點的下一個節(jié)點 previousSibling：緊挨著當前節(jié)點的上一個節(jié)點
Node有各種各樣的節(jié)點，我們先花一些時間認識他們，同時一并了解nodeType，nodeName和nodeValue屬性：
名稱：元素節(jié)點
◆nodeType：ELEMENT_NODE
◆nodeType值：1
◆nodeName：元素標記名
◆nodeValue：null
<body> <div id = "t" ><span></span></div> </body> <script> var d = document.getElementById("t"); document.write(d.nodeType); document.write(d.nodeName); document.write(d.nodeValue); //顯示 1 DIV null </script>名稱：屬性節(jié)點
◆nodeType：ATTRIBUTE_NODE
◆nodeType值：2
◆nodeName：屬性名
◆nodeValue：屬性值
<body> <div id = "t" name="aaa"><span></span></div> </body> <script> var d = document.getElementById("t").getAttributeNode("name"); document.write(d.nodeType); document.write(d.nodeName); document.write(d.nodeValue); //顯示 2 name aaa </script>名稱：文本節(jié)點
◆nodeType：TEXT_NODE
◆nodeType值：3
◆nodeName：#text
◆nodeValue：文本內(nèi)容
<body> <div id = "t">bbb</div> </body> <script> var d = document.getElementById("t").firstChild; document.write(d.nodeType); document.write(d.nodeName); document.write(d.nodeValue); //顯示 3 #text bbb </script>名稱：CDATA文本節(jié)點（XML中傳遞文本的格式）
◆nodeType：CDATA_SECTION_NODE
◆nodeType值：4
◆nodeName：#cdata-section
◆nodeValue：CDATA文本內(nèi)容
attributes屬性，直接獲取一個屬性節(jié)點，注意這里要使用[]，保持IE和FF的兼容性。
<body name="ddd"> <div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var d = document.getElementById("t").attributes["name"]; document.write(d.name); document.write(d.value); //顯示 name aaa </script>firstChild和lastChild屬性，表示某一節(jié)點的***個和***一個子節(jié)點：
<body> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var d = document.getElementById("t"); document.write(d.firstChild.innerHTML); document.write(d.lastChild.innerHTML); //顯示 aaa ccc </script>childNodes和parentNode屬性，表示所在節(jié)點的所有子節(jié)點和所在節(jié)點的父節(jié)點，這里的childNodes注意是一個數(shù)組：
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var d = document.getElementById("t"); document.write(d.childNodes[1].innerHTML); document.write(d.parentNode.getAttribute("name")); //顯示 bbb ddd </script>nextSibling和previousSibling屬性，分別表示在parentNode的childNodes[]數(shù)組中，緊挨著當前節(jié)點的上一個和下一個節(jié)點：
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var d = document.getElementById("t").childNodes[1]; document.write(d.nextSibling.innerHTML); document.write(d.previousSibling.innerHTML); //顯示 ccc aaa </script>Node的方法介紹：
◆hasChildNodes()：判定一個節(jié)點是否有子節(jié)點
◆removeChild()：去除一個節(jié)點
◆appendChild()：添加一個節(jié)點
◆replaceChild()：替換一個節(jié)點
◆insertBefore()：指定節(jié)點位置插入一個節(jié)點
◆cloneNode()：復制一個節(jié)點
◆normalize()：（不知）
◆hasChildNodes()方法：判定一個節(jié)點是否有子節(jié)點，有返回true，沒有返回false
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> <div id = "m"></div> </body> <script> alert(document.getElementById("t").hasChildNodes()); alert(document.getElementById("m").hasChildNodes()); // ***個true，第二個false </script>removeChild()方法：去除一個節(jié)點：
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var d = document.getElementById("t").firstChild; document.getElementById("t").removeChild(d); // <span>aaa</span>被去除 </script>appendChild()方法：添加一個節(jié)點，如果文檔樹中已經(jīng)存在該節(jié)點，則將它刪除，然后在新位置插入。
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var d = document.getElementById("t").firstChild; document.getElementById("t").appendChild(d); // <span>aaa</span>成了***一個節(jié)點 </script>replaceChild()方法：從文檔樹中刪除（并返回）指定的子節(jié)點，用另一個節(jié)點來替換它。
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var newd = document.createElement("span"); newd.innerHTML = "eee"; var oldd = document.getElementById("t").lastChild; document.getElementById("t").replaceChild(newd,oldd); // ***一項成了 eee </script>insertBefore()方法：在指定節(jié)點的前面插入一個節(jié)點，如果已經(jīng)存在，則刪除原來的，然后在新位置插入。
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body> <script> var newd = document.createElement("span"); newd.innerHTML = "eee"; var where = document.getElementById("t").lastChild; document.getElementById("t").insertBefore(newd,where); // 在***一項的前面多了一項 eee </script>cloneNode()方法：復制一個節(jié)點，該方法有一個參數(shù)，true表示同時復制所有的子節(jié)點，false表示近復制當前節(jié)點。
<body name="ddd"> <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div> </body> <script> var what = document.getElementById("t").cloneNode(false).innerHTML; document.getElementById("m").innerHTML = what; // 增加了一個aaabbbccc </script>關于如何理解JavaScript DOM中的Node節(jié)點問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業(yè)資訊頻道了解更多相關知識。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
