1. 程式人生 > >DOM啟蒙:元素節點選取

DOM啟蒙:元素節點選取

1.選取特定元素節點

  • querySeletor():

       允許一個CSS選擇器語法格式引數。

       返回文件中符合該選擇器的首個元素節點。

       同樣在元素節點上定義了。使得該方法可以限制它的結果到DOM樹的某個分支                          

  • getElementById()

2.選取/建立一個元素節點列表(NodeList)

  • querySelectorAll()

       並不返回一個實時的元素列表。建立的列表是該列表建立時文件的快照。

       在元素節點上也有定義。

       傳字串*,將返回一個由文件中所有節點組成的列表。

  • getElementsByTagName()

       建立的NodeList是實時的,並且會即時反映文件的當前狀態。

       在元素節點上也有定義。

       傳字串*,將返回一個由文件所有節點組成的列表。

  • getElementsByClassName()

        建立的NodeList是實時的。

        在元素節點上也有定義

3.選取所有的直屬子元素節點

  • children:取得一個列表(HTMLCollection),由所有直屬子節點中的元素節點組成(HTMLCollection是實時的)

4.選取與上下文有關的元素

     可以選取一些特定的元素節點物件,通過觸發這些元素節點上相應的querySelector()、getElementsByTagName()、getElementsByClassName()等方法,達到在你所希望的上下文查詢元素節點的效果。

    這些方法不僅在實時DOM中操作,也可以在程式碼中以程式設計方式建立的DOM結構中。

5.獲取預定義的元素節點列表

  • document.all
  • document.forms
  • document.images
  • document.links
  • document.scripts
  • document.styleSheet

6.使用matchesSelector()驗證元素是否被選取

  • matchesSelector():判斷一個元素是否匹配某個選擇器字串。將被改名為matches()
  • 在現代瀏覽器:必須使用moz、webkit、o或者ms

        mozMatchesSelector()

        webkitMatchesSelector()

        oMatchesSelector()

        msMatchesSelector()

7.其他

  • childNodes也返回一個NodeList
  • NodeList是個類陣列的列表,有個只讀的length屬性
  • document.all是由HTMLAllCollection構建的,火狐瀏覽器不支援它