一說起動態(tài)集合，多數(shù)人可能都有所了解。但是，如果再深入些，有哪些動態(tài)集合，以及這些動態(tài)集合有什么表現(xiàn)、區(qū)別和聯(lián)系？可能好多人就要搖頭了。本文就javascript中的動態(tài)集合做詳細介紹
NodeList實例對象是一個類數(shù)組對象，它的成員是節(jié)點對象，包括childNodes和querySelectorAll()方法返回值
<div id="test"></div><script>console.log(test.childNodes);//[]//IE7-瀏覽器并未定義NodeList對象，會報錯，其他瀏覽器返回trueconsole.log(test.childNodes instanceof NodeList)</script>
<div id="test"></div><script>console.log(document.querySelectorAll('div'));//[div#test]//IE8-瀏覽器不支持querySelectorAll()方法，返回false，其他瀏覽器返回trueconsole.log(document.querySelectorAll('div') instanceof NodeList)</script>
動態(tài)集合是指DOM結(jié)構(gòu)的變化能夠自動反映到所保存的對象中
<div id="test"></div><script>var childN = test.childNodes;console.log(childN);//[]test.appendChild(document.createElement('div'));console.log(childN);//[div]</script>
靜態(tài)
[注意]NodeList并不都是動態(tài)集合，其中querySelectorAll()返回值就是靜態(tài)集合NodeStaticList
<div id="test"></div><script>var seles = test.querySelectorAll('div');console.log(seles);//[]test.appendChild(document.createElement('div'));console.log(seles);//[]console.log(test.querySelectorAll('div'));//[div]</script>
數(shù)組
由于NodeList是類數(shù)組對象，并不是真正的數(shù)組對象，可以使用slice()方法將其變成真正的數(shù)組
<div id="test"></div><script>var childN = test.childNodes;console.log(childN instanceof Array);//falsevar childNew = Array.prototype.slice.call(childN);console.log(childNew instanceof Array);//true</script>
但是，由于IE8-瀏覽器將NodeList實現(xiàn)為一個COM對象，不能使用Array.prototype.slice()方法，必須手動枚舉所有成員
<div id="test"></div><script>var childN = test.childNodes;console.log(childN instanceof Array);//falsefunction 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對象與NodeList對象類似，也是節(jié)點的集合，返回一個類數(shù)組對象。但二者有不同之處
NodeList集合主要是Node節(jié)點的集合，而HTMLCollection集合主要是Element元素節(jié)點的集合。Node節(jié)點共有12種，Element元素節(jié)點只是其中一種。關(guān)于12種節(jié)點類型的詳細信息移步至此
HTMLCollection集合包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children、document.links、document.forms等元素集合
<div id="test"></div><script>var childN = test.children;//IE7-瀏覽器并未定義HTMLCollection對象，會報錯，其他瀏覽器返回trueconsole.log(childN instanceof HTMLCollection);var tags =test.getElementsByTagName('div');//IE7-瀏覽器并未定義HTMLCollection對象，會報錯，其他瀏覽器返回trueconsole.log(tags instanceof HTMLCollection);</script>
動態(tài)
與NodeList對象不同，所有的HTMLCollection對象都是動態(tài)的
<div id="test"></div><script>var childN = test.children;var tags =test.getElementsByTagName('div');console.log(childN,tags);//[]、[]test.innerHTML = '<div></div>';console.log(childN,tags);//[div]、[div]</script>
[注意]與NodeList對象類似，要想變成真正的數(shù)組Array對象，需要使用slice()方法，在IE8-瀏覽器中，則必須手動枚舉所有成員
可能一些人沒有聽過NamedNodeMap對象，該對象的常見實例對象是attributes屬性
<div id="test"></div><script>var attrs = test.attributes;console.log(attrs instanceof NamedNodeMap);//true</script>
動態(tài)
該對象也是一個動態(tài)集合
<div id="test"></div><script>var attrs = test.attributes;console.log(attrs);//NamedNodeMap {0: id, length: 1}test.setAttribute('title','123');console.log(attrs);//NamedNodeMap {0: id, 1: title, length: 2}</script>
動態(tài)集合是個很實用的概念，但在使用循環(huán)時一定要千萬小心?？赡軙驗楹雎约系膭討B(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"));}
一般地，要盡量減少訪問NodeList、HTMLCollection、NamedNodeMap的次數(shù)。因為每次訪問它們，都會運行一次基于文檔的查詢。所以，可以考慮將它們的值緩存起來
NodeList是節(jié)點的集合，HTMLCollection是元素節(jié)點的集合，NamedNodeMap是特性節(jié)點的集合，它們都是類數(shù)組對象
對了，還有一個更經(jīng)典的類數(shù)組對象——函數(shù)內(nèi)部的arguments，它也具有動態(tài)性
歡迎交流
