本文主要是介绍JS教程:childNodes与parentNode，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
如果你是高手，对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。
childNodes：表示对象的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性;
parentNode：表示对象的父级节点。
当我解释完这两个方法以后，可能有人会问，他们有什么用，嘿嘿，当然有用，我们下面有一个例子来说明他们的作用。
如果我们有一个ul列表，大家都知道ul中只能放li标签，但是li标签中我们还可以放入ul，那么这个ul中必然就有li，但是我现在有一个要求就是我想为第一个ul下面的第一级li鼠标移上去的时候加一个样式，这样一个需求我们应该怎么做呢？请看效果及代码：
<ul id="abc"><li id="ccc"><ul><li id="ddd">aaa</li><li>aa</li><li>dd</li><li>dd</li><li>dd</li></ul></li><li>das</li><li>dadf</li><li>dsaf</li><li>sdafu <ul><li>adfsaf</li><li>sdaf</li><li>sdaf</li><li>asdf</li><li>sfa</li></ul> </li><li>aa</li></ul>
<script type="text/javascript">
<!--
(function() {var ulList = document.getElementById("abc");var ulListChild = ulList.childNodes;for (var i=0; i<ulListChild.length; i+=1) {ulListChild[i].onmouseover = function() {this.style.border = "1px solid #ccc;";}}
})();
//-->
</script>
当然这段代码的效果并不好，我只是想说明的是，childNodes是获取到的是id为abc的ul下的第一级li，我们以鼠标移到li上，鼠标加上边框的时候可以看出，当我们鼠标移到li下ul下的li时，并没有加上边框。下面我们可以用另外一串代码来查看效果：
<ul id="abc"><li id="ccc"><ul><li id="ddd">aaa</li><li>aa</li><li>dd</li><li>dd</li><li>dd</li></ul></li><li>das</li><li>dadf</li><li>dsaf</li><li>sdafu <ul><li>adfsaf</li><li>sdaf</li><li>sdaf</li><li>asdf</li><li>sfa</li></ul> </li><li>aa</li></ul>
<script type="text/javascript">
<!--
(function() {var ulList = document.getElementById("abc");var ulListChild = ulList.childNodes;alert(ulListChild.length);for (var i=0; i<ulListChild.length; i+=1) {for (var j=0; j<ulListChild[i].childNodes.length; j+=1 ) {for (var k=0; k<ulListChild[i].childNodes[j].childNodes.length; k+=1) {ulListChild[i].childNodes[j].childNodes[k].onmouseover = function() {this.style.border = "1px solid #ccc;";}}}}
})();
//-->
</script>
我的写法就已经相当复杂了，因为我也是菜鸟，我也是初学者，只是想说明一个事情而以。
我们可以看到一个代码块中是ID为abc的子元素，而第二个代码块却是第一级li下面的li加上了边框。
我们在来看看他们的关系，也就是parentNode方法。请查看效果：
<ul id="abc"><li id="ccc"><ul><li id="ddd">aaa</li><li>aa</li><li>dd</li><li>dd</li><li>dd</li></ul></li><li>das</li><li>dadf</li><li>dsaf</li><li>sdafu <ul><li>adfsaf</li><li>sdaf</li><li>sdaf</li><li>asdf</li><li>sfa</li></ul> </li><li>aa</li></ul>
<script type="text/javascript">
<!--
(function() {var ulList = document.getElementById("abc");var ulListLi = document.getElementById("ccc") ;var ulListLiLi = document.getElementById("ddd") ;alert(ulListLi.parentNode === ulList);//truealert(ulListLiLi.parentNode === ulList);//falsealert(ulListLiLi.parentNode === ulListLi.childNodes[0]);//true
})();
//-->
</script>
不难看出他们之间的关系，ulListLi.childNodes[0]这里代表的是id为ccc下面的第一个元素，其实这里也可以写成firstChild，嘿嘿，以后在说这个方法。
这篇关于JS教程:childNodes与parentNode的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
