“This is the 26th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The Comment type

Comments in the DOM can be expressed by Comment type, which has the following characteristics:

  • nodeType = 8
  • nodeName = ‘#comment’
  • NodeValue = ‘Contents of comments’
  • ParentNode is Document or Element
  • There will be no child nodes

The Comment and Text types inherit from the same base class (CharacterData). Therefore, all string manipulation methods of Text, except splitText(), are provided for Comment. You can read this article with me to learn more about the Document Object Model (DOM) “Text Type Text Node general operations.”

Create a comment node with document.createcomment and mount it below the span

Now, there are two child nodes under span: text and comment. The content of the annotation can be obtained through the nodeValue or data property

In everyday JS operations, comment nodes are rarely accessed. In addition, the browser does not parse comment nodes after
. Therefore, a valid comment node needs to be a descendant of an HTML element

DocumentFragment type

Of all the node types, the DocumentFragment type is the only one that does not have a corresponding representation in the tag

DOM defines this type as a “lightweight” document that can contain and manipulate nodes without the added expense of DOM

The DocumentFragment node has the following characteristics:

  • nodeType = 11
  • nodeName = ‘#document-fragment’
  • nodeValue = null
  • parentNode = null
  • The child node type can be Elem, Text, or Comment

To change the description, when we need to operate a large number of document nodes, we can define a temporary node. After all operations are implemented on this node, all the child nodes on this node are updated to the DOM. This is the concept of virtual nodes on VUE

We start by adding two child nodes to our defined Fragment instance

Insert the fragment as a child node into the SPAN tag. You can see that the two child nodes inserted on the fragment node in the previous step are directly inserted into the SPAN at one time

When we change the node directly on the DOM, the DOM is re-rendered. If there are many update operations, the experience will be seriously affected (DOM rendering failure, lag); At this time, with the help of The DocumentFragment, we completed the update operation on a virtual node, and then directly replaced the content on this node into the DOM. DOM only needs to be re-rendered once, which achieved a leap in performance!