JavaScript中parentNode与childNodes详解及跨浏览器兼容方案

parentNode基础用法与层级遍历

在JavaScript DOM操作中，parentNode是一个基础且常用的属性。

它的主要作用是获取指定元素的直接父节点。可以将父节点想象成一个容器，而子节点则是容器内的内容。

例如以下HTML结构： <div id="parent"> <b id="child">My text</b> </div>

在上述代码中，id为parent的div元素充当容器，而id为child的b元素则是其子节点。如果通过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（id为childparent）的父节点。

而在childparent内部，粗体元素（id为child）是其子节点。若要访问最外层的“爷爷”节点（id为parent），只需连续使用parentNode即可实现。

引用：

<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 指向 id 为 'childparent' 的 div 元素；由于需获取最外层父级，故再次调用 parentNode 以定位至 id 为 'parent' 的 div 元素。

除了获取节点名称，parentNode还可用于获取包含大量子元素的父容器，进而进行后续操作，例如在末尾添加新节点。

需要特别指出的是，Internet Explorer拥有其私有属性parentElement。为了确保脚本的跨浏览器兼容性，强烈建议统一使用标准的parentNode。

补充说明：

document.getElementById("child") has no properties

而IE则是：

Object Required

出现上述错误的原因是，浏览器在完全解析DOM树之前执行JavaScript代码。在实际Web开发中，脚本常置于head标签内。为确保正常运行，应将DOM操作封装在函数中，并在文档加载完成后调用，例如在body标签中通过onload事件触发。

parentNode与parentElement兼容性对比

关于parentNode、parentElement、childNodes和children的区别： parentElement用于获取对象层次中的父对象。 parentNode用于获取文档层次中的父对象。 childNodes返回指定对象直接后代的HTML元素和TextNode对象的集合。 children返回指定对象直接后代的DHTML对象集合。

--------------------------------------------------------

从功能上看，parentNode与parentElement作用相同，childNodes与children作用也相同。但parentNode和childNodes符合W3C标准，具有通用性；而parentElement和children仅为IE支持，Firefox等非IE浏览器不支持。

--------------------------------------------------------

换言之，parentElement和children是IE特有的实现，其他浏览器无法识别。其对应的标准版本为parentNode和childNodes。这两者功能一致，且符合标准，适用于所有现代浏览器。

--------------------------------------------------------

以下是简单的解释，注意个别字的差异： parentNode Property: Retrieves the parent object in the document hierarchy.

parentElement Property:Retrieves the parent object in the object hierarchy.

childNodes: Retrieves a collection of HTML Elements and TextNode objects that are direct descendants of the specified object.

children: Retrieves a collection of DHTML Objects that are direct descendants of the object.

以下提供parentNode、parentElement及parentNode.parentNode.childNodes的综合用法示例。

DOM节点操作实战示例

第一种方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" C>
<META NAME="Author" C>
<META NAME="Keywords" C>
<META NAME="Description" C>
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = -1;
function showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>";
if(row != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
row = rowIndex;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE id="tb">
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

<table border=1 width=100%>
<tr>
<td><input name=m type=checkbox ></td>
<td>1111</td>
<td><input name=aaa value="222" disabled></td>
<td><input name=bbb value="333" disabled></td>
</tr>
<tr>
<td><input name=m type=checkbox ></td>
<td>1111</td>
<td><input name=aaa value="222" disabled></td>
<td><input name=bbb value="333" disabled></td>
</tr>
<tr>
<td><input name=m type=checkbox ></td>
<td>1111</td>
<td><input name=aaa value="222" disabled></td>
<td><input name=bbb value="333" disabled></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i<inputObjs.length;i++)
{
if(inputObjs[i ]==e) continue;
inputObjs[i ].disabled=!e.checked;
}
}
</SCRIPT>

获取HTML中的父控件方法

function setvalue(v,o)
    { 
//var obj=document.getElementById(''batchRate'');
//windows.
alert(o.parentNode.innerHTML);
alert(o.parentNode); //parentNode此处也是获取父控件
alert(o.parentElement); //parentElement此处也是获取父控件
alert(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件
//o.parentNode.bgColor="red";
 o.parentElement.parentNode.bgColor="red";
 }

实例：

<html>
<head>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title>新建网页 1</title>
</head>
<script>
function setvalue(v,o)
    { 
//var obj=document.getElementById(''batchRate'');
//windows.
alert(o.parentNode.innerHTML);
alert(o.parentNode);
alert(o.parentElement);
//o.parentNode.bgColor="red";
 o.parentElement.parentNode.bgColor="red";
 }
</script>
<body>
<table border="1" width="100%" id="table1">
<tr>
<td width="250"><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>