首页 > 开发 > JS > 正文

JS教程:childNodes与parentNode

2024-09-06 12:41:00
字体:
来源:转载
供稿:网友

如果你是高手,对于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的时候,在计算上有一些特别。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表