Home  >  Article  >  Web Front-end  >  The difference between parentNode, parentElement, childNodes, and children in Js_javascript skills

The difference between parentNode, parentElement, childNodes, and children in Js_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:12:351185browse

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

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

Just use 2 parentNodes and 2 childNodes. The answers above are all correct!

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

Are the standards just different?

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

This is not "different standards",
The other two are not standards at all,
can be understood as IE customization

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

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.

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

I also took two paragraphs from the dhtml manual ^_^
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 are only supported from IE5
Before IE4, you can only use IE’s own method

==================== ========================


[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]
See this here? bbb, affected the result<script> alert(document.getElementById("test1").childNodes.length); alert(document.getElementById("test1").children.length); </script>
Statement:
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