DOM访问关系（父节点 子节点）

把下面的知识点掌握了，可以做一下下面的案例，都是工作中常用的，很有用

知识点

 

1、带Eleent和不带区别

    a）带Element的获取的是元素节点

    b）不带Element的获取文本节点和属性节点

 

关系访问节点

1、获取父节点   parentNode

li.parentNode.style.background="green"

2、获取兄弟节点：

       a）previousSibling 前一个兄弟元节点

       b）nextSibling 后一个兄弟节点

             IE678中指下一个元素节点 (标签)

             在IE8以上，火狐指下一个节点（包括空文档和换行节点） 

 // 兼容ie678
    box3.previousSibling.style.background="yellow"
    box3.nextSibling.style.background="blue"


 //获取的是文本节点和4个换行
   console.log(box3.nextSibling)

      c）nextElementSibling/previousElementSibling 

            在IE678中不支持

//兄弟节点 ie678不兼容
    box3.previousElementSibling.style.background="yellow";//前一个节点元素
    box3.nextElementSibling.style.background="blue"//后一个节点元素

//兼容性写法
    var pre=box3.previousElementSibling || box3.previousSibling;
    var nex=box3.nextElementSibling || box3.nextSibling;
    pre.style.background="yellow";
    nex.style.background="blue"

 3、获取单个子节点 

        a）firstChild 第一个子节点

        b）lastChild 最后一个子节点

              IE678中指下一个元素节点 (标签)

              在IE8以上，火狐指下一个节点（包括空文档和换行节点） 

        c）firstElementChild / lastElementChild 

            在IE678中不支持

//单个子节点 调用者是父节点
 //firstChild：IE678中指最后一个子元素节点（标签）
 //firstElementChild:在火狐谷歌IE9都指的最后一个子元素节点
 console.log(box2.parentNode.lastElementChild)

5、所有的子节点children    （最常用）

       a）它返回指定元素的子元素集合，

        b）返回值都是数组

        c）  兼容IE678/火狐

        d）在IE678/ 可以获取注释

  var chi=box3.parentNode.children;
    for(var i=0; i<chi.length; i++){
        chi[i].style.background="black"
    }

6， 所有的子节点 childNodes（不经常用）

            a)获取所以的元素和文本，空格节点

var box3=document.getElementById("box3");
var arr=box3.parentNode.childNodes;
//console.log(arr)
        for(var i=0; i<arr.length; i++){
            if(arr[i].nodeType===1){
                arr[i].style.background="gold"
                console.log(arr[i])
            }
        }

7、任意子节点

    节点.parentNode（父亲节点）.children（所以字节点）[ 索引值 ]

var box3=document.getElementById("box3");
var nede=box3.parentNode.children[2];//索引值
console.log(nede)

8、拓展内容 

     a）:标签类型    

    如果节点是元素节点，则 nodeType 属性将返回 1。
    如果节点是属性节点，则 nodeType 属性将返回 2。

    如果节点是文本节点，则 nodeType 属性将返回3。

<div id="box"></div>
var box=document.getElementById("box")
var box1=box.getAttributeNode("id")
console.log(box1.nodeType)

   b） nodeName：节点的名字

<div id="box"></div>
var box=document.getElementById("box")
var box1=box.getAttributeNode("id")
console.log(box.nodeName)
console.log(box1.nodeName)

    c）nodeValue节点的值

<div id="box"></div>
var box=document.getElementById("box")
var box1=box.getAttributeNode("id")
console.log(box.nodeValue)
console.log(box1.nodeValue)

案例

//用nodeType写出各行变色
            var ul=document.getElementsByTagName("ul")[0];
            var arr1=ul.childNodes
            console.log(ul.childNodes)
            //把元素放在数组中
            var arr2=[]
            for(var i=0; i<arr1.length; i++){
                
                if(arr1[i].nodeType ===1){
                    arr2.push(arr1[i])
                }
            }
            for(var i=0; i<arr2.length; i++){
                if(i%2===0){
                    arr2[i].style.background="red"
                }
            }

top案例

window.onload=function(){
            //封装函数，用到就调用
            var box=document.getElementsByClassName("box");
            //调用函数
           /* fu(box[0]);
            fu(box[1]);*/
            //多个同样的板块用到，for循环调用
            for(var i=0; i<box.length; i++){
                fu(box[i])
            };
            function fu(ele){ //外面的box
            var liArr=ele.getElementsByTagName("li");
            var spanArr=ele.getElementsByTagName("span");
            //绑定事件 为一每一个li绑定鼠标以上事件（for循环）
            for(var i=0; i<liArr.length; i++){
                //每次循环绑定一个属性，属性值是该盒子的索引值
                liArr[i].setAttribute("index",i);
                liArr[i].onmouseover=function(){
                    //思路：1点亮盒子，2利用索引值显示盒子 (排他思想)
                    //排他思想是和for循环连用
                    for(var j=0; j<liArr.length; j++){
                        liArr[j].removeAttribute("class");
                        spanArr[j].removeAttribute("class");
                    }
                    this.setAttribute("class","current");
                    spanArr[this.getAttribute("index")].setAttribute("class","hide")
                }
            }
            }
        }