Dom-NodeList理解

//在控制台typeof NodeList 

//执行结果为:function,结果在控制台输入了NodeList,效果如下:

//发现除了function里面什么都没有，于是直接new了一下NodeList,效果如下:

//结果会报错，查阅了一下NodeList的相关介绍，发现NodeList是DOM的接口之一，下面就为大家介绍介绍NodeList

<p class="x1" name="xx">Player 1: Chris</p>

//NodeList接口是DOM对象模型四大基本接口之一(Document、Node、NodeList、NamedNodeMap)
//NodeListjie接口是一个节点的集合，包含了某个节点的所有子节点，虽然它有一些数组的属性但是又不是数组(NodeList中的每个item都可以通过一个索引来访问，该索引值从0开始。)
//NodeList在某方面和数组非常相似，那它可以直接使用Array.prototype上继承的方法吗？

<script type="text/javascript">

var ma=document.querySelectorAll("p.x1");

      console.log(ma);

</script >

//看上面的列子执行效果，我们可以发现NodeList的原型链：myNodeList --> NodeList.prototype --> Object.prototype --> null，并没有继承Array.prototype，所有并不能直接使用Array.prototype上的方法

//动态NodeList:对底层文档结构的修改会动态的反应到NodeList中，然后又在其他地方对这个元素进行操作(增、删、改子元素等),这些操作会自动反射到NodeList中不需要手动进行操作。
//所有的的getElement..方法都会返回动态的NodeList集合，所以，一旦document发生变化，那么NodeList就会自动更新对应的元素,看下面实例:

<script type="text/javascript">

var p = document.getElementsByTagName("p");
      var i = 0 ;
      while (i<p.length) {
      document.body.appendChild(document.createElement("p"));
      i++;
      alert(i);
     }

</script >

 //运行上面一段代码，我们执行出来陷入了死循环，这是为什么勒？
//原因：每次循环都会重新计算p.length,每次迭代都会添加一个新的p标签所以每次i++,p.length的长度也在增加，所以i总是小于p.length,所以终止循环的条件也永远不会触发

//静态NodeList:对底层document的更改不会影响到返回的NodeList对象,querySelectorAll和querySelector方法返回的就是一个静态的NodeList

<script type="text/javascript">
var p = document.querySelectorAll("p");
var i=0;
while(i < p.length){
    document.body.appendChild(document.createElement("p"));
    i++;
    alert(i);
}

</script>

//执行上面这个实例,发现执行出来并没有像上面那个例子一样陷入死循环，这是为什么勒？
//我们已经知道querySelectorAll返回的是一个静态的NodeList，此时返回的NodeList只是方法被调用时的文档状态的快照。在这种情况下p.length的值永远不会变，只要不满足条件就直接终止循环
//为什么动态的NodeList比静态的NodeList快？
//总结原因:

1.创建方式是完全不同(动态NodeList不需要预先获取所有的信息,而静态NodeList一开始就需要取得并封装所有相关的数据)

2.动态NodeList是通过在cache缓存中注册它的存在并创建。每次访问必须查询 document 的变化，而静态NodeList对象实例是由另外一个文件创建，然后循环填充所有的数据。