DOM有三種節點：元素節點、屬性節點、文本節點。 一、用nodeType可以檢測節點的類型 這樣方便在js中對各個節點進行操作。 元素節點：html中的標簽。 屬性節點：html便簽中的屬性值。 文本節點：元素節點之間的文本。 二、用body的childNodes來測試 來看body的childNo ...
DOM有三種節點：元素節點、屬性節點、文本節點。
一、用nodeType可以檢測節點的類型
| 節點類型 | nodeType屬性值 |
| 元素節點 | 1 |
| 屬性節點 | 2 |
| 文本節點 | 3 |
這樣方便在js中對各個節點進行操作。
元素節點：html中的標簽。
屬性節點：html便簽中的屬性值。
文本節點：元素節點之間的文本。
二、用body的childNodes來測試
1 <body>/*第一個文本元素
2 */<div></div>/*第二個文本元素
3 */<div></div>/*第三個文本元素
4 */<ul>
5 <li></li>
6 <li></li>
7 <li></li>
8 </ul>/*第四個文本元素
9 */</body>
來看body的childNodes中各個節點的個數。
先說一下childNodes，這個屬性用來獲取任何一個元素的所有子元素，它是一個包含這個元素的全部子元素的數組。
用js測試：
1 window.onload = function (){
2 var oBody = document.getElementsByTagName('body')[0];
3 var aChild = oBody.childNodes;
4 alert(aChild.length);//7
5 for(var i = 0; i < aChild.length; i++) {
6 alert(aChild[i].nodeType);//3 1 3 1 3 1 3
7 }
8 };
由此看來：
body的子元素有div、div、ul。
body的文本元素有四個，代碼中註釋出出來的，我故意將*/換了一行寫出來，是想表明在<body>和<div>之間是一個文本節點。
有人會覺得疑惑，不是說元素節點之間就是文本節點嗎？為什麼像<div></div>之間的文本節點沒有算進去呢？
對的，那個也算文本節點，但我們計算的是body的子節點，像<div></div>之間的那是<div>的子節點啦，並不是body的子節點。
三、用nodeValue來得到和設置一個節點的值
三大節點中，屬性節點和文本節點都是可能有值的，但是元素節點是沒有值的。
用node.nodeValue得到node的值，那麼有一個問題，nodeValue和innerHTML有什麼區別呢？
nodeValue獲取的是節點的值，innerHTML是以字元串形式返回該節點的所有子節點及其值。可以看做是部分與大體的一個區別。
舉個例子：
1 <body>
2 <div id="div1">
3 這是div的第一個子節點，是一個文本節點
4 <p>div的第二個子節點p，這是p的第一個文本節點</p>
5 </div>
6 </body>
我們用js來測試一下nodeValue和innerHTML的結果
1 window.onload = function (){
2 var oDiv = document.getElementById('div1');
3 var aChild = oDiv.childNodes;
4
5 alert(aChild[0].nodeValue);
6 alert(oDiv.innerHTML);
7 };
測試結果如下：
第一個alert彈出“這是div的第一個子節點，是一個文本節點”
第二個alert彈出“這是div的第一個子節點，是一個文本節點 <p>div的第二個子節點p，這是p的第一個文本節點</p>”
三、用nodeName來獲取節點的
nodeName屬性含有某個節點的名稱。
對於元素節點，nodeName=標簽名（返回的名稱是大寫的）。
對於文本節點，nodeName=#text。
對於屬性節點，nodeName=屬性名（返回的名稱是大寫的）。
使用方法：elemt.nodeName;
