W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
節(jié)點(diǎn)都是單個(gè)對(duì)象,有時(shí)需要一種數(shù)據(jù)結(jié)構(gòu),能夠容納多個(gè)節(jié)點(diǎn)。DOM 提供兩種節(jié)點(diǎn)集合,用于容納多個(gè)節(jié)點(diǎn):NodeList
和HTMLCollection
。
這兩種集合都屬于接口規(guī)范。許多 DOM 屬性和方法,返回的結(jié)果是NodeList
實(shí)例或HTMLCollection
實(shí)例。主要區(qū)別是,NodeList
可以包含各種類型的節(jié)點(diǎn),HTMLCollection
只能包含 HTML 元素節(jié)點(diǎn)。
NodeList
實(shí)例是一個(gè)類似數(shù)組的對(duì)象,它的成員是節(jié)點(diǎn)對(duì)象。通過以下方法可以得到NodeList
實(shí)例。
Node.childNodes
?document.querySelectorAll()
?等節(jié)點(diǎn)搜索方法document.body.childNodes instanceof NodeList // true
NodeList
實(shí)例很像數(shù)組,可以使用length
屬性和forEach
方法。但是,它不是數(shù)組,不能使用pop
或push
之類數(shù)組特有的方法。
var children = document.body.childNodes;
Array.isArray(children) // false
children.length // 34
children.forEach(console.log)
上面代碼中,NodeList 實(shí)例children
不是數(shù)組,但是具有length
屬性和forEach
方法。
如果NodeList
實(shí)例要使用數(shù)組方法,可以將其轉(zhuǎn)為真正的數(shù)組。
var children = document.body.childNodes;
var nodeArr = Array.prototype.slice.call(children);
除了使用forEach
方法遍歷 NodeList 實(shí)例,還可以使用for
循環(huán)。
var children = document.body.childNodes;
for (var i = 0; i < children.length; i++) {
var item = children[i];
}
注意,NodeList 實(shí)例可能是動(dòng)態(tài)集合,也可能是靜態(tài)集合。所謂動(dòng)態(tài)集合就是一個(gè)活的集合,DOM 刪除或新增一個(gè)相關(guān)節(jié)點(diǎn),都會(huì)立刻反映在 NodeList 實(shí)例。目前,只有Node.childNodes
返回的是一個(gè)動(dòng)態(tài)集合,其他的 NodeList 都是靜態(tài)集合。
var children = document.body.childNodes;
children.length // 18
document.body.appendChild(document.createElement('p'));
children.length // 19
上面代碼中,文檔增加一個(gè)子節(jié)點(diǎn),NodeList 實(shí)例children
的length
屬性就增加了1。
length
屬性返回 NodeList 實(shí)例包含的節(jié)點(diǎn)數(shù)量。
document.querySelectorAll('xxx').length
// 0
上面代碼中,document.querySelectorAll
返回一個(gè) NodeList 集合。對(duì)于那些不存在的 HTML 標(biāo)簽,length
屬性返回0
。
forEach
方法用于遍歷 NodeList 的所有成員。它接受一個(gè)回調(diào)函數(shù)作為參數(shù),每一輪遍歷就執(zhí)行一次這個(gè)回調(diào)函數(shù),用法與數(shù)組實(shí)例的forEach
方法完全一致。
var children = document.body.childNodes;
children.forEach(function f(item, i, list) {
// ...
}, this);
上面代碼中,回調(diào)函數(shù)f
的三個(gè)參數(shù)依次是當(dāng)前成員、位置和當(dāng)前 NodeList 實(shí)例。forEach
方法的第二個(gè)參數(shù),用于綁定回調(diào)函數(shù)內(nèi)部的this
,該參數(shù)可省略。
item
方法接受一個(gè)整數(shù)值作為參數(shù),表示成員的位置,返回該位置上的成員。
document.body.childNodes.item(0)
上面代碼中,item(0)
返回第一個(gè)成員。
如果參數(shù)值大于實(shí)際長度,或者索引不合法(比如負(fù)數(shù)),item
方法返回null
。如果省略參數(shù),item
方法會(huì)報(bào)錯(cuò)。
所有類似數(shù)組的對(duì)象,都可以使用方括號(hào)運(yùn)算符取出成員。一般情況下,都是使用方括號(hào)運(yùn)算符,而不使用item
方法。
document.body.childNodes[0]
這三個(gè)方法都返回一個(gè) ES6 的遍歷器對(duì)象,可以通過for...of
循環(huán)遍歷獲取每一個(gè)成員的信息。區(qū)別在于,keys()
返回鍵名的遍歷器,values()
返回鍵值的遍歷器,entries()
返回的遍歷器同時(shí)包含鍵名和鍵值的信息。
var children = document.body.childNodes;
for (var key of children.keys()) {
console.log(key);
}
// 0
// 1
// 2
// ...
for (var value of children.values()) {
console.log(value);
}
// #text
// <script>
// ...
for (var entry of children.entries()) {
console.log(entry);
}
// Array [ 0, #text ]
// Array [ 1, <script> ]
// ...
HTMLCollection
是一個(gè)節(jié)點(diǎn)對(duì)象的集合,只能包含元素節(jié)點(diǎn)(element),不能包含其他類型的節(jié)點(diǎn)。它的返回值是一個(gè)類似數(shù)組的對(duì)象,但是與NodeList
接口不同,HTMLCollection
沒有forEach
方法,只能使用for
循環(huán)遍歷。
返回HTMLCollection
實(shí)例的,主要是一些Document
對(duì)象的集合屬性,比如document.links
、document.forms
、document.images
等。
document.links instanceof HTMLCollection // true
HTMLCollection
實(shí)例都是動(dòng)態(tài)集合,節(jié)點(diǎn)的變化會(huì)實(shí)時(shí)反映在集合中。
如果元素節(jié)點(diǎn)有id
或name
屬性,那么HTMLCollection
實(shí)例上面,可以使用id
屬性或name
屬性引用該節(jié)點(diǎn)元素。如果沒有對(duì)應(yīng)的節(jié)點(diǎn),則返回null
。
// HTML 代碼如下
// <img id="pic" src="http://example.com/foo.jpg" rel="external nofollow" rel="external nofollow" >
var pic = document.getElementById('pic');
document.images.pic === pic // true
上面代碼中,document.images
是一個(gè)HTMLCollection
實(shí)例,可以通過<img>
元素的id
屬性值,從HTMLCollection
實(shí)例上取到這個(gè)元素。
length
屬性返回HTMLCollection
實(shí)例包含的成員數(shù)量。
document.links.length // 18
item
方法接受一個(gè)整數(shù)值作為參數(shù),表示成員的位置,返回該位置上的成員。
var c = document.images;
var img0 = c.item(0);
上面代碼中,item(0)
表示返回0號(hào)位置的成員。由于方括號(hào)運(yùn)算符也具有同樣作用,而且使用更方便,所以一般情況下,總是使用方括號(hào)運(yùn)算符。
如果參數(shù)值超出成員數(shù)量或者不合法(比如小于0),那么item
方法返回null
。
namedItem
方法的參數(shù)是一個(gè)字符串,表示id
屬性或name
屬性的值,返回當(dāng)前集合中對(duì)應(yīng)的元素節(jié)點(diǎn)。如果沒有對(duì)應(yīng)的節(jié)點(diǎn),則返回null
。
// HTML 代碼如下
// <img id="pic" src="http://example.com/foo.jpg" rel="external nofollow" rel="external nofollow" >
var pic = document.getElementById('pic');
document.images.namedItem('pic') === pic // true
Collection.namedItem('value')
等同于Collection['value']
。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: