DOM动态解析的关键

加入一个元素中追加了2个文本节点 可以通过normalize（）方法合并二个文本节点
splitText()可以分割子节点 一个文本节点分割成2 个 传入分割下标根据字符来算

---

nodeList 其近亲 NamedNodeMap HTMLCollection 都是整体上解析DOM的关键所在

这三个集合都是动态的 当文档发生变化实时更新的 所以他们的信息都是最新的

---

HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性

3者区别

var divs = document.getElementsByTagName("div");
alert(divs instanceof HTMLCollection); //true （chrome中返回false，divs是NodeList对象）

var div = document.getElementById("div1")

var children = div.childNodes; //获取div元素子节点集合
alert(children instanceof NodeList); //true

var attrs = div.attributes; //获取div元素的特性
1 alert(children instanceof NamedNodeMap); //true

以上代码中，chrome下的document.getElementsByTagName("div")将返回NodeList对象。

这三个对象都是“类数组”，可以获取他们的length，也可以通过 attrs[0] 获取数据，有点类似与函数里面的arguments。

NamedNodeMap和Attr
div.attrbutes将返回一个NamedNodeMap对象，即NamedNodeMap存储是的div的“特性Attribute”集合。而集合中的每一个元素，都是Attr类型的对象。Attr对象有三个属性，name、value和specified。

但是在日常应用中，一般会应用getAttribute()、setAttribute()和romoveAttribute()来操作特性，不需要直接访问特性对象

为什么说他们是动态的来看看这个

       var divs = document.getElementsByTagName("div"),
            i,
            div;
        for (i = 0; i < divs.length; i++) {
            div = document.createElement("div");
            document.body.appendChild(div);
        }

总结一下就是说前面2个是获取的元素存在NodeList 或者HTMLCollection中 而最后一个是属性集合

扩展选择器

selectors API Level 1 原声的API 可以提高性能的选择器
querySelector（）单个元素第一个
querySelectorAll() 回去所有返回NodeLIst
selectors API Level 2
matchesSelector()判断是否匹配 支持不好 需要加前缀msmatchesSelector()
mozmatchesSelector()
webkitmatchesSelector()