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 <strong>text</strong>
div.firstChild.nodeValue = "Some <strong>text</strong>";
创建文本节点
可以使用document.createTextNode()方法创建文本节点。
const textNode = document.createTextNode("Hello, World!");
注意,作为同胞插入的文本节点,中间不会有空格。为了美观,需要用户自行处理。
规范化文本节点
在元素节点中,只有一个文本节点即可。使用 appendChild() 方法将文本节点插入元素节点时,会使得文本节点数量增加。
为了规范化,使用 normalize() 方法可以将相邻的文本节点合并为一个。
注意,normalize() 方法会改变 DOM 结构,因此在使用时需要谨慎。
拆分文本节点
使用 splitText() 方法,可以将原本一个的文本节点,拆分成两份。
该方法返回新的文本节点,即拆分后的后半部分。