詳解JavaScript DOM中的Node節(jié)點

jicemoon 2015-08-20

展開全文

在DOM（文檔對象模型）中，HTML文檔的層次結(jié)構(gòu)被表示為樹形結(jié)構(gòu)，HTML文檔的樹形表示主要包含表示元素或標記的節(jié)點和標識文本串的節(jié)點構(gòu)成。在JavaScript DOM中，Node常常被翻譯成節(jié)點，下面我們通過實例，來了解一下Node的屬性及方法。

51CTO推薦閱讀：深入解讀JavaScript中BOM和DOM

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()：復(fù)制一個節(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()方法：復(fù)制一個節(jié)點，該方法有一個參數(shù)，true表示同時復(fù)制所有的子節(jié)點，false表示近復(fù)制當前節(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>