您当时的方位:主页 > 言语编程 > JavaScript

JS教程:childNodes与parentNode

2014-11-02  

假如你是高手,关于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的时分,在核算上有一些特别。