HTML dom中常用的三種節點分別是元素節點、屬性節點、文本節點。
具體指的內容可參考下圖：
以下為測試用例:
<!DOCTYPE html> <html> <head> <title>元素節點、屬性節點、文本節點的測試</title> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> window.onload = function(){ var btnNode = document.getElementsByTagName("button"); var fruitNode = document.getElementById("fruit"); //元素節點 ul 為元素節點 var ulNode = document.getElementsByTagName("ul"); //屬性節點 name="水果" 為屬性節點 var attrNode = document.getElementById("fruit").getAttributeNode("name"); var attr2Node = document.getElementById("fruit").getAttributeNode("width"); //文本節點 點我 var textNode = document.getElementById("btn1").firstChild; //注意這里獲取文本節點的方式 btnNode[0].onclick = function(){ alert(fruitNode.getElementsByTagName("li").length); //以下右邊注釋為運行的結果 //獲取元素節點的三要素:nodeType,nodeName,nodeValue alert(ulNode[0].nodeType); //1 alert(ulNode[0].nodeName); //UL alert(ulNode[0].nodeValue); //null //獲取屬性節點的三要素:nodeType,nodeName,nodeValue alert(attrNode.nodeType); //2 alert(attrNode.nodeName); //name alert(attrNode.nodeValue); //水果 alert(attr2Node.nodeType); //2 alert(attr2Node.nodeName); //width alert(attr2Node.nodeValue); //80px; //獲取文本節點的三要素:nodeType,nodeName,nodeValue alert(textNode.nodeType); //3 alert(textNode.nodeName); //#TEXT alert(textNode.nodeValue); //點我 } } </script> </head> <body> 節點分三類: 1: 元素節點 2：屬性節點 3：文本節點 <ul id="fruit" name="水果" width="80px;"> <li>蘋果</li> <li>香蕉</li> <li>梨子</li> <li>葡萄</li> </ul> <button id="btn1">點我</button> </body> </html>
