達文西，我要的是屬性節點，不是屬性！

js在處理DOM的時候，文檔中的內容都會被當成一個個節點，也就是常說的node。節點的類型有不少，經常使用的主要是三種：元素節點、屬性節點和文本節點。

元素至關於咱們說的標籤，屬性就是標籤中定義的屬性，文本就是標籤裏面的文字。好比下面咱們能夠經過getElementById來獲取元素節點，而後再經過childNodes遍歷它的子節點。

<div id="app">
    hello
    <p class="name" title="I am Jason">I am Jason.</p>
    <p class="date">2019-11-11</p>
</div>
    
<script>
  var nodeApp = document.getElementById("app");
  var childNodes = nodeApp.childNodes;
  for(var i = 0; i < childNodes.length; i++){
      var childNode = childNodes[i];
      console.log(childNode.nodeType + "," + childNode.nodeName + "," + childNode.nodeValue);
  }
</script>

打印的結果以下，全部的子節點中，節點類型裏1是元素節點，3是文本節點，這裏沒有屬性節點。

3,#text,
        hello
        
1,P,null
3,#text,
        
1,P,null
3,#text,

那怎麼獲取屬性節點？上網一搜，有的文章說是經過getAttribute，還舉例說了不一樣姿式的獲取方式，還能賦值等等。那就試試吧。

var attr = document.getElementsByClassName("name")[0].getAttribute("title");
console.log(typeof attr);
console.log(attr);
console.log(attr.nodeType + "," + attr.nodeName + "," + attr.nodeValue);

打印結果以下，獲取到的getAttribute是一個string，不是一個object，固然也無法獲取它的節點類型、名稱或者值，它只是一個字符串格式的屬性值而已。

string
I am Jason
undefined,undefined,undefined

屬性節點的正確獲取姿式是getAttributeNode。

var nodeAttr = document.getElementsByClassName("name")[0].getAttributeNode("title");
console.log(typeof nodeAttr);
console.log(nodeAttr.nodeType + "," + nodeAttr.nodeName + "," + nodeAttr.nodeValue);

結果以下：

object
2,title,I am Jason

getAttribute和getAttributeNode，前者是獲取某個屬性值，後者纔是獲取屬性節點。

除此以外，咱們還知道，元素節點的類型是1，屬性節點的類型是2，文本節點的類型是3，看這123的排序，就知道爲何它們仨是最經常使用的。

這裏面順便提一下，文本節點常常在咱們計算childNodes的時候來搗亂，好比文章一開始的那段遍歷childNodes的代碼，結果裏面有hello能夠理解，但還有一些什麼值都沒有的文本節點，這是致使咱們在計算子節點數量時常常有誤差的緣由。

這個什麼值都沒有的文本節點，實際上是有內容的，內容就是換行和空格。咱們用下面這段代碼來對比。

<div id="app">hello<p class="name" title="I am Jason">I am Jason.</p><p class="date">2019-11-11</p></div>

輸出的結果就是咱們正常理解的子節點內容。

3,#text,hello
1,P,null
1,P,null

上面咱們說過123表明的是節點類型，那麼節點名稱呢？若是是元素節點，那麼就是標籤名稱；若是是屬性節點，那麼就是屬性名稱；若是是文本節點呢？文本沒有什麼名稱只有值，因此它統一叫#text。

關於節點值呢？元素節點是沒有值的，輸出null。其餘的兩類節點都能輸出相應的值。