提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript中parentNode,childNodes,children的应用详解

JavaScript应用 详解 children childNodes
2023-06-13 09:15:14 时间

"parentNode"

常用来获取某个元素的父节点.把parentNodes理解为容器,在容器中有个子节点    

例:
<divid="parent">
<bid="child">Mytext</b>
</div>

在上面的代码中,你看到把"爹"作为一个div容器,该容器中有个"孩子",就是粗体的文字部分.如果你打算用getElementById()方法获取粗体元素并且想知道它"爹"是谁,返回的信息将是一个div.演示下面的脚本,你就知道是怎么回事啦...

引用:

复制代码代码如下:

<divid="parent">
<bid="child">Mytext</b>
</div>

<scripttype="text/javascript">
<!--

alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>


用parentNode不一定只找到一个"爹","儿子"也可以成为"爹",如下面的例子...

引用:

复制代码代码如下:

<divid="parent">
        <divid="childparent">
          <bid="child">Mytext</b>
        </div>
</div>

上面这段代码中有两个"爹"和两个"孩子".头一个div(id"parent")是第二个div(childparent)的"爹".          
在"childparent"中有个粗体元素(id"child"),是"childparent"div的"孩子".那么,如何访问到"爷爷"(id"parent")?很简单....

引用:

复制代码代码如下:
<divid="parent">
         <divid="childparent">
            <bid="child">Mytext</b>
         </div>
</div>

<scripttype="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")hasnoproperties

而IE则是:

ObjectRequired

原因是所有的支持javascript的浏览器在完全解析DOM之前运行javascript.在实际在Web编程中,可能会将大多数javascript放在head标签中.为了能够正常运行,需要在函数中包裹alert,在文档加载后调用函数.例如在Body标签中加入.

parentNode、parentElement，childNodes、children它们有什么区别呢？
parentElement获取对象层次中的父对象。
parentNode获取文档层次中的父对象。
childNodes获取作为指定对象直接后代的HTML元素和TextNode对象的集合。
children获取作为对象直接后代的DHTML对象的集合。


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

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

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

也就是说parentElement、children是IE自家的东西，别的地方是不认的。
那么，他们的标准版就是parentNode,childNodes。
这两个的作用和parentElement、children是一样的，并且是标准的、通用的。

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

以下是简单的解释,注意个别字的差异:
parentNodeProperty:Retrievestheparentobjectinthedocumenthierarchy.

parentElementProperty:Retrievestheparentobjectintheobjecthierarchy.

childNodes:
RetrievesacollectionofHTMLElementsandTextNodeobjectsthataredirectdescendantsofthespecifiedobject.

children:
RetrievesacollectionofDHTMLObjectsthataredirectdescendantsoftheobject.


parentElementparentNode.parentNode.childNodes用法例子

第一种方法

复制代码代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<METANAME="Generator"C>
<METANAME="Author"C>
<METANAME="Keywords"C>
<METANAME="Description"C>
<SCRIPTLANGUAGE="JavaScript">
<!--
varrow=-1;
functionshowEdit(obj){
varcell2=obj.parentNode.parentNode.childNodes[1];
varrowIndex=obj.parentNode.parentNode.rowIndex;
cell2.innerHTML="<inputtype="text"value=""+cell2.innerHTML+"">";
if(row!=-1){
varoldCell2=document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML=oldCell2.childNodes[0].value;
}
row=rowIndex;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLEid="tb">
<TR>
<TD><inputtype="radio"name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><inputtype="radio"name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><inputtype="radio"name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

第二种方法
复制代码代码如下:
<tableborder=1width=100%>
<tr>
   <td><inputname=mtype=checkbox></td>
   <td>1111</td>
   <td><inputname=aaavalue="222"disabled></td>
   <td><inputname=bbbvalue="333"disabled></td>
</tr>
<tr>
   <td><inputname=mtype=checkbox></td>
   <td>1111</td>
   <td><inputname=aaavalue="222"disabled></td>
   <td><inputname=bbbvalue="333"disabled></td>
</tr>
<tr>
   <td><inputname=mtype=checkbox></td>
   <td>1111</td>
   <td><inputname=aaavalue="222"disabled></td>
   <td><inputname=bbbvalue="333"disabled></td>
</tr>
</table>
<SCRIPTLANGUAGE="JavaScript">
functionmm(e)
{
varcurrentTr=e.parentElement.parentElement;
varinputObjs=currentTr.getElementsByTagName("input");
for(vari=0;i<inputObjs.length;i++)
{
  if(inputObjs[i]==e)continue;
   inputObjs[i].disabled=!e.checked;
}
}
</SCRIPT>

获取HTML中的父控件方法
复制代码代码如下:
functionsetvalue(v,o)
   {
       //varobj=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>
<metahttp-equiv="Content-Language"c>
<metahttp-equiv="Content-Type"c>
<title>新建网页1</title>
</head>
<script>
   functionsetvalue(v,o)
   {
       //varobj=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>
<tableborder="1"width="100%"id="table1">
<tr>
<tdwidth="250"><a>dfsdfdsfdsa</a></td>
<td>　</td>
<td>　</td>
</tr>

相关文章