Shulou(Shulou.com)06/01 Report--

This article mainly introduces what are the differences between Node and Element in js, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

Preparatory work

Before officially introducing the differences between Node and Element, let's prepare the following code:

This is parent content. This is child1. This is child2.

Most of the following phenomena and conclusions will be illustrated with the help of the structure of this code.

What exactly did getElementById get?

The document.getElementById () method should be one of the most commonly used interfaces, so is its return value Node or Element?

Let's verify it with the following code:

Let parentEle = document.getElementById ('parent'); parentEle instanceof Node// trueparentEle instanceof Element// trueparentEle instanceof HTMLElement// true

You can see that the result obtained by document.getElementById () is both Node and Element.

What is the relationship between Node, ELement and HTMLElement?

Why do you use Node, Element, and HTMLElement for type determination in the above code? What is the relationship between them?

Look at the code:

Let parentEle = document.getElementById ('parent'); parentEle.__proto__// HTMLDivElement {… } parentEle.__proto__.__proto__// HTMLElement {... } parentEle.__proto__.__proto__.__proto__// Element {... } parentEle.__proto__.__proto__.__proto__.__proto__// Node {... } parentEle.__proto__.__proto__.__proto__.__proto__.__proto__// EventTarget {... } parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__// {constructor: please, … } parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__// null

For the above output, we can use a diagram to more visually represent the relationship between them:

This explains why getElementById gets both Node and Element, because Element inherits from Node.

It can also be concluded that Element must be Node, but Node is not necessarily Element.

So: Element can use all the methods of Node.

Look at Node and Element more bluntly

Although we have come to the above conclusion and have a clear understanding of the relationship between Node and Element, that is just a theory, and we need more straightforward results to strengthen our understanding of the theory.

NodeList content:

[0] "\ n This is parent content."

[2] "\ n"

[4] "\ n"

Element.children only gets all the div under the parent element point, while Element.childNodes gets all the nodes under the parent node (including text content, elements).

What are the boundaries of a single Node?

From the NodeList content of the above example, the newline character\ nis treated as a separate Node, which creates a new question: where is the limit of a single Node?

We remove the formatting and merge the HTML code into one line, and modify it as follows:

This is parent content.This is child1.This is child2.

Output result:

There is no newline character in NodeList. The newline character in NodeList in the previous example is caused by the line break between the HTML tag and the tag, the content and the tag in the original code.

Now you can answer where the boundaries of a single Node are, in two ways:

A single HTML tag is a separate Node

For non-HTML tags (such as text, spaces, etc.), from a HTML tag to the first HTML tag encountered, if there is content (text, spaces, etc.), then this part of the content is a Node. Note: there is no distinction between the beginning and the end of the HTML tag.

For example, 1 2 3 4 5 6 7 8 9, for this code:

Div is a Node

Span is a Node

"1 2 3", "4 5 6" and "7 8 9" are all separate Node

Go one step further

Because the above examples use block-level elements, what if you use inline elements?

Test 1:

This is parent content.This is a span.This is child1.This is child2.

Test 2:

This is parent content\ n. This is a span. This is child1.This is child2.

As you can see, even if the span element is used, the final result is consistent with the single Node boundary conclusion drawn above.

Expansion

From so many examples above, we can expand and summarize:

Line breaks in HTML can only use tags and\ nwill be parsed directly into strings.

In HTML code, line breaks between tags and text, between tags and tags are truthfully recorded, which is reflected in the result obtained.

In HTML code, the spaces between tags and tags, between text and text, between text and tags are truthfully recorded.

The number of space characters that follow\ nin the node.data content is related to the number of formatted spaces in the actual code, that is, "spaces will be truthfully recorded".

Thank you for reading this article carefully. I hope the article "what is the difference between Node and Element in js" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.