DOM - NodeList穆律、HTMLCollection和NamedNodeMap
NodeList:
- childNodes和 querySelectorAll() 方法返回值是NodeList灾梦；
- 其中childNodes是動(dòng)態(tài)集合野舶， 而[querySelectorAll() 是靜態(tài)集合；
- 由于NodeList是類數(shù)組對(duì)象巾遭，并不是真正的[數(shù)組]對(duì)象肉康，可以使用slice()方法將其變成真正的數(shù)組；
- 但是灼舍，由于IE8-瀏覽器將NodeList實(shí)現(xiàn)為一個(gè)COM對(duì)象吼和，不能使用Array.prototype.slice()方法，必須手動(dòng)枚舉所有成員
<div id="test"></div>
<script>
var childN = test.childNodes;
console.log(childN instanceof Array);//false
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes)
}catch(ex){
array = [];
var len = nodes.length;
for(var i = 0; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}
var childNew = convertToArray(childN);
console.log(childNew instanceof Array);//true
</script>
HTMLCollection:
- HTMLCollection 也是類數(shù)組對(duì)象骑素；
- NodeList集合主要是Node節(jié)點(diǎn)的集合炫乓，而HTMLCollection集合主要是Element元素節(jié)點(diǎn)的集合。Node節(jié)點(diǎn)共有12種献丑，Element元素節(jié)點(diǎn)只是其中一種末捣。
- HTMLCollection集合包括getElementsByTagName()、getElementsByClassName()创橄、getElementsByName()等方法的返回值箩做，以及children、document.links筐摘、document.forms等元素集合卒茬；
- 所有的HTMLCollection對(duì)象都是動(dòng)態(tài)的船老；
- 與NodeList對(duì)象類似，要想變成真正的數(shù)組Array對(duì)象圃酵，需要使用slice()方法柳畔，在IE8-瀏覽器中，則必須手動(dòng)枚舉所有成員郭赐；
NamedNodeMap:
- NamedNodeMap的常見實(shí)例對(duì)象是 attributes屬性 薪韩；
- 該對(duì)象也是一個(gè)動(dòng)態(tài)集合
- 動(dòng)態(tài)集合是個(gè)很實(shí)用的概念，但在使用循環(huán)時(shí)一定要千萬(wàn)小心捌锭》荩可能會(huì)因?yàn)楹雎约系膭?dòng)態(tài)性观谦，造成死循環(huán)豁状；
var divs = document.getElementsByTagName("div");
for(var i = 0 ; i < divs.length; i++){
document.body.appendChild(document.createElement("div"));
}
- 在上面代碼中夭禽，由于divs是一個(gè)HTMLElement集合，divs.length會(huì)隨著appendChild()方法潮梯，而一直增加，于是變成一個(gè)死循環(huán), 為了避免此情況沃饶，一般地糊肤，可以寫為下面形式:
var divs = document.getElementsByTagName("div");
for(var i = 0,len = divs.length; i < len; i++){
document.body.appendChild(document.createElement("div"));
}
總結(jié)
- 一般地抖拦，要盡量減少訪問NodeList噩茄、HTMLCollection绩聘、NamedNodeMap的次數(shù)机杜。因?yàn)槊看卧L問它們，都會(huì)運(yùn)行一次基于文檔的查詢。所以，可以考慮將它們的值緩存起來(lái);
- NodeList是節(jié)點(diǎn)的集合，HTMLCollection是元素節(jié)點(diǎn)的集合，NamedNodeMap是特性節(jié)點(diǎn)的集合诗宣，它們都是類數(shù)組對(duì)象来破；
- 還有一個(gè)更經(jīng)典的類數(shù)組對(duì)象——函數(shù)內(nèi)部的arguments诅诱，它也具有動(dòng)態(tài)性干旁；
