子节点和兄弟节点的操作

元素.firstChild

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

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

添加下列代码来显示第一个子节点下图说明在标准ie浏览器下:firstChild会包含文本类型的节点；在非标准的ie下：只包含元素节点

1	alert( oUl.firstChild );

元素.firstElementChild

元素.firstElementChild:只读，属性，标准下获取第一个元素类型的子节点（所以在非标准的ie下是不支持这个属性的),所以非标准下会输出下图所示undefined

可以用以下代码，这样的话在标准下和非标准下都可以正常。

  if ( oUl.firstElementChild ) {
	oUl.firstElementChild.style.background = 'red'; //在标准浏览器下
} else {
	oUl.firstChild.style.background = 'red';   //在非标准ie下
}

简化这段代码：

var oFirst=oUl.firstElementChild || oUl.firstChild;
if(oFirst){
	oFirst.style.background='red';
}else{
	alert('没有子节点可以设置');
	}

元素.lastChild || 元素.lastElementChild

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

var oLast=oUl.lastElementChild || oUl.lastChild;
if(oLast){
	oLast.style.background='yellow';
}else{
	alert('没有子节点可以设置');
	}

元素.nextSibling || 元素.nextElementSibling

元素.nextSibling || 元素.nextElementSibling:下一个兄弟节点

1 2	var oNext=oFirst.nextElementSibling \|\| oFirst.nextSibling; oNext.style.background='blue';

元素.previousSibling || 元素.previousElementSibling

元素.previousSibling || 元素.previousElementSibling：上一个兄弟节点

1 2	var oPrev=oLast.previousElementSibling \|\| oLast.previousSibling; oPrev.style.background='orange';