網頁制作POLUOLUO文章簡介：當我解釋完這兩個方法以後，可能有人會問，他們有什麼用，嘿嘿，當然有用，我們下面有一個例子來說明他們的作用。
如果你是高手，對於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);//true
alert(ulListLiLi.parentNode === ulList);//false
alert(ulListLiLi.parentNode === ulListLi.childNodes[0]);//true
})();
//-->
</script>
不難看出他們之間的關系，ulListLi.childNodes[0]這裡代表的是id為ccc下面的第一個元素，其實這裡也可以寫成firstChild，嘿嘿，以後在說這個方法。
注意：火狐在獲取childNodes的時候，在計算上有一些特別。