Application details of parentNode, childNodes, and children in javascript

Application details of parentNode, childNodes, and children in javascript

This article introduces the application of parentNode, childNodes, and children in javascript. If you need it, you can refer to it for help.

"ParentNode"

 

It is often used to obtain the parent node of an element. parentNodes is understood as a container and has subnodes in the container.

 

Example:

<Div id = "parent">

<B id = "child"> My text </B>

</Div>

 

In the code above, you can see that "dad" is used as a div container, and there is a "child" in the container, which is the text section in bold. if you want to use the getElementById () method to obtain the bold element and want to know who it is, the returned information will be a div. demonstrate the following script and you will know what is going on...

 

Reference:

The Code is as follows:

<Div id = "parent">

<B id = "child"> My text </B>

</Div>

 

<Script type = "text/javascript">

<! --

 

Alert (document. getElementById ("child"). parentNode. nodeName );

// -->

</Script>

 

 

ParentNode may not find only one "dad", but also "son", as shown in the following example...

 

Reference:

The Code is as follows:

<Div id = "parent">

<Div id = "childparent">

<B id = "child"> My text </B>

</Div>

</Div>

 

The above Code contains two "dad" and two "children". The first div (id "parent") is the "dad" of the second div (childparent ".

There is a bold element (id "child") in "childparent", which is "child" in "childparent" div. So how can I access "grandpa" (id "parent ")? Very simple ....

 

Reference:

 

The Code is 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>

 

 

Have you noticed that two parentnodes are used together? "ParentNode. parentNode ". the first parentNode is div (id "childparent"). To obtain the parent element of the outermost layer, add a parentNode to div (id "parent ").

Using parentNode not only finds the nodeName of an element, but also more. For example, you can obtain the parent node containing a large number of elements and add a new node at the end.

IE has its own name "parentElement". We recommend that you use parentNode for cross-browser scripts.

 

Let's say two more words:

If javascript is placed in the header of an html file, an error occurs. Firefox reports the following error:

 

Document. getElementById ("child") has no properties

 

While 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 label. to run properly, you need to wrap alert in the function and call the function after loading the document. for example, add.

 

What are the differences between parentNode, parentElement, childNodes, and children?

ParentElement obtains the parent object in the object hierarchy.

ParentNode obtains the parent object in the document level.

ChildNodes obtains the set of HTML elements and TextNode objects that are directly descendant of a specified object.

Children obtains the set of DHTML objects that are directly descendant of objects.

 

 

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

 

The parentNode and parentElement functions the same, while the childNodes and children functions the same. However, parentNode and childNodes comply with W3C standards and are more common. The other two are only supported by IE. Firefox does not support the other two.

 

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

 

That is to say, parentElement and children are the items of IE, which are not recognized elsewhere.

Their Standard Edition is parentNode and childNodes.

These two functions are the same as parentElement and children, and are standard and common.

 

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

 

The following is a simple explanation. Note the differences 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 specified object.

 

Children:

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

 

 

ParentElement parentNode. parentNode. childNodes usage example

 

Method 1

The 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 = "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>

 

Method 2

The Code is 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>

 

Obtain the parent control in HTML

The Code is as follows:

Function setvalue (v, o)

{

// Var obj = document. getElementById (''batchrate '');

// Windows.

Alert (o. parentNode. innerHTML );

 

Alert (o. parentNode); // parentNode the parent control is also obtained here

 

Alert (o. parentElement); // parentElement the parent control is also obtained here

 

Alert (o. parentElement. parentNode); // parentElement. parentNode the parent control is also obtained here

 

// O. parentNode. bgColor = "red ";

 

O. parentElement. parentNode. bgColor = "red ";

}

 

 

Instance:

Copy the Code as follows:

<Html>

<Head>

<Meta http-equiv = "Content-Language" c>

<Meta http-equiv = "Content-Type" c>

<Title> Create 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" type = "codeph" text = "codeph"> <a> dfsdfdsfdsa </a type = "codeph" text = "/codeph"> </td type = "codeph" text = "/codeph">

<Td> </td>

<Td> </td>

</Tr>