DOM

1、DOM（文档树 ）:文档对象模型（把网页当成对象的方式来描述）， 是树形结构

2、节点：元素节点、属性节点、文本节点（开始标签和结束标签内的内容
）、注释节点
html的所有内容都可以称之为节点

获取body标签对象 ----> var body = document.body;
获取html标签对象 ----> var html = document.documentElement;

节点的一些属性和方法：

属性
（1）nodeName:节点的名字（如果是元素节点的话，是标签的名称）
（2）nodeType:节点的类型（属性值是数值。1代表元素节点，2代表属性节点，3代表文本节点）
（3）nodeValue:节点的值（如果是元素节点，值为null）
方法：
（1）hasChildNodes()判断元素下是否含有子节点，但是注意的是，他不但会判断元素节点，也会判断文本节点等其他节点

获取父节点和子节点

（1）parentNode属性 父节点，只有一个
（2）childNodes属性 子节点，可以没有值，一个或多个值（会把文本节点，元素节点，注释节点都保存进去）--->浏览器兼容有问题，不推荐使用
（3）children 子节点（只保存元素节点）

    

        我是span
        我是a标签
    
    
我是段落
    

获取父节点中的第一个和最后一个子元素节点

获取第一个子节点 firstChild属性
获取最后个子节点 lastChild属性
获取第一一个子节点（子元素） firstElementChild属性-->有兼容问题，就是在IE9及以下都不支持该属性
获取最后一个子节点（子元素） lastElementChild属性-->有兼容问题，就是在IE9及以下都不支持该属性

        获取第一个子节点    firstChild属性
        获取最后个子节点    lastChild属性
        获取第一一个子节点（子元素） firstElementChild属性
        获取最后一个子节点（子元素）  lastElementsChild属性

        // 获取元素
        var box = document.getElementById('box');
           获取第一个子节点 firstChild属性
        var fc = box.firstChild;
        console.log(fc);    //输出的是#text(第一个文本节点)

          获取最后一个子节点
        var lc = box.lastChild;
        console.log(lc);    //输出的是#text(最后个文本节点)
          根据上面两个情况得知lastChild和firstChild返回的节点是父节点所有子节点中的第一个和最后一个


          获取最后一个子节点（子元素)
        var fec = box.firstElementChild;
        console.log(fec); //输出我是span

          获取最后一个子节点（子元素）
        var lec = box.lastElementChild;
        console.log(lec);   //输出缩略
          得知以上两种返回的是子节点中的元素节点

  兼容问题
firstElementChild，lastElementsChild虽然可以直接得到父节点中的最后一个和第一个子元素。
但是有兼容问题，就是在IE9及以下都不支持该属性，下面给出了处理方式：
我们可以创建一个函数，如getFirstElementChild(element),函数里面先使用children获取到所有的子元素节点，判断哪个是第一个字节点并返回

        function getFirstElementChild(element) {
            // 获取父节点的所有子元素节点
            var nodes = element.children;
            //获取第一个子元素
            var node = nodes[0];
            // 返回元素
            return node;
        }

        function getLastElementChild(element) {
            // 获取父节点的所有子元素节点
            var nodes = element.children;
            //获取最后一个子元素
            var node = nodes[nodes.length-1];
            // 返回元素
            return node;
        }

获取兄弟节点

previousSibling--->获取前一个兄弟节点
previousElementSibling--->获取前一个兄弟节点(元素)//有兼容问题，IE8及以下不能用
nextSibling--->获取下一个兄弟节点
nextElementSibling--->获取下一个兄弟节点（元素）//有兼容问题，IE8及以下不能用