DOM父节点、子节点例子
父节点
<body>
<ul id="oUl">
<li><a href="#">隐藏1</a></li>
<li><a href="#">隐藏2</a></li>
<li><a href="#">隐藏3</a></li>
<li><a href="#">隐藏4</a></li>
</ul>
<script>
var a=document.getElementsByTagName('a');
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
this.parentNode.style.display='none';
}
}
console.log(a[0].parentNode.parentNode.parentNode.parentNode.parentNode);
console.log(a[0].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
</script>
</body>
子节点
<body>
<ul id="oUl">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
var oUl=document.getElementById('oUl');
var lis=oUl.children;//childNodes的一个兼容版
lis[0].nextElementSibling.style.background='pink';//找到某个元素的下个兄弟节点
lis[3].previousElementSibling.style.background='green';//找到某个元素的上个兄弟节点
console.log(oUl.firstElementChild);//第一个子节点
console.log(oUl.lastElementChild);//最后一个子节点
</script>
</body>
firstChild/firstElementChild获取第一个子节点，参考资料：http://www.cnblogs.com/jelly7723/p/4871849.html
