JavaScript学习 -- 文本节点

什么是文本节点

在HTML文档中，文本节点是一种特殊的dom节点，它包含文本内容，没有任何标记或属性。

<p>这是一段文本节点</p>

在上面的代码中，<p>元素包含了文本内容"这是一段文本节点"，这段文本就是文本节点。

修改文本节点

JavaScript中提供了多种方法修改文本节点的内容，其中最常用的方法是使用textContent和innerText。

textContent返回一个元素的所有子节点的文本内容，包括隐藏的元素，而 innerText只返回可视元素的文本内容。

const myTextElement = document.querySelector('p');  // 获取元素节点
// 修改文本节点内容
myTextElement.textContent = '这是新的文本内容';

使用innerHTML属性也可以修改文本节点的内容，但应该注意的是，设置innerHTML属性可能会带来安全风险，因为它可以包含恶意代码。

myTextElement.innerHTML = '这是新的文本内容';  // 修改文本节点内容

另外，还可以通过插入文本节点方式，向现有的文本节点添加新的内容。例如：

const myTextElement = document.querySelector('p');  // 获取文本节点
const newText = document.createTextNode('新的文本内容');  // 创建一个新的文本节点
myTextElement.appendChild(newText);  // 将新的文本节点添加到已有文本节点后面

获取元素节点的文本内容

在JavaScript中获取元素节点的文本内容，我们可以使用以下代码：

const myTextElement = document.querySelector('p');  // 获取元素节点
const textContent = myTextElement.textContent;  // 获取文本内容
console.log(textContent);  // 打印输出：这是一段文本节点

文本节点的属性和方法总结

JavaScript提供了多种方法操作文本节点的属性和方法，其中最常用的是textContent和innerText。

• textContent - 获取或设置元素节点文本内容，包括所有子节点文本；会保留换行符和空格等文本格式
• innerText - 获取或设置元素节点的文本内容，但不包括所有的节点；不会保留换行符和空格等文本格式，会自动去除文本首尾的空白字符
• append()方法 - 将新的文本节点添加到已有文本节点后面