DOM啟蒙:元素節點選取
阿新 • • 發佈:2018-12-17
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構建的,火狐瀏覽器不支援它