节点概述

一般来讲节点至少拥有下面三个属性

            1.nodeType:节点类型

            2.nodeName：节点名称

            3.nodeValue:节点值

• 元素节点的nodeType为1；
• 属性节点的nodeType为2
• 文本节点的nodeType为3（文本节点包含文字，空格，换行等）

在实际开发中，节点的主要操作是元素节点

 

节点层级：利用DOM树可以吧节点划分为不同的层级关系，最常见的是父子兄层级关系

 

        1.父级节点

            node.parentNode

        2.子节点

            1.parent.Node.childNodes(标准)，

                返回包含指定节点的子节点的集合，该集合为即时更新的集合

                注意：所有的子节点，包含元素节点 文本节点等等(firstChild，lastChild)也一样

            

            2.parentNode.children（非标准），它是一个只读属性，只返回子元素节点

            各个浏览器均支持，可放心使用（也是实际开发中常用的）

　　实际开发中 选择第一个子元素且没有兼容性问题

                parentNode.children[index];

        3.兄弟节点

            1.nextSibling 下一个兄弟节点 包含元素节点 文本节点

                nextElementSibling  获取上一个元素节点（存在兼容性问题，IE9以上才支持）

            2.previousSibling 上一个兄弟节点 包含元素节点 文本节点

                previousElementSibling 上一个元素节点（存在兼容性问题，IE9以上才支持）

 

            如何解决兼容性问题：自己封装一个兼容性的函数

             

   function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }