Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

preface

ChildNodes and Children are a bit of a detail, but in today’s framework environment, very few people will be able to manipulate DOM nodes directly. However, if you dig deeper into frameworks, you will find that the underlying principles of the DOM are still closely related to the manipulation of the DOM, so it is important to learn the details of the DOM, and interviewers will often use these details to judge whether a person has mastered their knowledge.

1. The Node and Element

To learn about these two properties, we need to know the difference between Node and Element.

When JS manipulates DOM, we sometimes manipulate Node and sometimes Element, and the difference between the two is quite simple.

  • The Node:

In a DOM tree, all nodes are Nodes, including Element. That is, Node contains HTML Element tags, text, comments, etc. It is the base class for all DOM.

  • Element:

In a DOM tree, Element is the base class for all HTML elements, that is, it contains only HTML Element tags.

A Node contains an Element. Two collections were derived: NodeList and HTMLCollection. NodeList is a collection of nodes and HTMLCollection is a collection of elements.

2. The.childnodes understanding

Let’s take a look at the official website:

Node.childNodes returns a collection containing the children of the specified Node, which is an updated collection.

The childNodes property returns a subset of DOM nodes that belongs to the NodeList collection.

As shown below:

Conclusion:

ChildNodes returns all nodes, including HTML, Text, comments, and so on.

3. The children to understand

Also, let’s take a look at the official website:

Element.children is a read-only property that returns child elements of a Node as a dynamically updated HTMLCollection.

Childre is an HTMLCollection. It returns elements of a node. Children returns HTML elements.

As shown below:

Conclusion:

Children returns only the element node.

4. Code demonstration

4.1 childNodes

We write arbitrary HTML code and get it through JS.

The code is as follows:

< body > < div id = "box1" > < / p > < p > pig class < span > pig classroom < / span > < / b > < b > pig class < em > class < / em > < the pig! </div> </body> <script> const box1 = document.getelementById ("box1"); console.info("-----childNodes-----"); console.info(box1.childNodes); </script>Copy the code

Output result:

We find that the output is 11 nodes in length, and there are many more text nodes, which conflicts with the code we wrote. The problem is that childNodes returns all nodes, including comments, labels, newline text, and so on.

Let’s put the HTML on one line and execute it as follows:

< body > < div id = "box1" > < / p > < p > pig class < span > pig classroom < / span > < / b > < b > pig class < em > class < / em > < the pig! </div> </body>Copy the code

Output result:

At this point, the output is exactly what we want it to be, with nodes and comments.

As you can see from the code example above, if we use childNodes to fetch childNodes, the newline will also be counted, which is not what we want. To solve this problem, we can use the nodeType property to determine the type of the node. It has three values:

  • 1: element node
  • 2: attribute node
  • 3: text node

The code is as follows:

< body > < div id = "box1" > < / p > < p > pig class < span > pig classroom < / span > < / b > < b > pig class < em > class < / em > < the pig! </div> </body> <script> const box1 = document.getelementById ("box1"); console.info("-----childNodes-----"); console.info(box1.childNodes); let NodeList = box1.childNodes for (let i = 0; i < NodeList.length; I ++) {if (NodeList[I].nodeType === 1) {console.info(" element node ", NodeList[I])} else if (NodeList[I].nodeType === 2) {console.info(" attribute node ", NodeList[I])} else {console.info(" text node ", NodeList[i]) } } </script>Copy the code

Output result:

4.2 children

Let’s look at what elements we can get in the children’s way.

The code is as follows:

< body > < div id = "box1" > < / p > < p > pig class < span > pig classroom < / span > < / b > < b > pig class < em > class < / em > < the pig! </div> </body> <script> const box1 = document.getelementById ("box1"); console.info("-----children-----"); console.info(box1.children); </script>Copy the code

Output result:

The output is the HTML element node, which is the number of tag elements we have.

conclusion

The difference between the two attributes should be clear by now. They have their own advantages and disadvantages. Different attributes need to be used in different scenarios, which can be summarized as follows:

  • ChildNodes belongs to the NodeList collection and returns all childNodes, including text, labels, comments, and so on.

  • Children data HTMLCollection, which returns all HTML element nodes.

  • ChildNodes contains children.

If you think the article is not detailed enough, you can watch the video of Station B: Piggy Class