JS教程:childNodes与parentNode

天使刘昊

天使刘昊

2016-02-20 01:13

下面是个简单易学的JS教程:childNodes与parentNode教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

如果你是高手,对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。

childNodes:表示对象的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性;

parentNode:表示对象的父级节点。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

当我解释完这两个方法以后,可能有人会问,他们有什么用,嘿嘿,当然有用,我们下面有一个例子来说明他们的作用。

如果我们有一个ul列表,大家都知道ul中只能放li标签,但是li标签中我们还可以放入ul,那么这个ul中必然就有li,但是我现在有一个要求就是我想为第一个ul下面的第一级li鼠标移上去的时候加一个样式,这样一个需求我们应该怎么做呢?请看效果及代码:

   ul id="abc"      li id="ccc"ul         li id="ddd"aaa/li         liaa/li         lidd/li         lidd/li         lidd/li      /ul/li      lidas/li      lidadf/li      lidsaf/li      lisdafu ul         liadfsaf/li         lisdaf/li         lisdaf/li         liasdf/li         lisfa/li      /ul /li      liaa/li   /ulscript  type="text/javascript"!--(function() {   var ulList = document.getElementById("abc");   var ulListChild = ulList.childNodes;   for (var i=0; iulListChild.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         liaa/li         lidd/li         lidd/li         lidd/li      /ul/li      lidas/li      lidadf/li      lidsaf/li      lisdafu ul         liadfsaf/li         lisdaf/li         lisdaf/li         liasdf/li         lisfa/li      /ul /li      liaa/li   /ulscript  type="text/javascript"!--(function() {   var ulList = document.getElementById("abc");   var ulListChild = ulList.childNodes;   alert(ulListChild.length);   for (var i=0; iulListChild.length; i+=1) {      for (var j=0; julListChild[i].childNodes.length; j+=1 ) {         for (var k=0; kulListChild[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         liaa/li         lidd/li         lidd/li         lidd/li      /ul/li      lidas/li      lidadf/li      lidsaf/li      lisdafu ul         liadfsaf/li         lisdaf/li         lisdaf/li         liasdf/li         lisfa/li      /ul /li      liaa/li   /ulscript  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,嘿嘿,以后在说这个方法。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

注意:火狐在获取childNodes的时候,在计算上有一些特别。

展开更多 50%)
分享

猜你喜欢

JS教程:childNodes与parentNode

Web开发
JS教程:childNodes与parentNode

说不清的 childNodes

电脑网络
说不清的 childNodes

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JS教程:学习笔记之JS类

Web开发
JS教程:学习笔记之JS类

JS教程:详细讲解JS节点知识

Web开发
JS教程:详细讲解JS节点知识

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JS教程:匿名函数

Web开发
JS教程:匿名函数

JS教程:addDOMLoadEvent事件

Web开发
JS教程:addDOMLoadEvent事件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

将Dreamweaver CS3默认的UTF-8编码改为GB2312

将Dreamweaver CS3默认的UTF-8编码改为GB2312

关于输入表单的三种常用布局

关于输入表单的三种常用布局
下拉加载更多内容 ↓