二、DOM 之 节点和描述节点之间关系的属性 ------ 2020-08-23

1、节点的定义：

节点：Node（页面中所有的东西都是节点）
节点集合：NodeList

2、节点的分类：

（1）元素节点（元素标签）
（2）文本节点
（3）注释节点
（4）文档节点（document）
......

3、节点的属性：

（1）元素节点

nodeType：1
nodeName：大写的标签名
nodeValue：null

（2）文本节点

nodeType：3
nodeName：'#text'
nodeValue：文本内容

（3）注释节点

nodeType：8
nodeName：'#comment'
nodeValue：注释内容

（4）文档节点

nodeType：9
nodeName：'#document'
nodeValue：null

4、描述这些节点之间关系的属性：

（1）childNodes：获取所有的子节点
（2）children：获取所有的元素子节点（子元素标签集合）
（3）firstChild：获取第一个子节点
（4）lastChild：获取最后一个子节点
（5）firstElementChild：获取第一个元素子节点（不兼容IE6-8）
（6）lastElementChild：获取最后一个元素子节点（不兼容IE6-8）
（7）previousSibling：获取上一个哥哥节点
（8）nextSibling：获取下一个弟弟节点
（9）previousElementSibling：获取上一个哥哥元素节点（不兼容IE6-8）
（10）nextElementSibling：获取下一个弟弟元素节点（不兼容IE6-8）

5、标准浏览器和IE6-8下的几个兼容性问题

（1）标准浏览器（非IE6-8）会把空格和换行当做文本节点处理
childNodes中包含所有的节点
（2）IE6-8下使用 children 会把注释也当做元素节点

6、封装一些兼容性方法

function children (context) {
    var res = [],
         nodeList = context.childNode;
    for (var i = 0; i < nodeList.length; i++) {
        var item = nodeList[i};
        item.nodeType === 1 ? res.push(item) : null; 
    }
    return res
}

function perv (context) {
    var prev = context.previousSibling
    while (prev.nodeType !== 1) {
         prev = prev.previousSibling
    }
    return prev
}