关于javascript中的parentNode
"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ...
看个例子, 你就会明白我说的意思了 ...
<div id="parent">
<b id="child">My text</b>
</div>在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementById() 方法获取粗体元素并且想知道它"爹"是谁, 返回的信息将是一个 div. 演示下面的脚本, 你就知道是怎么回事啦 ...
<div id="parent">
<b id="child">My text</b>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById（"child").parentNode.nodeName);
//-->
</script>用 parentNode 不一定只找到一个"爹", "儿子"也可以成为"爹", 如下面的例子 ...
<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>上面这段代码中有两个"爹"和两个"孩子". 头一个 div ( id "parent") 是第二个 div (childparent) 的"爹". 在 "childparent" 中有个粗体元素(id "child"), 是 "childparent" div 的"孩子". 那么, 如何访问到"爷爷" (id "parent")? 很简单 ....
<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
注意到两个 parentNode 连用了吗? "parentNode.parentNode". 第一个 parentNode 是 div ( id "childparent"), 因为我们要得到最外层的父元素, 所以另外加了一个 parentNode 就到了 div ( id "parent").
使用 parentNode 不只找到某个元素的 nodeName, 还会更多. 例如, 你可以获取包含大量元素的父节点, 并在末尾添加一个新的节点.
IE 有它自己的名称叫做 "parentElement", 对于交叉浏览器脚本建议使用 parentNode.
再啰嗦两句:
如果将 javascript 放在 html文件头部, 会发生错误. Firefox 会有如下报错:
document.getElementById("child") has no properties
而 IE 则是:
Object Required
原因是所有的支持 javascript 的浏览器在完全解析 DOM 之前运行 javascript . 在实际在 Web 编程中,可能会将大多数 javascript 放在 head 标签中. 为了能够正常运行, 需要在函数中包裹 alert , 在文档加载后调用函数. 例如在 Body 标签中加入 onLoad="FunctionName()" .
菜鸟谈childNodes与parentNode
如果你是高手，对于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的时候，在计算上有一些特别。
