js 规范化文本节点

时间：2024-01-23 20:56:55

在将一个文本节点作为另一个文本节点的同胞插入后，两个文本节点的文本之间不会包含空格。

2. 规范化文本节点

DOM 文档中的同胞文本节点可能导致困惑，因为一个文本节点足以表示一个文本字符串。同样， DOM 文档中也经常会出现两个相邻文本节点。为此，有一个方法可以合并相邻的文本节点。这个方法 叫 normalize()，是在 Node 类型中定义的(因此所有类型的节点上都有这个方法)。在包含两个或多 个相邻文本节点的父节点上调用 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!"

浏览器在解析文档时，永远不会创建同胞文本节点。同胞文本节点只会出现在 DOM 脚本生成的文 档树中。

3. 拆分文本节点

Text 类型定义了一个与 normalize()相反的方法——splitText()。这个方法可以在指定的偏移 位置拆分 nodeValue，将一个文本节点拆分成两个文本节点。拆分之后，原来的文本节点包含开头到 偏移位置前的文本，新文本节点包含剩下的文本。这个方法返回新的文本节点，具有与原来的文本节点 相同的 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!"(包含空格)。 拆分文本节点最常用于从文本节点中提取数据的 DOM 解析技术。

相关文章