關於dom(javascript)

outside-R發表於2020-12-24

獲取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:節點型別,是一個數字

節點關係圖節點型別圖

相關文章