獲取dom節點

獲取dom物件

全域性物件 window 中有屬性document，代表的是整個文件節點

舊的獲取元素節點的方式

dom 0

• document.body：獲取body元素節點
• document.head：獲取head元素節點
• document.links：獲取頁面上所有的超連結元素節點，類陣列
• document.anchors：獲取頁面上所有的錨連結(具有name屬性)元素節點
• document.forms：獲取頁面中所有的form元素節點

新的獲取元素節點的方式

通過方法獲取

• document.getElementById：通過id獲取對應id的元素
• document.getElementsByTagName: 通過元素名稱獲取元素
• document.getElementsByClassName：通過元素的類樣式獲取元素，IE9以下無效
• document.getElementsByName：通過元素的name屬性值獲取元素
• document.querySelector：通過CSS選擇器獲取元素，得到匹配的第一個，IE8以下無效
• document.querySelectorAll：通過CSS選擇器獲取元素，得到所有匹配的結果，IE8以下無效
• document.documentElement: 獲取根元素

細節：

1. 在所有的得到類陣列的方法中，除了querySelectorAll，其他的方法都是實時更新的。
2. getElementById 得到元素執行效率最高。
3. 書寫了id的元素，會自動成為window物件的屬性。它是一個實時的單物件。事實上的標準。不推薦使用。
4. getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll，可以作為其他元素節點物件的方法使用

根據節點關係獲取節點

• parentNode：獲取父節點（元素、文件）
• previousSibling：獲取上一個兄弟節點
• nextSibling：獲取下一個兄弟節點
• childNodes：獲取所有的子節點
• firstChild：獲取第一個子節點
• lastChild：獲取最後一個子節點
• attributes: 獲取某個元素的屬性節點

獲取元素節點

• parentElement：獲取父元素
• previousElementSibling：獲取上一個兄弟元素
• nextElementSibling：獲取下一個兄弟元素
• children：獲取子元素
• firstElementChild：獲取第一個子元素
• lastElementChild：獲取最後一個子元素

獲取節點資訊

• nodeName：獲取節點名稱
• nodeValue：獲取節點的值
• nodeType：節點型別，是一個數字