Home > Web Front-end > JS Tutorial > Detailed explanation of the application of parentNode, childNodes, and children in javascript_javascript skills

Detailed explanation of the application of parentNode, childNodes, and children in javascript_javascript skills

WBOY
Release: 2016-05-16 17:08:46
Original
1322 people have browsed it

"parentNode"

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

Example:


My text

In the above code, you see that "Dad" is used as a div container, and 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 If you want to know who its "father" is, the returned information will be a div. Demonstrate the following script and you will know what is going on...

Quote:

Copy code The code is as follows:


My text



Using parentNode does not necessarily only Find a "father", "son" can also become "father", as in the following example...

Quote:

Copy code The code is as follows:


                                                                                  ;


There are two "parents" and two "children" in the above 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 "child" of the "childparent" div. So, how to access "grandpa" (id "parent")? It's very simple... .

Quote:


Copy code The code is as follows:
                                                                                    ;



Did you notice that two parentNodes are used together? "parentNode.parentNode". The first parentNode is a div (id "childparent"). Because we want to get the outermost parent element, we add another parentNode and there it is. div (id "parent").
Use parentNode to not only find the nodeName of an element, but also 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", 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 javascript before fully parsing the DOM. In actual web programming, most javascript may be placed in the head tag. In order to run properly, alert needs to be wrapped in the function , call the function after the document is loaded. For example, add it 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 a 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, and are not supported by Firefox

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

In other words, parentElement and children are IE’s own things and are not recognized by other places.
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

Copy the code The code is as follows:




New Document </ TITLE><br><META NAME="Generator" C><br><META NAME="Author" C><br><META NAME="Keywords" C><br><META NAME=" Description" C><br><SCRIPT LANGUAGE="JavaScript"><br><!--<BR>var row = -1;<BR>function showEdit(obj){<BR>var cell2 = obj .parentNode.parentNode.childNodes[1];<BR>var rowIndex = obj.parentNode.parentNode.rowIndex;<BR>cell2.innerHTML = "<input type='text' value='" cell2.innerHTML "'> ;";<BR>if(row != -1){<BR>var oldCell2 = document.getElementById("tb").rows[row].cells[1];<BR>oldCell2.innerHTML = oldCell2.childNodes [0].value;<BR>}<BR>row = rowIndex;<BR>}<BR>//--><br></SCRIPT><br></HEAD><br>< ;BODY><br><TABLE id="tb"><br><TR><br><TD><input type="radio" name="rad"></TD> <br><TD></TD><br><TD></TD><br></TR><br><TR><br><TD><input type ="radio" name="rad"></TD><br><TD></TD><br><TD></TD><br></TR><br><TR><br><TD><input type="radio" name="rad"></TD><br><TD></TD><br><TD> ;</TD><br></TR><br></TABLE><br></BODY><br></HTML><br> </div> <br><strong> The second method<br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="79486" class="copybut" id="copybut79486" onclick="doCopy('code79486')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code79486"> <br><table border=1 width=100%><br><tr><br>    <td><input name=m type=checkbox ></td><br>    <td>1111</td><br>    <td><input name=aaa value="222" disabled></td><br>    <td><input name=bbb value="333" disabled></td><br></tr><br><tr><br>    <td><input name=m type=checkbox ></td><br>    <td>1111</td><br>    <td><input name=aaa value="222" disabled></td><br>    <td><input name=bbb value="333" disabled></td><br></tr><br><tr><br>    <td><input name=m type=checkbox ></td><br>    <td>1111</td><br>    <td><input name=aaa value="222" disabled></td><br>    <td><input name=bbb value="333" disabled></td><br></tr><br></table><br><SCRIPT LANGUAGE="JavaScript"><br>function mm(e)<br>{<br>var currentTr=e.parentElement.parentElement;<br>var inputObjs=currentTr.getElementsByTagName("input");<br>for(var i=0;i<inputObjs.length;i )<br>{<br>   if(inputObjs[i ]==e) continue;<br>    inputObjs[i ].disabled=!e.checked;<br>}<br>}<br></SCRIPT><br> </div> <br>获取HTML中的父控件方法<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="61733" class="copybut" id="copybut61733" onclick="doCopy('code61733')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code61733"> <br>function setvalue(v,o)<br>    { <br>        //var obj=document.getElementById(''batchRate'');<br>        //windows.<br>        alert(o.parentNode.innerHTML); <p>        alert(o.parentNode); //parentNode此处也是获取父控件</p> <p>        alert(o.parentElement); //parentElement此处也是获取父控件</p> <p>        alert(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件</p> <p>        //o.parentNode.bgColor="red";<br><br>         o.parentElement.parentNode.bgColor="red";<br>    }<br></p> </div> <br>实例:<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="88436" class="copybut" id="copybut88436" onclick="doCopy('code88436')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code88436"> <br><html><br><head><br><meta http-equiv="Content-Language" c><br><meta http-equiv="Content-Type" c><br><title>新建网页 1

<script><br>    function setvalue(v,o)<br>    { <br>        //var obj=document.getElementById(''batchRate'');<br>        //windows.<br>        alert(o.parentNode.innerHTML); <p>        alert(o.parentNode);</p> <p>        alert(o.parentElement);</p> <p>        //o.parentNode.bgColor="red";<br><br>       o.parentElement.parentNode.bgColor="red";<br>    }<br></script>







Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
dfsdfdsfdsa