JavaScript学习 -- 文本节点

简介: 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()方法 - 将新的文本节点添加到已有文本节点后面
目录
相关文章
|
10天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
38 4
js学习--制作猜数字
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
20 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
19 2
|
2月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
37 1
|
2月前
|
JavaScript
js学习--抽奖
js学习--抽奖
17 1
|
2月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
31 1
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
39 0