在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>