Home > Developer > JavaScript
"ParentNode"
Used to get the parent node of an element. Parentnodes is understood 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 the "Father" as a div container, the container has a "child", is the bold text part. If you are going to use the getElementById () method to get the bold element and want to know who it "Dad" is, the information returned will be a Div. show the script below and you'll know what's going on ...
Reference:
Copy CodeThe code is as follows:<script type= "Text/javascript" >
<!--
Alert (document.getElementById ("Child"). Parentnode.nodename);
-
</script>
With ParentNode not only to find a "father", "son" can also become "dad", such as the following example ...
Reference:
Copy CodeThe code is as follows:
There are two "daddies" and two "children" in this code. The first Div (id "parent") is the "father" of the second Div (childparent).
In "Childparent" there is a bold element (id "child"), which is "children" of the "childparent" div. So, how do I access to "Grandpa" (id "parent")? Very simple....
Reference:
Copy CodeThe code is as follows:<script type= "Text/javascript" >
<!--
Alert (document.getElementById ("Child"). ParentNode.parentNode.nodeName);
-
</script>
Have you noticed that two parentnode are in the same business? "Parentnode.parentnode". The first parentnode is a div (id "childparent"), because we want to get the outermost parent element, so add another parentnode to the Div (id "parent").
Using ParentNode not only finds the nodeName of an element, but also more. For example, you can get a 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 it is recommended to use ParentNode for cross-browser scripting.
Two more wordy words:
If you put JavaScript in the HTML file header, an error occurs. Firefox will have the following error:
document.getElementById ("child") have 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 properly, you need to wrap the 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 difference do they have?
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 as direct descendants of the object.
--------------------------------------------------------
Like the parentnode and parentelement functions, childnodes and children function the same. But ParentNode and ChildNodes are in line with the standard, can be said to be more general. And the other two just IE support, not the standard, Firefox does not support
--------------------------------------------------------
That is to say parentelement, children is ie own thing, other place is not recognized.
Well, their Standard edition is parentnode,childnodes.
These two functions are the same as parentelement, children, and are standard and universal.
--------------------------------------------------------
<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 of
Get the parent control method in HTML
alert (O.parentnode); ParentNode Here is also the Get parent control
alert (o.parentelement); Parentelement Here is also the Get parent control
alert (O.parentelement.parentnode); Parentelement.parentnode Here is also the Get parent control
O.parentnode.bgcolor= "Red";
O.parentelement.parentnode.bgcolor= "Red";
}
Instance:
<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>
A detailed description of the application of Parentnode,childnodes,children in JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
