A detailed application of Parentnode,childnodes,children in JavaScript

  This article is an introduction to the application of Parentnode,childnodes,children in JavaScript, the need for friends can come to the reference, I hope to help you.

"ParentNode"   is commonly used to get the parent node of an element. The Parentnodes is understood as a container with a child node in the container        example:  <div id= "parent" > <b id= "Children" >my text< /b> </div>    In the above code, you see "Dad" as a div container, the container has a "child", is a bold text part. If you're going to use the getElementById () method to get a bold element and want to know who the "Daddy" is, the information returned will be a Div. show the script below and you'll see what's going on. ...    Reference:   Code: <div I d= "Parent" > <b id= "Child" >my text</b> </div>   <script type= "Text/javascript" > <!--   Alert (document.getElementById ("Child"). Parentnode.nodename); --> </script>     ParentNode not only find a "dad", "son" can also become "Dad", as the following example ...    reference:   code is as follows: ;d IV id= "parent" >          <div id= "childparent" >           &NB Sp;<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).     &NBSp      has 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 ....    references:   code as follows: <div id= "parent" >           <div id= "Childparent" >              <b id= "Child" >my text</b>         &NB Sp </div> </div>   <script type= "Text/javascript" > <!--  alert (document.getElementById (" Child "). ParentNode.parentNode.nodeName);  //--> </script>     Have you noticed 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 HTML file header, 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.    --------------------------------------------------------  parentnode and parentelement functions, ChildNodes and children functions the same. 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. The role of   is the same as parentelement and children, and is standard and universal.  --------------------------------------------------------  Below is a simple explanation to note the difference between 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 S Pecified object.   children:  retrieves a collection of DHTML Objects that are direct descendants of the object.     parentelement ParentNode.parentNode.childNodes Usage Example   The first method   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=" Desc Ription "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   code is as follows: <table border=1 width=100%> <tr>     <t D><input name=m type=checkbox ></td>     <td>1111</td>     <td> <input name=aaa value= "222" disabled></td>     <td><input name=bbb value= "333" disabled& Gt;</td> </tr> <tr>     <td><input name=m type=checkbox ></td> &nBsp   <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>& lt;/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>   Get the parent control method code in HTML 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: <html> <head> <meta http-equiv= "Content-language" c> <me Ta http-equiv= "Content-type" c> <title> new page 1</title> </head> <script>     function SetValue (v,o)     {         //var Obj=document.getelementbyid (' batchrate ' );        //windows.         alert (o.parentnode.innerhtml);           alert (o.parentnode); &nBsp         alert (o.parentelement);          //o.parentnode.bgcolor= "Red";          o.parentelement.parentnode.bgcolor= "Red";    } </script> <body> <table border= "1" width= "100%" id= "table1" > <tr> <td width= "2 "><a >dfsdfdsfdsa</a></td> <td> </td> <td> </td> </tr>