JavaScript学习：DOM节点之分割文本节点——splitText方法

最新推荐文章于 2024-03-23 10:59:38 发布

原创最新推荐文章于 2024-03-23 10:59:38 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#splitText #文本节点 #提取页面数据

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了DOM操作中的splitText()方法，该方法用于将一个文本节点按指定位置分割成两个节点。通过实例演示了如何使用此方法，并解释了分割后节点的变化，是理解DOM文本节点操作的重要参考资料。

文本节点学习时觉得需要记录的点

分割文本节点

splitText()方法会将一个文本节点分成两个文本节点，即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的 parentNode 相同。来看下面的例子。

var element = document.createElement("div");
element.className = "message"; 
 
var textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
 
document.body.appendChild(element); 
 
var 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!"（包含空格）。