原生 JS 中的节点关系

1、 原生JS中nodeType属性

节点属性类型：

nodeType

任何的HTML元素，都有nodeType属性，值有1~11，这里精简到了5个：
1： 元素节点
3： 文本节点
8： 注释节点
9： document节点
10: DTD

    
    


    
  节点
    

只有alert(document.nodeType); 结果为 9。

2、原生JS中的节点关系-childNodes

我为了好记叫（儿子数组）
任何节点都有childNodes属性，是一个类数组对象，存放着所有自己的儿子。
注意，这里有重大兼容性问题：空白文本现象
结构

Chrome、IE9、IE10……高级浏览器，认为：
alert（box.childNodes[0].nodeType ） //3
高级浏览器认为box的大儿子是文本节点。当然是空文本。

IE6、7、8等低级浏览器认为：
alert（box.childNodes[0].nodeType） //1
IE6、7、8认为 box 的大儿子是p。

所以为了没有兼容问题，需要遍历节点的时候，HTML结构就不能有空格。
一个面试题：

        

            

            

            

            

        

    document.getElementById(“box”).childNodes.length;  //高级浏览器9，低级浏览器4

怎么解决这个差异呢？放弃原有的数组，重新遍历儿子数组，把所有nodeType为1的元素组成一个新的数组。

     var childs = [];
     for(var i = 0 ; i < box.childNodes.length ; i++){
        if(box.childNodes[i].nodeType == 1){  //可以为一也可以为三五八，筛选条件不同。
            childs.push(box.childNodes[i]);
        }
     }
     childs[1].style.background = "red";

firstChild属性、lastChild属性： 也不好用，IE6、7、8认为firstChild是节点， 而Chrome认为firstChild是空文本

3、原生JS中的节点关系-parentNode

我为了好记叫（父亲数组）
注意 childNodes 儿子可以有很多 ，parendNode 父亲只能有1个

4、previousSibling、nextSibling

previous | 英[ˈpri:viəs] 以前的; 先前的; 过早的; （时间上） 稍前的;
sibling | 英[ˈsɪblɪŋ] 同胞兄弟，姐妹; [生] 同科。
previousSibling、nextSibling
上一个同胞兄弟，下一个同胞兄弟。

        

            
AAA
            
BBB
            
CCC
            
DDD
        

    ps[2].previousSibling   //低级浏览器就是BBB那个p，高级浏览器是空文本节点

让一个 box 序列上面全部变红。box 下面所有盒子变红雷同。

让 box 节点的之前的所有节点，都变红，原生 JS 挺难的：
            var prev = box;
            while(prev = prev.previousSibling){ //一直查找兄弟的兄弟，直到遇见 null。
     暗含一个 for 迭代器if(prev.nodeType == 1){
                    prev.style.background = "red";
                }
            }

jQuery 写法：
$("#box").prevAll().css.backgoround = ""red;

总结：

原生 JS 中的节点关系