Text Node and DocumentFragment Node

This article is more JavaScript standard reference tutorial - Ruan Yifeng finishing notes

Text node

Text nodes represent the textual content of element nodes and attribute nodes. We can usually get text nodes using properties such as the parent node's firstChild, nextSiblingetc.
Text nodes can be created using document.createTextNode()methods
Browsers provide a native Textconstructor that returns a text node instance

// 空字符串
var text1 = new Text(); //""

// 非空字符串
var text2 = new Text('This is a text node');
//"This is a text node"

The empty string is also a text node

Text node properties

data

dataProperties are equivalent to nodeValueproperties, used to set or get the content of the text node

//<div id="msg">你好</div>
// 读取文本内容
document.querySelector('div').firstChild.data   //"你好"
// 等同于
document.querySelector('div').firstChild.nodeValue//"你好"

// 设置文本内容
document.querySelector('div').firstChild.data = 'Hello World';
//<div id="msg">Hello World</div>

wholeText

wholeTextReturns the current text node and adjacent text nodes as a whole. Usually the same as dataand textContentproperties
Special case:

<p id="para">A <em>B</em> C</p>
var el = document.getElementById('para');
el.firstChild.wholeText // "A "
el.firstChild.data // "A "

<em>If the node is removed , it wholeTextwill be different from the attribute

el.removeChild(para.childNodes[1]);
el.firstChild.wholeText // "A C"
el.firstChild.data // "A "

other properties

• lengthProperty returns the text length of the current text node
• nextElementSiblingReturns the same-level element node behind the current text node, or returns if it cannot be retrievednull
• previousElementSiblingThe attribute returns the element node of the same level in front of the current text node, otherwise it returnsnull

Methods of Text text nodes

It has 5 commonly used methods

• appendData(): TextAppend a string to the end of the node.
• deleteData(): Delete Textthe substring inside the node. The first parameter is the start position of the substring, and the second parameter is the length of the substring.
• insertData(): TextInsert a string at the node, the first parameter is the insertion position, and the second parameter is the inserted substring.
• replaceData(): Used to replace text, the first parameter is the replacement start position, the second parameter is the length to be replaced, and the third parameter is the newly added string.
• subStringData(): used to get the substring, the first parameter is Textthe starting position of the substring in the node, and the second parameter is the length of the substring

// HTML 代码为
// <p>Hello World</p>
var pElementText = document.querySelector('p').firstChild;

pElementText.appendData('!');
// 页面显示 Hello World!
pElementText.deleteData(7, 5);
// 页面显示 Hello W
pElementText.insertData(7, 'Hello ');
// 页面显示 Hello WHello
pElementText.replaceData(7, 5, 'World');
// 页面显示 Hello WWorld
pElementText.substringData(7, 10); 
// 页面显示不变，返回"World "

• remove()This method is used to remove the current Textnode

// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
//删除后为： <p></p>

• splitText()The method splits the text node into two and becomes two adjacent nodes

// <p id="p">foobar</p>
var p = document.getElementById('p');
var textnode = p.firstChild;

var newText = textnode.splitText(3);
newText // "bar"
textnode // "foo"

• Parent elements can normalize()combine them by methods

p.childNodes.length // 2

// 将毗邻的两个 Text 节点合并
p.normalize();
p.childNodes.length // 1

DocumentFragment node

• DocumentFragmentNodes represent document fragments and are also a complete DOMtree structure. But it has no parent node.
• We can create it using document.createDocumentFragment()methods and methodsnew DocumentFragment()
• DocumentFragmentA node can only insert its children into a document, it cannot itself.
• Inserting the document of its child nodes can be used appendChild(), insertBefore()etc., the DocumentFragmentnode is used as the parameter of the function

DocumentFragmentThe node object does not have its own properties and methods, it all inherits from Nodenodes and ParentNodenodes. So it can also use the following four properties:

• children: Returns a dynamic HTMLCollectioncollection object, including DocumentFragmentall child element nodes of the current object.
• firstElementChild: Returns DocumentFragmentthe first child element node of the current object, or returns if there is none null.
• lastElementChild: Returns DocumentFragmentthe last child element node of the current object, or returns if there is none null.
• childElementCount: Returns the DocumentFragmentnumber of all child elements of the current object.