Javascript parentNode .childnodes application solutions for multiple children
- 2020-03-30 00:54:21
- OfStack
"ParentNode"
ParentNodes are commonly used to get the parent node of an element.
Ex. :
< Div id = "parent" >
< Id = "child" b > My text< / b>
< / div>
In the above code, you see the "father" as a div container with a "child" in it, which is the bold part of the text.
Reference:
<div id="parent">
<b id="child">My text</b>
</div>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>
ParentNode doesn't have to be a parentNode. A son can be a father.
Reference:
<div id="parent">
<div id="childparent">
<b id="child">My text</b>
</div>
</div>
The code above has two "fathers" and two "children ". The first div (id "parent") is the" father "of the second div (childparent).
There is a bold element in "childparent" (id "child"), which is the "child" of the "childparent" div. So, how do I access "grandpa" (id "parent")? Is simple...
Reference:
<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>
Notice how the two parentnodes work together? "ParentNode. ParentNode ". The first parentNode is div (id "childparent"), because we want to get the outermost parent element, so we add another parentNode to div (id "parent").
Use parentNode to find more than just the nodeName of an element; for example, you can get a parentNode with a large number of elements and add a new node at the end.
Internet explorer has its own name, parentElement, and parentNode is recommended for cross-browser scripts.
Two more sentences:
If you put javascript in the header of an HTML file, an error will occur. Firefox will report the following error:
Document. GetElementById (" child ") has no properties
IE is:
The Object of Required
What's the difference between parentNode, parentElement, childNodes, children?
ParentElement gets the parent object in the object hierarchy.
ParentNode gets the parent object in the document hierarchy.
ChildNodes gets the 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 the object.
--------------------------------------------------------
--------------------------------------------------------
That is to say, parentElement and children are owned by IE and not recognized elsewhere.
So, their standard version is parentNode,childNodes.
These two functions are the same as parentElement and children, and they are standard and universal.
--------------------------------------------------------
Here is a brief explanation, note the difference 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 examples
The first way
<!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 way
<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>
Gets the parent control method in HTML
function setvalue(v,o)
{
//var obj=document.getElementById(''batchRate'');
//windows.
alert(o.parentNode.innerHTML);
alert(o.parentNode); //ParentNode also gets the parent control here
alert(o.parentElement); //ParentElement also gets the parent control here
alert(o.parentElement.parentNode); //parentElement.ParentNode also gets the parent control here
//o.parentNode.bgColor="red";
o.parentElement.parentNode.bgColor="red";
}
Example:
<html>
<head>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title> The new web page 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>