改变文本节点的值

在前端开发中，改变文本节点的值是一项非常基础的操作。它可以用来实现页面内容的动态更新、响应用户交互等功能。本文将介绍如何使用 JavaScript 和 DOM 操作来改变文本节点的值。

文本节点简介

在 HTML 中，文本节点是指元素节点的子节点中的文本内容。例如，下面的代码中的 "Hello World!" 就是一个文本节点：

<div>Hello World!</div>

在 JavaScript 中，可以使用 textContent 属性来获取和设置文本节点的值。

获取文本节点的值

要获取文本节点的值，只需使用文本节点的 textContent 属性即可。例如，如果想获取下面 HTML 代码中 div 元素的文本内容，可以使用以下 JavaScript 代码：

<div id="myDiv">Hello World!</div>

<script>
var div = document.getElementById("myDiv");
var text = div.textContent;
console.log(text); // 输出 "Hello World!"
</script>

设置文本节点的值

要设置文本节点的值，也可以使用文本节点的 textContent 属性。例如，如果需要将上例中的 div 元素的文本内容修改为 "Hello JavaScript!"，可以使用以下 JavaScript 代码：

<div id="myDiv">Hello World!</div>

<script>
var div = document.getElementById("myDiv");
div.textContent = "Hello JavaScript!";
</script>

创建文本节点

除了修改现有的文本节点，还可以使用 document.createTextNode() 方法来创建新的文本节点。例如，下面的代码将创建一个新的文本节点，其内容为 "Hello World!"：

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

然后可以将该文本节点插入到文档中的其他元素中。

总结

改变文本节点的值是一项基础的前端操作，可以用于实现页面内容的动态更新、响应用户交互等功能。在 JavaScript 中，可以使用文本节点的 textContent 属性来获取和设置文本节点的值，或者使用 document.createTextNode() 方法来创建新的文本节点。希望本文对读者在前端开发中的工作有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13235