normalize、splitText

最新推荐文章于 2025-06-06 12:08:09 发布

原创最新推荐文章于 2025-06-06 12:08:09 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#normalize #splitText

JS类专栏收录该内容

202 篇文章

订阅专栏

本文详细介绍了DOM操作中的normalize方法与splitText方法。normalize方法可以将一个父元素内的多个文本节点合并为一个，而splitText方法则用于将一个文本节点分割成两个。通过具体的JavaScript代码示例，展示了如何使用这两种方法来更好地管理和操作DOM中的文本内容。

1、normalize：如果在包含两个或者多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点；
var oDiv = document.createElement("div");
    var text1 = document.createTextNode("第一个");
    oDiv.appendChild(text1);
    var text2 = document.createTextNode("第二个");
    oDiv.appendChild(text2);
    document.body.appendChild(oDiv);
console.log(oDiv.firstChild.nodeValue);  //得到：第一个；

如果调用normalize();
var oDiv = document.createElement("div");
    var text1 = document.createTextNode("第一个");
    oDiv.appendChild(text1);
    var text2 = document.createTextNode("第二个");
    oDiv.appendChild(text2);
    document.body.appendChild(oDiv);

oDiv.normalize()
console.log(oDiv.firstChild.nodeValue); //返回  第一个第二个；合并成了一个文本节点；
2、splitText()：分割文本节点；与normalize正好相反；
    var oDiv = document.createElement("div");
    var text1 = document.createTextNode("第一个和第二个文本节点");
    oDiv.appendChild(text1);
    document.body.appendChild(oDiv);
    oDiv.firstChild.splitText(5);
    console.log(oDiv.firstChild.nodeValue);//返回：“第一个和第”  从splitTextu括号中的数字5开始分割的；
    console.log(oDiv.lastChild.nodeValue); //返回：“二个文本节点”