SW：HTML DOM

1：節點：nodeType,nodeValue,nodeName

getAttributeNode() 方法從當前元素中經過名稱獲取屬性節點。

元素節點nodeValue是null,屬性節點nodeValue是名值

<h1 id="a">123456</h1>
<script>
   var oH1 = document.getElementById("a");  //元素節點1
   var oTxt = oH1.firstChild;               //文本節點3
   var oId = oH1.getAttributeNode("id");    //屬性節點2
   //1,3,2
   console.log("nodeType: "+oH1.nodeType+","+oTxt.nodeType+","+oId.nodeType); //null,123456,a
   console.log("nodeValue: "+oH1.nodeValue+","+oTxt.nodeValue+","+oId.nodeValue); //H1,#text,id
   console.log("nodeName: "+oH1.nodeName+","+oTxt.nodeName+","+oId.nodeName);
</script> 

 

2：children和childNodes區別

chilren返回元素列表（不包含空格,非標準屬性但兼容好）：console.log(oDiv.children)

childNodes返回節點列表（不包含空格標準屬性HTML DOM）：console.log(oDiv.childNodes)

<div id="aa">
    <h1>123456</h1>
    <p>qwrert</p>
</div>

3：nextElementSibling和nextSibling區別
node.nextSibling/node.nextElementSibling

nextSibling：找下一個節點，以Node對象返回，包含空格（HTML DOM） 找不到返回Null
nextElementSilbing: 找下一個元素節點，不包含空格，但IE8及如下不支持。