Question

所以我一直在用原生的javascript慢慢替换我的许多常规jQuery代码，我遇到了document.createTextNode()和related MDN documentation。阅读后，我有点困惑文本节点是什么。

我知道它可以用来将文本放在div中，但我确信它不仅仅是“用它来将元素放在元素中”。 Looking at this,看来文本节点也可以引用属性文本。

任何人都可以提供更多关于文本节点是什么以及它用于什么的定义？除了这样的基本内容之外，还有其他实际用途吗？

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

Answer 1

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

当您设置元素节点的.innerHTML属性时，它会创建相应的节点，并使它们成为您设置innerHTML属性的元素的子节点。如果您设置的innerHTML中有文本，则会创建文本节点以保存它。

DOCUMENT_NODE，ELEMENT_NODE和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属性。但是，为了给您一个想法，以下是您可能希望直接处理文本节点的几个原因：

您想要更改某些文本而不影响其周围的任何元素。 .innerHTML为受影响的元素创建所有新元素，这些元素会杀死可能已在其上设置的任何事件处理程序，但在文本节点上设置.nodeValue不会导致重新创建任何元素。
如果您只想找到文档中的文本而没有任何生成的HTML标记，并且确切地知道每个文本在DOM hieararchy中的位置，您只需搜索所有文本节点。例如，如果您正在对文档进行文本搜索，然后突出显示找到的文本，则可能会直接搜索文本节点。
您希望显示一些没有任何安全风险的文本，如果您使用.innerHTML，它可能包含浏览器将解析和解释的其他标记。因此，您创建一个文本节点并设置其文本的值，浏览器不会插入其中的任何HTML。现代浏览器也可以使用元素的.textContent属性而不是.innerHTML来解决此问题。

Answer 2

innerText获取并将内容设置为纯文本，进行编码和解码。当innerHTML以HTML格式获取并设置内容时。

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

什么是文本节点，它的用途？ //document.createTextNode（）

2 个答案: