javascript中的动态集合——NodeList、HTMLCollection、NamedNodeMap
·
一、NodeList、HTMLCollection、NamedNodeMap的相同点与不同点
(1)相同点
1. 三者都是类数组对象
2. 都有item()方法
(2)不同点
1. NodeList是节点(12种)的集合、HTMLCollection是元素节点的集合、NamedNodeMap是属性节点的集合
2. NodeList有静态的、有动态的,HTMLCollection和NamedNodeMap都是动态集合
二、NodeList
NodeList 对象代表一个有序的节点列表.
哪些返回NodeList?
<div id="container">
<span></span>
</div>
childNode:返回动态NodeList,基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动的反应在NodeList对象中。
var oDiv=document.getElementById("container");
console.log(oDiv.childNodes.length);//3
console.log(oDiv.childNodes instanceof NodeList);//true
document(element).querySelectorAll("..."):返回静态NodeList,类似一组元素的快照
var oDiv1=document.querySelectorAll("#container");
console.log(oDiv1);//NodeList [div#container]
console.log(oDiv1 instanceof NodeList);//true
三、HTMLCollection
HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。
哪些返回HTMLCollection呢?
document.getElementsByNamedocument.getElementsByTagNamedocument.getElementsByClassNamedocument.forms、document.forms[0].elements、document.images、document.links
四、NamedNodeMap
NamedNodeMap 对象代表一个节点的无序列表。
哪些返回NamedNodeMap?
element.attributes
var oDiv=document.getElemenById("container");
console.log(oDiv.attributes);//NamedNodeMap {0: id, id: id, length: 1}
console.log(oDiv.attributes instanceof NamedNodeMap);//true
五、将三种类数组对象转化为数组
前面提到:这三种对象都是类数组对象,那么如何将NodeList对象转化为数组呢?
function convertToArray(nodes){
var array=null;
try{
array=Array.prototype.slice.call(nodes,0);//非IE
}catch(ex){//IE,IE8及更早版本将NodeList对象实现为一个COM对象,不能像JScript对象那样使用这种对象,因此上述代码会发生错误。要想在IE浏览器中将NodeList对象转换为数组,必须手动枚举所有成员
array=new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
}
更多关于数组、对象、类数组对象的讨论,请参考:数组、对象、类数组对象的不同以及类数组转数组方法总结
更多推荐


所有评论(0)