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>
原文：http://www.cnblogs.com/sese/p/6398611.html