二、节点

一、节点的分类

a.nodeType==1  为元素节点
b.nodeType==2  为属性节点
c.nodeType==3  位文本节点

获取节点

   <!-- nodeType 判断第一个节点的类型-->
    <p id="app" >123</p>
    <script>
        var app=document.getElementById("app");
        var id=app.getAttributeNode("id")  //获取属性节点
        console.log(app.nodeType); //1 元素节点
        console.log(app.firstChild.nodeType);  //获取第一个子节点    3 文本节点
        console.log(id.nodeType);  //2 属性节点
    </script>

二、节点的获取

childNodes 获取所有子节点 (不管文本还是属性节点)

parentNode 父元素节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
</ul>
    <script>
        var app = document.getElementById("app")
        var childs = app.childNodes;
        console.log(childs);  // 所有的子节点 共有9个
        var arr = []
        for(var i = 0;i<childs.length;i++){
            if(childs[i].nodeType == 1){
                arr.push(childs[i])
            }
        }
        console.log(arr);
    </script>

children 只获取元素节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
</ul>
    <script>
        var app = document.getElementById("app")
        console.log(app.children)  // 只获取元素节点
    </script>

三、节点

2-1 子节点

• FirstChild //包含所有类型的节点 获取第一个子节点
• FirstElementChild //IE9以下不兼容 获取第一个元素子节点
• LastChild //所有类型的节点 获取第一个子节点
• LastElementChild //IE9以下不支持 兼容问题的解决 获取第一个元素子节点
  //firstElementChild在ie9以上是一个对象，IE9以下undefined

2-2 兄弟节点

• nextSibling 返回指定节点之后紧跟的节点，在相同的树层级中。
• nextElementSibling //IE9以下不支持 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）
• previousSibling 返回列表项的 previousSibling（前一个同胞节点）
• previousElementSibling //IE9以下不支持 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）