DOM - NodeList、HTMLCollection和NamedNodeMap
NodeList:
- childNodes和 querySelectorAll() 方法返回值是NodeList；
- 其中childNodes是動態(tài)集合， 而[querySelectorAll() 是靜態(tài)集合；
- 由于NodeList是類數(shù)組對象，并不是真正的[數(shù)組]對象，可以使用slice()方法將其變成真正的數(shù)組；
- 但是，由于IE8-瀏覽器將NodeList實現(xiàn)為一個COM對象，不能使用Array.prototype.slice()方法，必須手動枚舉所有成員
<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ù)組對象；
- NodeList集合主要是Node節(jié)點的集合，而HTMLCollection集合主要是Element元素節(jié)點的集合。Node節(jié)點共有12種，Element元素節(jié)點只是其中一種。
- HTMLCollection集合包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children、document.links、document.forms等元素集合；
- 所有的HTMLCollection對象都是動態(tài)的；
- 與NodeList對象類似，要想變成真正的數(shù)組Array對象，需要使用slice()方法，在IE8-瀏覽器中，則必須手動枚舉所有成員；
NamedNodeMap:
- NamedNodeMap的常見實例對象是 attributes屬性 ；
- 該對象也是一個動態(tài)集合
- 動態(tài)集合是個很實用的概念，但在使用循環(huán)時一定要千萬小心。可能會因為忽略集合的動態(tài)性，造成死循環(huán)；
var divs = document.getElementsByTagName("div");
for(var i = 0 ; i < divs.length; i++){
document.body.appendChild(document.createElement("div"));
}
- 在上面代碼中，由于divs是一個HTMLElement集合，divs.length會隨著appendChild()方法，而一直增加，于是變成一個死循環(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ù)。因為每次訪問它們，都會運行一次基于文檔的查詢。所以，可以考慮將它們的值緩存起來;
- NodeList是節(jié)點的集合，HTMLCollection是元素節(jié)點的集合，NamedNodeMap是特性節(jié)點的集合，它們都是類數(shù)組對象；
- 還有一個更經(jīng)典的類數(shù)組對象——函數(shù)內(nèi)部的arguments，它也具有動態(tài)性；
