如果你是高手，對(duì)于childnodes與parentnode并不陌生。其實(shí)他們就是dom的兩個(gè)特性/方法而以。

childnodes：表示對(duì)象的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性;

parentnode：表示對(duì)象的父級(jí)節(jié)點(diǎn)。

當(dāng)我解釋完這兩個(gè)方法以后，可能有人會(huì)問，他們有什么用，嘿嘿，當(dāng)然有用，我們下面有一個(gè)例子來說明他們的作用。

如果我們有一個(gè)ul列表，大家都知道ul中只能放li標(biāo)簽，但是li標(biāo)簽中我們還可以放入ul，那么這個(gè)ul中必然就有l(wèi)i，但是我現(xiàn)在有一個(gè)要求就是我想為第一個(gè)ul下面的第一級(jí)li鼠標(biāo)移上去的時(shí)候加一個(gè)樣式，這樣一個(gè)需求我們應(yīng)該怎么做呢？請(qǐng)看效果及代碼：

   <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>

當(dāng)然這段代碼的效果并不好，我只是想說明的是，childnodes是獲取到的是id為abc的ul下的第一級(jí)li，我們以鼠標(biāo)移到li上，鼠標(biāo)加上邊框的時(shí)候可以看出，當(dāng)我們鼠標(biāo)移到li下ul下的li時(shí)，并沒有加上邊框。下面我們可以用另外一串代碼來查看效果：

   <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>

我的寫法就已經(jīng)相當(dāng)復(fù)雜了，因?yàn)槲乙彩遣锁B，我也是初學(xué)者，只是想說明一個(gè)事情而以。

我們可以看到一個(gè)代碼塊中是id為abc的子元素，而第二個(gè)代碼塊卻是第一級(jí)li下面的li加上了邊框。

我們?cè)趤砜纯此麄兊年P(guān)系，也就是parentnode方法。請(qǐng)查看效果：

   <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>

不難看出他們之間的關(guān)系，ullistli.childnodes[0]這里代表的是id為ccc下面的第一個(gè)元素，其實(shí)這里也可以寫成firstchild，嘿嘿，以后在說這個(gè)方法。

注意：火狐在獲取childnodes的時(shí)候，在計(jì)算上有一些特別。