DOM proficient? What is the difference between node and elment?

Preface

I believe many of our students often use Node（ node ） and Element（ node ） The concept of , So what's the difference between the two , I don't know how many people can answer this question ？

today , Here I try to explain Node and Element The difference between .

preparation

At the beginning of the formal introduction Node and Element Before the difference , Let's prepare the following code first ：

<div id="parent">
    This is parent content.
    <div id="child1">This is child1.</div>
    <div id="child2">This is child2.</div>
</div>

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

getElementById What exactly is obtained ？

document.getElementById() Method should be one of the most commonly used interfaces , Then its return value is Node still Element？

Let's use the following code to verify ：

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

You can see ,document.getElementById() The result obtained is Node It's also Element.

Node、ELement and HTMLElement What does it matter ？

Why use Node、Element and HTMLElement To make type judgments ？ 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: ƒ, …}

parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
// null

For the above output results , We can use a graph to more intuitively express the relationship between them ：

Relationship at all levels

That explains why getElementById What we get is Node It's also Element, because Element Inherited from Node.

Thus, we can also draw a conclusion ：Element It must be Node, but Node Is not necessarily Element.

therefore ：Element have access to Node All the ways .

Look more directly at Node and Element

Despite the above conclusion , It's also clear Node and Element The relationship between , But that's just a theory , We also need more straightforward results to strengthen our understanding of theory .

NodeList Content ：
[0] "\n This is parent content."
[2] "\n "
[4] "\n "

Element.children All that is obtained is all that is under the parent element div, and Element.childNodes All the nodes under the parent node are obtained （ Contains text content 、 Elements ）.

Single Node Where's the limit of ？

From the example above NodeList In content , A newline \n Be treated as a separate Node, A new doubt arises ： Single Node Where are the boundaries ？

We will use HTML Remove the formatting code 、 Merge into one line , Revised as follows ：

<div id="parent">This is parent content.<div id="child1">This is child1.</div><div id="child2">This is child2.</div></div>

Output results ：

NodeList There are no line breaks in the , In the previous example NodeList The newline character in the source code is because , HTML Labels and labels 、 Generated by line breaks between content and labels .

Now you can answer a single Node Where are the boundaries of , Two aspects ：

A single HTML The label is a separate Node;
For non HTML label （ For example, the text 、 Spaces, etc. ）, From a HTML The beginning of the label , To the first one I met HTML Label until , If there is something in the middle （ Text 、 Spaces, etc. ）, Then this part is a Node.

Further

Because the above examples use block level elements , What happens if you use inline elements ？

Experiment 1 ：

<div id="parent">This is parent content.<span>This is a span.</span><div id="child1">This is child1.</div><div id="child2">This is child2.</div></div>

Experiment two ：

<body>
    <div id="parent">This is parent content\n.
        <span>This is a span.</span>
        <div id="child1">This is child1.</div><div id="child2">This is child2.</div>
    </div>
</body>

You can see , Even if span Elements , The final result is also consistent with the above single Node Boundary conclusion .

Expand

From so many examples above , We can expand and summarize ：

HTML Line breaks in can only use </br> label ,\n Will be parsed directly into a string ;
HTML In the code , Between label and text 、 Labels and line breaks between labels will be recorded truthfully , Reflected in the results obtained is \n;
HTML In the code , Labels and labels 、 Text and text 、 The space between the text and the label is not truthfully recorded ;
node.data In content \n The number of space characters following is related to the number of formatted space configuration in the actual code , In fact, it is “ The spaces will be recorded truthfully ”.

summary

The above is illustrated by several examples Node and Element The difference between , The main conclusion is ：

document.getElementById() The result obtained is Node It's also Element.
Element It must be Node, but Node Is not necessarily Element, It could be text 、 Spaces and line breaks .
NodeList The newline character in the source code is because , HTML Labels and labels 、 Generated by line breaks between content and labels .
A single HTML The label is a separate Node.
For non HTML label （ For example, the text 、 Spaces, etc. ）, From a HTML The beginning of the label , To the first one I met HTML Label until , If the middle consists of content （ Text 、 Spaces, etc. ）, Then this part is a Node.

~ The end of this paper , Thank you for reading ！

Learn interesting knowledge , Make interesting friends , Create interesting souls ！
Hello everyone , I am a 〖 The samadhi of programming 〗 The author of Hermit King , My official account is 『 The samadhi of programming 』, Welcome to your attention , I hope you can give me more advice ！