初面网初面网

Text类型

特征:

  • nodeType等于3
  • nodeName值等于"#text"
  • nodeValue值为节点中包含的文本
  • parentNode值为Element对象
  • 不支持子节点

方法:

  • appendData(text):将指定文本添加到节点末尾。
  • insertData(offset, text):在指定位置插入文本。
  • deleteData(offset, count):删除指定位置的文本。
  • replaceData(offset, count, text):用指定文本替换指定位置的文本。
  • splitText(offset):从指定位置分割文本节点,返回新的Text节点。
  • substringData(offset, count):返回指定位置开始的指定长度的文本。

包含文本内容的元素所拥有的文本节点的数量范围是0~1,即要么没有,要么最多有一个。

<!-- 没有text节点 -->
<div></div>

<!-- 有text节点 -->
<div> </div>
<div id="myDiv">Hello, World!</div>

空格也算字符,所以算作text节点。

判断有无文本节点,就只要看标签之间有没有内容即可

可以获取文本节点,修改文本节点

const textNode = document.getElementById("myDiv").firstChild;
textNode.nodeValue = "Hello, DOM!";

文本节点中的HTML或XML会被转义,即小于号、大于号或引号会被转义。如:

// 输出 Some &lt;strong&gt;text&lt;/strong&gt;
div.firstChild.nodeValue = "Some <strong>text</strong>";

创建文本节点

可以使用document.createTextNode()方法创建文本节点。

const textNode = document.createTextNode("Hello, World!");

注意,作为同胞插入的文本节点,中间不会有空格。为了美观,需要用户自行处理。

规范化文本节点

在元素节点中,只有一个文本节点即可。使用 appendChild() 方法将文本节点插入元素节点时,会使得文本节点数量增加。

为了规范化,使用 normalize() 方法可以将相邻的文本节点合并为一个。

注意,normalize() 方法会改变 DOM 结构,因此在使用时需要谨慎。

拆分文本节点

使用 splitText() 方法,可以将原本一个的文本节点,拆分成两份。

该方法返回新的文本节点,即拆分后的后半部分。

更新于 2026/7/3