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 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. 

The parentElement attribute, which is easy to understand, is the relationship between the upper and lower levels defined in the DOM hierarchy. If element A contains element B, then element B can obtain element A through the parentElement attribute. 
The main thing here is the offsetParent attribute, which is not explained clearly in the MSDN documentation, which makes it more difficult to understand this attribute. In the past few days, I have found some information on the Internet, plus some of my own tests, I have a little understanding of this attribute, so I will summarize it here. 
To understand the offsetParent attribute, you must first understand the name "positioned element". The so-called "positioned element" refers to the element with the position attribute set to the element, and the value of the position style attribute is equal to one of absolute, relative and fixed.

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

parentNode and parentElement function the same, childNodes and children function the same. But parentNode and childNodes are in line with the W3C standard and can be said to be more general. And the other two are only supported by IE, not standard, not supported by Firefox

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

Use this parentNode, 2 childNodes. The upstairs are all positive solutions!

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

Is it just that the standards are different?

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

This is not "different standards", the 
other two are not standards at all, 
it can be understood as ie custom

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

That is to say, parentElement and children are IE's own things, which are not recognized elsewhere. 
Well, their standard version is parentNode, childNodes. 
The functions of these two are the same as parentElement and children, and they are standard and general.

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

The following is a brief explanation, note 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.

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

我也从dhtml手册里拿了两段^_^ 
parentElement children: 
There is no public standard that applies to this property/collection. 
parentNode childNodes: 
This property/collection is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 .

Many W3C standards began to support 
IE4 from IE5, and before IE4, you can only use IE's own method 

 

 code show as below:

<div id="test1">  

bbb<div>aaa</div>  

<div>aaa</div>  

</div>  

<script>  

alert(document.getElementById("test1").childNodes.length);  

alert(document.getElementById("test1").children.length);  

</script>

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325170420&siteId=291194637