如何获取元素的文本节点？

在前端开发中，我们经常需要获取 HTML 元素的文本内容。这些文本内容可能包括用户输入的表单数据、动态生成的文本或者是页面上已有的静态内容等。在获取元素的文本节点时，我们可以使用多种方式来实现。

使用 innerHTML 属性

innerHTML 属性可以获取到 HTML 元素的所有子元素和文本节点，它返回的结果是一个字符串。通过对这个字符串进行解析，就可以获取到文本节点的内容。

const element = document.querySelector('#myElement');
const text = element.innerHTML.replace(/<[^>]*>/g, '');
console.log(text);

在上面的代码中，我们首先使用 document.querySelector() 方法获取了一个元素，并将其赋值给了变量 element。接下来，我们使用 innerHTML 属性获取该元素的所有内容，并使用正则表达式将所有标签都去除，只保留文本内容。最后，我们将处理后的文本内容打印出来。

但是，使用 innerHTML 的弊端是它会替换掉原始 HTML 标记，并创建新的 DOM 节点。如果需要一次性获取多个元素的文本节点，那么这种方法会对性能产生一定的影响。

使用 textContent 属性

textContent 属性可以获取到 HTML 元素的文本内容，而不包含任何 HTML 标记。通过使用这个属性，我们可以更加方便地获取元素的文本节点。

const element = document.querySelector('#myElement');
const text = element.textContent;
console.log(text);

在上面的代码中，我们使用 document.querySelector() 方法获取了一个元素，并将其赋值给了变量 element。接下来，我们使用 textContent 属性获取该元素的文本内容，并将其赋值给了变量 text。最后，我们打印出了这个文本内容。

和 innerHTML 不同，textContent 只会获取到文本内容，并不会对 HTML 标记进行解析和替换。因此，如果我们只需要获取元素的文本节点，那么使用 textContent 是更加高效和安全的选择。

总结

获取元素的文本节点是前端开发中常见的需求。我们可以使用 innerHTML 属性或者 textContent 属性来实现这个功能。如果只需要获取文本节点，那么推荐使用 textContent 属性，因为它对性能影响较小，同时也更加安全可靠。

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