foreword
I believe that many of our students often use the concepts of Node (node) and Element (node), so what is the difference between the two, I don’t know how many people can answer this question?
Today, I'm here to try to explain the difference between Node and Element.
Ready to work
Before formally introducing the difference between Node and Element, let's prepare the following code:
<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 demonstrated with the help of the structure of this code.
What exactly does getElementById get?
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
// true
parentEle instanceof Element
// true
parentEle instanceof HTMLElement
// trueIt can be seen that the result obtained by document.getElementById() is both Node and Element.
What is the relationship between Node, ELement and HTMLElement?
Why use Node, Element and HTMLElement for type judgment 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: ƒ, …}
parentEle.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
// nullFor the above output results, we can use a graph to more intuitively represent the relationship between them:
This also explains why getElementById gets both Node and Element, because Element inherits from Node .
Thus, a conclusion can also be drawn: Element must be Node, but Node is not necessarily Element .
So: Element can use all methods of Node .
A more straightforward look at Node and Element
Although the above conclusion is drawn and the relationship between Node and Element is clear, it is only 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 divs under the parent element, while Element.childNodes gets all the nodes (including text content and elements) under the parent node.
Where are the boundaries of a single Node?
From the NodeList content of the above example, the newline character \n is regarded as a single Node, which leads to a new question: where is the limit generated by a single Node?
We will remove the formatting and merge the HTML code used into one line, and modify it 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 result:
There is no line break in NodeList. Originally, the line break in NodeList in the previous example was caused by line break between HTML tags and tags, content and tags in the original .
Now you can answer where the boundaries of a single Node are, in two ways:
- A single HTML tag is a single Node;
- For non-HTML tags (such as text, spaces, etc.), from the start tag of an HTML tag to the first HTML tag encountered, if there is content (text, spaces, etc.) in the middle, then this part of the content is considered a Node.
one step further
Since the above examples are all block-level elements, what if we use inline elements?
Test one:
<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>
Test 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>
As you can see, even with the span element, the final result is consistent with the single Node bounds conclusion drawn above.
expand
From the above examples, we can expand and summarize:
- Line breaks in HTML can only use
</br>tags, and\nwill be directly parsed into strings; - In the HTML code, the line breaks between tags and text, and between tags and tags will be recorded faithfully, which is reflected in the obtained result as
\n; - In HTML code, tags and tags, text and text, and spaces between text and tags are not faithfully recorded;
- The number of space characters after
node.datain the content of\nis related to the number of formatting spaces in the actual code, which means "spaces will be recorded truthfully".
Summarize
The above has explained the difference between Node and Element through a few examples. The main conclusions are summarized as follows:
- The result obtained by
document.getElementById()is both Node and Element. - Element must be Node, but Node is not necessarily Element, it may be text, spaces, and newlines.
- The line breaks in NodeList are caused by line breaks between HTML tags and tags, content and tags in the original code.
- A single HTML tag counts as a single Node.
- For non-HTML tags (such as text, spaces, etc.), from the start tag of an HTML tag to the first HTML tag encountered, if there is content (text, spaces, etc.) in the middle, then this part of the content is considered a Node.
~
~ This article is over, thanks for reading!
~
Learn interesting knowledge, meet interesting friends, and shape interesting souls!
Hello everyone, I'm Hermit King , the author of 〖 Programming Samadhi 〗, my public account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。