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.getElementsByName
document.getElementsByTagName
document.getElementsByClassName
document.forms、document.forms[0].elements、 document.images、 document.links

四、NamedNodeMap

NamedNodeMap 对象代表一个节点的无序列表。

扫描二维码关注公众号，回复： 1620620 查看本文章

哪些返回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;
        }

更多关于数组、对象、类数组对象的讨论，请参考：数组、对象、类数组对象的不同以及类数组转数组方法总结

javascript中的动态集合——NodeList、HTMLCollection、NamedNodeMap

猜你喜欢