js学习笔记15----子节点和兄弟节点的操作

1.元素.firstChild : 只读属性，第一个子节点

　　标准下：会包含文本类型的子节点。

　　非标准下：只包含元素类型子节点。

元素.firstElementChild : 只读属性，第一个元素子节点，等价于元素.children[0]

　　标准和非标准下都是获取第一个元素子节点。

 

2.元素.lastChild : 只读属性，最后一个子节点

元素.lastElementChild : 只读属性，最后一个元素子节点

 

3.元素.nextSibling: 只读属性，下一个兄弟节点

元素.nextElementSibling: 只读属性，下一个兄弟元素节点

 

4.元素.previousSibling: 只读属性，上一个兄弟节点

元素.previousElementSibling: 只读属性，上一个兄弟元素节点

 

兼容写法：

<!DOCTYPE html>
<html>
<head>
    <title>元素兼容</title>
</head>
<body>
    <ul id="ul1">
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementById('ul1');      
        var oFirst = oUl.firstElementChild || oUl.firstChild;
        var oLast = oUl.lastElementChild  || oUl.lastChild ;
        var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
        var oPrev = oLast.previousElementSibling || oLast.previousSibling;
        oFirst.style.backgroundColor = 'red';
        oLast.style.backgroundColor = 'blue';
        oNext.style.backgroundColor = 'pink';
        oPrev.style.backgroundColor = 'brown';
    </script>
</body>
</html>

 

posted @ 2017-02-14 17:35  前端[色色]  阅读(1646)  评论(0)  编辑  收藏  举报