Detailed explanation of the application of parentNode, childNodes, and children in javascript

This article introduces the application of parentNode, childNodes, and children in javascript. Friends who need it can come and refer to it. I hope it will be helpful to everyone

"parentNode"

is often used to get the parent node of an element. Understanding parentNodes as a container, there are child nodes in the container

Example:
3b0fcde0ea4ba25d895197f4576a293b
07567a838ba66bec9f1820bfbf21ff6bMy text0d36329ec37a2cc24d42c7229b69747a
94b3e26ee717c64999d7867364b1b4a3

In the above code, you see the words "father" "As a p container, there is a "child" in the container, which is the bold text part. If you plan to use the getElementById() method to get the bold element and want to know who its "father" is, the returned information will be p. Demonstrate the following script and you will know what is going on...

Quote:

The code is as follows:

<p id="parent">
<b id="child">My text</b>
</p>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>

Use parentNode It is not necessary to find only one "father", "son" can also become "father", as in the following example...

Quote:

The code is as follows:

<p id="parent">
         <p id="childparent">
           <b id="child">My text</b>
         </p>
</p>

There are two "fathers" and two "children" in the above code. The first p (id "parent") is the "father" of the second p (childparent). ​​​​
In There is a bold element (id "child") in "childparent", which is the "child" of "childparent" p. So, how to access "grandpa" (id "parent")? It's very simple....

Quote:

The code is as follows:

<p id="parent">
          <p id="childparent">
             <b id="child">My text</b>
          </p>
</p>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>

Did you notice that two parentNodes are used together? "parentNode.parentNode". The first parentNode is p (id "childparent" ), because we want to get the outermost parent element, so we add another parentNode to p (id "parent").
Using parentNode not only finds the nodeName of an element, but also more. For example, you You can get the parent node containing a large number of elements and add a new node at the end.
IE has its own name called "parentElement", for cross-browser scripts it is recommended to use parentNode.

A few more words:
If you put javascript at the head of the html file, an error will occur. Firefox will report the following error:

document.getElementById("child") has no properties

And IE is:

Object Required

The reason is that all browsers that support javascript run before fully parsing the DOM javascript. In actual Web programming, most javascript may be placed in the head tag. In order to run normally, alert needs to be wrapped in a function and called after the document is loaded. For example, add.

to the Body tag.

What is the difference between parentNode, parentElement, childNodes, and children?
parentElement Gets the parent object in the object hierarchy.
parentNode Gets the parent object in the document hierarchy.
childNodes Gets a collection of HTML elements and TextNode objects that are direct descendants of the specified object.
children Gets the collection of DHTML objects that are direct descendants of the object.

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

ParentNode has the same function as parentElement, and childNodes has the same function as children. However, parentNode and childNodes comply with W3C standards and can be said to be relatively universal. The other two are only supported by IE, not standards. Firefox does not support them

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

That is to say, parentElement and children are IE's own things, and they are not available elsewhere. I admit it.
Then, their standard version is parentNode, childNodes.
The functions of these two are the same as parentElement and children, and they are standard and universal.

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

The following is a simple explanation, pay attention to the differences in individual words:
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.

parentElement parentNode.parentNode.childNodes usage example

The first method

The code is as follows:

<!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=&#39;text&#39; value=&#39;"+ cell2.innerHTML +"&#39;>";
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>

Two methods

The code is as follows:

<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 
current
Tr=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>

Get the parent control method in HTML

The code is as follows:

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";
    }

Example:

The code is as follows:

<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(&#39;&#39;batchRate&#39;&#39;);
        //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>

The above is the detailed content of Detailed explanation of the application of parentNode, childNodes, and children in javascript. For more information, please follow other related articles on the PHP Chinese website!