- 1、本文档共3页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
JSchildNodes与parentNode
如果你是高手,对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。
childNodes:表示对象的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性;
parentNode:表示对象的父级节点。
当我解释完这两个方法以后,可能有人会问,他们有什么用,嘿嘿,当然有用,我们下面有一个例子来说明他们的作用。
如果我们有一个ul列表,大家都知道ul中只能放li标签,但是li标签中我们还可以放入ul,那么这个ul中必然就有li,但是我现在有一个要求就是我想为第一个ul下面的第一级li鼠标移上去的时候加一个样式,这样一个需求我们应该怎么做呢?请看效果及代码:
?? ul id=abc
????? li id=cccul
???????? li id=dddaaa/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
?? /ul
script? 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
我们可以看到一个代码块中是ID为abc的子元素,而第二个代码块却是第一级li下面的li加上了边框。
我们在来看看他们的关系,也就是parentNode方法。请查看效果:
?? ul id=abc
????? li id=cccul
???????? li id=dddaaa/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
?? /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的时候,在计算上有一些特别。
文档评论(0)