在IE下是支持firstChild,lastChild,nextSibling,previousSibling
但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用
firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling
兼容的写法是这样的
var oFirst = oParent.firstElementChild||oParent.firstChild
也可以这么写
var oFirst = oParent.children[0];
var oLast = oParent.lastElementChild||oParent.lastChild
也可以这么写
var oLast = oParent.children[oParent.children.length-1];
var oNext = obj.nextElementSibling||obj.nextSibling
var oPre = obj.previousElementSibling||obj.previousSibling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function() {
var oUl = document.getElementById('ul1'); /*
元素.lastChild || 元素.lastElementChild 第一个子节点
元素.lastChild || 元素.lastElementChild 最后一个子节点
元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点 */
var oFirst = oUl.firstElementChild || oUl.firstChild;
//var oFirst = oUl.children[0];
oFirst.style.background = 'red'; var oLast = oUl.lastElementChild || oUl.lastChild;
//var oLast = oUl.children[oUl.children.length-1];
oLast.style.background = 'yellow'; var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'blue'; var oPrev = oLast.previousElementSibling || oLast.previousSibling;
oPrev.style.background = 'orange'; }
</script>
</head> <body>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul></body>
</html>