JS DOM节点（父级元素、父级节点、子级元素、子级节点、..之间的关系）

节点属性
     1.NodeType: 节点类型:1-----表示标签 2-----表示属性 2---文本
     2.NodeName: 节点的名字  标签----大写标签名  属性----小写的属性文本节点
     3.NodeValue: 节点值: 标签--null 属性--属性值  文本---文本内容

​<div id="dv">
    <span id="sp">这是span标签</span>
    <div>儿子div</div>
    <ul id="uu">
        <li>略略略</li>
        <li id="ll">啦啦啦</li>
        <li>嘿嘿嘿</li>
    </ul>
</div>​

父级元素和节点
    //获取父级元素和父级节点
    var parentObj=document.getElementById('sp');
    //获取父级元素
    console.log(spObj.parentElement);
    //获取父级节点
    console.log(spObj.parentNode);

    //父级节点属性
    console.log(spObj.parentNode.nodeName);
    console.log(spObj.parentNode.nodeType);
    console.log(spObj.parentNode.nodeValue);

子级元素和节点

    var ulObj = document.getElementById('uu');
    var liObj = document.getElementById('ll');
    //获取第一个子级元素,第一个节点
    console.log(ulObj.firstElementChild);//------>ie8不支持
    console.log(ulObj.firstChild);//在ie8中得到是第一个子集元素

    //获取最后一个子级元素,最后一个节点
    console.log(ulObj.lastElementChild);//------>ie8不支持
    console.log(ulObj.lastChild);//在ie8中得到是最后一个子集元素

    //获取li的上一个兄弟元素,上一个兄弟子级
    console.log(liObj.previousElementSibling);//------>ie8不支持
    console.log(liObj.previousSibling);//在ie8中得到是上一个兄弟子集元素

    //获取li的下一个兄弟元素,下一个兄弟子级
    console.log(liObj.nextElementSibling);//------>ie8不支持
    console.log(liObj.nextSibling);//在ie8中得到是下一个兄弟集元素