DOM Text 学习笔记
什么是 DOM Text？
DOM Text 是表示 HTML 或 XML 文档中文本节点的接口。它继承自 DOM CharacterData 接口，具有节点值和文本内容的特性。
如何创建 DOM Text？
可以使用 document.createTextNode() 方法来创建 DOM Text 节点。例如：
javascriptCopy Codeconst myText = document.createTextNode('这是一个 DOM Text 节点');
如何操作 DOM Text？
可以使用以下方法来操作 DOM Text 节点：
1. 获取节点值
可以使用 nodeValue 属性来获取文本节点的值。例如：
javascriptCopy Codeconsole.log(myText.nodeValue); // 输出 '这是一个 DOM Text 节点'
2. 设置节点值
可以使用 nodeValue 属性来设置文本节点的值。例如：
javascriptCopy CodemyText.nodeValue = '更新后的文本内容';
3. 获取文本长度
可以使用 length 属性来获取文本内容的长度。例如：
javascriptCopy Codeconsole.log(myText.length); // 输出 7（'更新后的文本内容' 的长度为 7）
4. 拼接文本内容
可以使用 appendData() 方法在文本节点末尾添加文本内容。例如：
javascriptCopy CodemyText.appendData('，这是添加的部分');
console.log(myText.nodeValue); // 输出 '更新后的文本内容，这是添加的部分'
5. 插入文本内容
可以使用 insertData() 方法在指定位置插入文本内容。例如：
javascriptCopy CodemyText.insertData(3, '插入的部分');
console.log(myText.nodeValue); // 输出 '更插入的部分新后的文本内容，这是添加的部分'
6. 删除文本内容
可以使用 deleteData() 方法删除指定位置的文本内容。例如：
javascriptCopy CodemyText.deleteData(0, 2);
console.log(myText.nodeValue); // 输出 '插入的部分新后的文本内容，这是添加的部分'
示例
以下是一个实例，在页面中创建一个按钮，每次点击时在文本节点中添加一个随机数：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>DOM Text 示例</title>
</head>
<body>
<div id="demo">这是一个 DOM Text 节点</div>
<button onclick="addRandomNumber()">添加随机数</button>
<script>
const myText = document.createTextNode('这是一个 DOM Text 节点');
const demo = document.getElementById('demo');
demo.appendChild(myText);
function addRandomNumber() {
const randomNumber = Math.floor(Math.random() * 100);
myText.appendData(' ' + randomNumber);
}
</script>
</body>
</html>