什么是文本节点，它的用途是什么？ //文档.createTextNode()

所以我一直在慢慢地用原生 javascript 替换很多普通的 jQuery 代码，并且我偶然发现了document.createTextNode() and 相关 MDN 文档。读完后我有点困惑文本节点是什么。

我知道它可以用来放入文本div的，但我确信它不仅仅是“用它来将单词放入元素中”。看着这个，看来文本节点也可以引用属性的文本。

谁能提供更多有关文本节点是什么及其用途的定义？除了像这样的基本东西之外，还有其他实际用途吗？

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

页面中所有可查看的 HTML 文本（表单元素或自定义嵌入对象中的文本除外）都位于文本节点中。该页面由许多不同类型的节点组成（您可以在此处查看不同节点类型的列表：https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType），其中一些可以有子节点，有些则不能。例如，div 是一个可以包含子节点的 ELEMENT 节点。这些子节点可以是其他 ELEMENT 节点，也可以是 TEXT 节点或 COMMENT 节点或其他类型的节点。

当您设置.innerHTML元素节点的属性，它会创建适当的节点并使它们成为您设置innerHTML属性的元素的子节点。如果里面有文字innerHTML您设置后，将创建文本节点来保存它。

DOCUMENT_NODE, ELEMENT_NODE and TEXT_NODE是最常见的节点类型，并且存在于每个包含文本的页面中。

在您的代码示例中：

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

这将创建一个文本节点并将其放入您创建的 div 中。它生成与此相同的 DOM 结构：

var div = document.createElement('div');
div.innerHTML = 'Y HALO THAR';

在后一种情况下，系统会为您创建文本节点。

在普通的 javascript 编程中（jQuery 倾向于保护开发人员免受非类型节点的影响）ELEMENT_NODE），每当您遍历其中包含文本的元素的子节点时，您都​​会遇到文本节点。您需要检查.nodeType每个子节点都知道它是否是另一个元素、文本节点或某种其他类型的节点。

一般来说，没有太多理由直接操作文本节点，因为您通常可以使用更高级别的.innerHTML财产更简单。但是，为了给您一个想法，以下是您可能想要直接处理文本节点的几个原因：

1. 您想要更改一些文本而不影响其周围的任何元素。.innerHTML为受影响的元素创建所有新元素，这会杀死可能已在其上设置的任何事件处理程序，但设置.nodeValue文本节点上的 不会导致重新创建任何元素。

2. 如果您只想查找文档中的文本而不包含任何生成的 HTML 标记，并且确切地知道每段文本在 DOM 层次结构中的位置，则只需搜索所有文本节点即可。例如，如果您要对文档进行文本搜索，然后突出显示找到的文本，您可能会直接搜索文本节点。

3. 您希望显示一些没有任何安全风险的文本，因为它可能包含浏览器在您使用时会解析和解释的其他标记.innerHTML。因此，您创建一个文本节点并设置其文本的值，浏览器将不会解释其中的任何 HTML。现代浏览器还可以使用.textContent元素的属性而不是.innerHTML也来解决这个问题。