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

posted @ 2017-03-11 17:45  swift-zsw  阅读(238)  评论(0)  编辑  收藏  举报