JSchildNodes与parentNode.doc

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