javascript——DOM之firstChild,lastChild,NextSibling,previousSibling

浏览数：197 / 时间：2015年06月08日

元素.firstChild : 只读属性第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
元素.firstElementChild : 只读属性标准下获取第一个元素类型的子节点

兼容标准和非标准浏览器的写法：

HTML代码：

<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>

JS代码：

window.onload = function() {
　　var oUl = document.getElementById(‘ul1‘);
　　// alert(oUl.firstChild);
　　// alert(oUl.firstElementChild);

　　if(oUl.firstElementChild){
   　　oUl.firstElementChild.style.color = ‘red‘;
　　}else{
   　　 oUl.firstChild.style.color = ‘red‘;
　　}
};

firstChild,lastChild,NextSibling,previousSibling的用法一样，以下是第二种写法：

window.onload = function() {
　　var oUl = document.getElementById(‘ul1‘);

　　/*
　　元素.firstChild || 元素.firstElementChild 最后一个子节点
　　*/
　　var oFirst = oUl.firstElementChild || oUl.firstChild;
　　oFirst.style.color = ‘red‘;

　　/*
　　元素.lastChild || 元素.lastElementChild 最后一个子节点
　　*/

　　var oLast = oUl.lastElementChild || oUl.lastChild;
　　oLast.style.color = ‘green‘;

　　/*
　　元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
　　*/
　　var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
　　oNext.style.color = ‘blue‘;

　　/*
　　元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
　　*/
　　var oPrev = oLast.previousElementSibling || oLast.previousSibling;
　　oPrev.style.color = ‘orange‘;

　　//下一个兄弟节点的下一个相邻兄弟节点（及ul下的第三个字节点）
　　var oTher = oNext.nextElementSibling || oNext.nextSibling;
　　oTher.style.color = ‘purple‘;