DOM之节点层级-Text类型

 一 操作方法

只要开始标签和结束标签之间有内容，就会创建一个文本节点

• appendData(text)：向节点末尾添加文本text
• deleteData(offset, count)：从位置offset开始删除count个字符
• insertData(offset, count)：在位置offset插入text
• replaceData(offset, count, text)：用text替换从位置offset到offset+count的文本
• splitText(offset)：在位置offset将文本节点拆分为两个文本节点
• substringData(offset, count)：提取从位置offset到offset+count的文本
• length属性：获取文本节点中包含的字符数量
  • 返回：等于nodeValue.length 和 data.length

二 创建文本节点：document.createTextNode()

• 使用：用来创建新文本节点
• 参数：要插节点的文本

let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
document.body.appendChild(element); 

三 规范化文本节点

• normalize()：可以合并相邻的文本节点
  • 使用：在包含两个或多 个相邻文本节点的父节点上调用
  • 在包含两个或多个相邻文本节点的父节点上调用 normalize()时，所有同胞文本节点会被合并为一个文本节点
  • 这个 文本节点的nodeValue就等于之前所有同胞节点 nodeValue 拼接在一起得到的字符串

let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
let anotherTextNode = document.createTextNode("Yippee!"); 
element.appendChild(anotherTextNode); 
document.body.appendChild(element); 
alert(element.childNodes.length); // 2 
element.normalize(); 
alert(element.childNodes.length); // 1 
alert(element.firstChild.nodeValue); // "Hello world!Yippee!" 

四 拆分文本节点

• splitText()
  • 使用：可以在指定的偏移位置拆分nodeValue，将一个文本节点拆分成两个文本节点
  • 场景：用于从文本节点中提取数据的DOM解析技术
  • 拆分：
    • 原节点包含开头到偏移位置前的文本
    • 新文本节点包含剩下的文本
  • 返回： 新的文本节点，具有与原来的文本节点相同的parentNode

let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
document.body.appendChild(element); 
let newNode = element.firstChild.splitText(5); 
alert(element.firstChild.nodeValue); // "Hello" 
alert(newNode.nodeValue); // " world!" 
alert(element.childNodes.length); // 2 
// 在这个例子中，包含"Hello world!"的文本节点被从位置 5 拆分成两个文本节点。位置 5 对应"Hello"和"world!"之间的空格，因此原始文本节点包含字符串"Hello"，而新文本节点包含文本" world!"（包含空格）。