目錄

• 節點樹
  • 檢視元素節點
  • 節點的查詢
  • 節點型別
  • 節點的四個標準屬性（這裡的標準沒啥特殊的意思）
• 元素節點樹
  • 查詢元素節點

節點樹

JavaScript在demo中的節點查詢，當要返回的是一組資料時，實際上js返回的都是類陣列（因為類陣列比陣列更加的靈活？）

檢視元素節點

• document.getElementsByClassName() IE9以下沒有這個方法

• document.getElementsByName()
name屬性一般做為資料名來使用，同時：

  getElementsByName 在不同的瀏覽器其中工作方式不同。在IE和Opera中， getElementsByName() 方法還會返回那些 id 為指定值的元素。所以你要小心使用該方法，最好不要為元素的 name 和 id 賦予相同的值。

• document.getElementById()
  ID屬性不要濫用（他應該在全域性中是唯一的），雖然他是一個十分高效的方法。

• document.querySelector(),document.querSelectorAll()
  ！無法選擇css偽類
  使用css選擇器來選擇元素。
  要注意docuemnt.querySelectorAll()方法返回的NodeList物件不是實時的，而是靜態的。
  也就是說在你對文件做的任何修改對NodeList物件都是沒有影響的。MDN如是說：

  大多數情況下，NodeList 物件都是個實時集合。意思是說，如果文件中的節點樹發生變化，則已經存在的 NodeList 物件也可能會變化。
  在另一些情況下，NodeList 是一個靜態集合，也就意味著隨後對文件物件模型的任何改動都不會影響集合的內容。document.querySelectorAll 返回一個靜態的 NodeList。
  特別是當你選擇如何遍歷 NodeList 中所有項，或快取列表長度的時候，最好牢記這種區分。

節點的查詢

基於Node通用屬性的節點查詢

• parentNode 返回該節點的父節點
• childNodes 該節點的所有子節點
• firstChild 該節點的第一個子節點
• lastChild 該節點的最後一個子節點
• nextSibling 後一個兄弟節點
• previousSibling 前一個兄弟節點

更詳細的可以在這裡看到 MDN

節點型別

節點的四個標準屬性（這裡的標準沒啥特殊的意思）

• nodeName元素的標籤名，只讀
• nodeValue僅文字節點和註釋節點有的屬性，可寫
• nodeType表示節點型別，數字值
  • 1
    元素節點
  • 3 文字節點&&屬性節點？
  • 8 Comment（註釋節點）
  • 詳情可見MDN
• attributes該節點的屬性的集合（屬性名只讀，屬性值可寫）
• hasChildNodes()判斷是否有子節點

元素節點樹

查詢元素節點

也是Node的基本方法

• parentElement元素父節點，和parentNode的功能基本相同，不過前者是返回該元素的父元素節點（如果該元素的父級節點不是元素節點是那麼就會返回null），而後者是返回該元素的節點，一般情況下這兩者沒有區別，但是當出現以下情況時：
  
• Node.children 元素子節點，和Node.childNodes的區別是前者只返回元素幾點，而後者還會返回文字and註釋節點 （除此以外IE9以下不相容）
• firstElementChild第一個元素子節點
• lastElementChild最後一個元素子節點
• nextElementSibling後一個兄弟元素節點
• previousElementSibling前一個兄弟元素節點