如果你是高手，對于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的時候，在計算上有一些特別。