The application of Parentnode,childnodes,children in JavaScript _javascript skills

"ParentNode"

Used to get the parent node of an element. To understand parentnodes as a container with a child node in the container

Cases:
<div id= "Parent" >
<b id= "Child" >my text</b>
</div>

In the above code, you see "Dad" as a div container, the container has a "child", is the bold text part. If you're going to use the getElementById () method to get bold elements and want to know who the "Daddy" is, the information returned will be a Div. demo The following script, you'll know what's going on.

Reference:

Copy Code code as follows:

<div id= "Parent" >
<b id= "Child" >my text</b>
</div>

<script type= "Text/javascript" >
<!--

Alert (document.getElementById ("Child"). Parentnode.nodename);
-->
</script>

With ParentNode not only find a "dad", "son" can also become "Dad", as the following example ...

Reference:

Copy Code code as follows:

<div id= "Parent" >
<div id= "Childparent" >
<b id= "Child" >my text</b>
</div>
</div>

There are two "daddies" and two "children" in this code. The first Div (id "parent") is the "father" of the second Div (childparent).
There is a bold element (id "child") in "Childparent", which is the "kid" of the "childparent" div. So, how do you access the "Grandpa" (id "parent")? Very simple....

Reference:

Copy Code code as follows:

<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>

Did you notice that two parentnode were used? "Parentnode.parentnode". The first parentnode is the div (id "childparent"), because we want to get the outermost parent element, so another parentnode is added to the DIV (id "parent").
Using ParentNode not only finds an element's nodename, but more. For example, you can get the parent node that contains a large number of elements and add a new node at the end.
IE has its own name called "Parentelement", and ParentNode is recommended for cross browser scripting.

Two more words:
If you put JavaScript in the header of an HTML file, an error occurs. Firefox will have the following error:

document.getElementById ("child") has no properties

and IE is:

Object Required

The reason is that all JavaScript-enabled browsers run JavaScript before fully parsing the DOM. In actual Web programming, most JavaScript may be placed in the head tag. In order to function correctly, you need to wrap alert in the functions and call the function after the document is loaded. For example, add in the body tag.

ParentNode, Parentelement,childnodes, children What is the difference between them?
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 a collection of DHTML objects that are direct descendants of an object.

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

Like ParentNode and parentelement functions, childnodes and children function as well. But ParentNode and childnodes are consistent with the standard of the Global Consortium, which can be said to be more generic. While the other two are only IE support, not the standard, Firefox does not support

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

That is to say parentelement, children is ie own thing, the other place is not recognized.
Well, their standard version is parentnode,childnodes.
These two functions are the same as parentelement and children, and are standard and universal.

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

Here is a simple explanation to note 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 the specified object.

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

parentelement ParentNode.parentNode.childNodes Usage Examples

The first of these methods

Copy Code code 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= ' 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>

The second method

Copy Code code 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 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>

To get the parent control method in HTML

Copy Code code as follows:

function SetValue (v,o)
{
var Obj=document.getelementbyid (' Batchrate ');
Windows.
alert (o.parentnode.innerhtml);

alert (O.parentnode); ParentNode here is also to get the parent control

alert (o.parentelement); Parentelement here is also to get the parent control

alert (O.parentelement.parentnode); Parentelement.parentnode here is also to get the parent control

O.parentnode.bgcolor= "Red";

O.parentelement.parentnode.bgcolor= "Red";
}

Instance:

Copy Code code as follows:

<meta http-equiv= "Content-language" c>
<meta http-equiv= "Content-type" c>
<title> New Page 1</title>
<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= "><a" >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>