什么是文本节点？它有什么用处？

在前端开发中，文本节点（Text Node）是指一个 HTML DOM 中的文本元素。它是由浏览器解析 HTML 代码时生成的一种节点类型，表示在 HTML 中出现的纯文本内容。

创建文本节点

在 JavaScript 中，可以使用 document.createTextNode() 方法来创建一个文本节点。该方法接收一个字符串作为参数，这个字符串就是文本节点要显示的文本内容。

以下是创建文本节点的示例代码：

const text = "Hello, World!"; // 文本内容
const textNode = document.createTextNode(text); // 创建文本节点

文本节点的用处

文本节点在前端开发中有很多用处，下面列举了一些常见的应用场景：

插入文本内容

可以使用文本节点来插入纯文本内容到 HTML 页面中。例如，以下代码将向 id 为 "myDiv" 的 div 元素内插入一段文本内容：

const myDiv = document.getElementById("myDiv");
const text = "This is some text.";
const textNode = document.createTextNode(text);
myDiv.appendChild(textNode);

修改文本内容

通过修改文本节点的 nodeValue 属性，可以实现对文本内容的修改。例如，以下代码将修改 id 为 "myText" 的元素中的文本内容：

const myText = document.getElementById("myText").firstChild;
myText.nodeValue = "New text content";

在文本中添加样式

可以通过创建一个包含 CSS 样式的 span 元素，将其插入到文本节点中，实现对文本样式的设置。例如，以下代码将设置 id 为 "myText" 的元素中的文本颜色：

const myText = document.getElementById("myText");
const text = "Some text";
const span = document.createElement("span");
span.style.color = "red"; // 设置文本颜色
const textNode = document.createTextNode(text);
span.appendChild(textNode);
myText.appendChild(span);

总结

文本节点是前端开发中常见的一种节点类型，它可以用来插入、修改纯文本内容，以及在文本中添加样式等功能。使用文本节点时需要注意，要将文本节点插入到 HTML 中相应的位置才能生效。

希望这篇文章能够帮助读者更好地理解和应用文本节点，在前端开发中提高效率和优化用户体验。

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