在Web开发中，JavaScript扮演着与DOM（文档对象模型）交互的重要角色，特别是当我们需要操作或遍历DOM中的文本节点时。这些操作对于动态内容的更新、数据展示、用户交互等场景至关重要。下面，我们将深入探讨如何在不使用特定框架（如React、Vue等）的纯JavaScript环境下，高效地操作和遍历DOM中的文本节点。
### 一、理解文本节点
在DOM中，文本内容被封装在文本节点（Text Nodes）中。这些节点与元素节点（Element Nodes）和属性节点（Attribute Nodes）等一起，构成了DOM树。文本节点是DOM树中的叶子节点，不包含任何子节点，仅包含文本数据。
### 二、获取文本节点
要操作文本节点，首先需要获取它们。这可以通过多种方法实现，但最直接的是使用`childNodes`或`textContent`属性，尽管后者通常用于获取或设置元素及其后代的文本内容，而不直接返回文本节点对象。
#### 使用`childNodes`
`childNodes`属性返回一个包含指定节点所有子节点的`NodeList`集合，包括元素节点、文本节点、注释节点等。由于文本节点与元素节点等混杂在一起，你可能需要使用类型检查（如`nodeType`属性，文本节点的`nodeType`为3）来筛选出文本节点。
```javascript
let element = document.getElementById('myElement');
let textNodes = [];
for (let i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeType === 3) { // 文本节点
textNodes.push(element.childNodes[i]);
}
}
```
#### 使用`querySelector`与`querySelectorAll`（间接）
虽然`querySelector`和`querySelectorAll`主要用于选择元素节点，但它们可以通过特定的CSS选择器（如`:empty`伪类或结合`::before`、`::after`伪元素）间接影响文本节点，但直接获取文本节点则不是它们的用途。
### 三、修改文本节点
一旦获取了文本节点，就可以轻松地修改它们的内容。这通过修改节点的`nodeValue`或`textContent`属性来实现（对于文本节点，这两个属性是等价的）。
```javascript
// 假设我们已经有了一个文本节点textNode
textNode.nodeValue = '新的文本内容';
// 或者
textNode.textContent = '新的文本内容';
```
### 四、遍历文本节点
遍历文本节点通常涉及对元素节点的子节点进行递归遍历，因为文本节点可能嵌套在多个元素层级中。一个实用的方法是编写一个递归函数，该函数检查每个子节点，如果是文本节点则进行处理，如果是元素节点则继续递归。
```javascript
function traverseTextNodes(node) {
if (node.nodeType === 3) { // 文本节点
console.log(node.nodeValue); // 处理文本节点
} else if (node.nodeType === 1) { // 元素节点
node.childNodes.forEach(traverseTextNodes); // 递归遍历子节点
}
}
let root = document.body; // 或任何你想遍历的根节点
traverseTextNodes(root);
```
### 五、高级技巧：使用`TreeWalker`
`TreeWalker`对象提供了一种遍历DOM树的方法，它允许你基于特定的条件（如节点类型）来遍历节点。对于需要精细控制遍历过程的场景，`TreeWalker`是一个强大的工具。
```javascript
let walker = document.createTreeWalker(
document.body, // 遍历的根节点
NodeFilter.SHOW_TEXT, // 仅显示文本节点
null, // 没有过滤器函数
false // 不进入实体引用节点
);
let currentNode;
while (currentNode = walker.nextNode()) {
console.log(currentNode.nodeValue); // 处理文本节点
}
```
### 六、实践案例：动态更新页面文本
假设你有一个包含多个段落（`
`）的页面，并且希望根据用户的某些操作（如点击按钮）来更新这些段落中的文本内容。你可以使用上述方法结合事件监听器来实现这一功能。
```html
原始文本1
原始文本2
```
### 七、总结
在JavaScript中操作和遍历DOM中的文本节点是Web开发中的常见任务。通过`childNodes`、`nodeType`、`nodeValue`、`TreeWalker`等工具，我们可以灵活地访问、修改和遍历这些节点。理解这些基础概念和方法对于构建动态、交互式的Web应用至关重要。此外，结合实践案例的学习，可以更好地掌握这些技术在实际项目中的应用。在探索JavaScript与DOM交互的过程中，不妨关注一些高质量的学习资源，如“码小课”网站上的相关教程，它们能为你提供更深入、更系统的学习体验。