“This is the 25th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”
The Text type
Creating a text node
A new text node can be created with document.creantenode (), which takes a string argument representing the text content that needs to be displayed on the node. If the inserted text contains HTML code blocks, the special symbols will be escaped and displayed on TextNode exactly as they are, instead of being parsed as HTML code!
We define a text node that carries a snippet of HTML code and append it as a child of the SPAN tag. Note that at the time we defined the text node but did not add it to the DOM, the text node is outside the DOM tree and is not rendered until we insert it into the DOM
Normalized text node
Multiple text nodes under a single element in a DOM document can be confusing, because a single text node is enough to represent the desired effect. Therefore, the method normalize can merge adjacent text nodes, which is defined on the Node type
Now insert another text node, three text nodes under span, and see what happens after normalize() is called
The three text nodes under span are merged directly into one text node, and their text values are merged together without spacing
DOM documents are always parsed with the creation of a single text node, and multiple text nodes are generated by JAVASCRIPT scripts!
Split text nodes
The Text type defines a method that is the exact opposite of normalize: splitText
This method splits a text node in two at the specified offset. After splitting, the value of the original text node retains the string data from the beginning to the offset coordinate, and the offset coordinate to the end of the text value will be placed in another adjacent text node
