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

【问题标题】：What Is A Text Node, Its Uses? //document.createTextNode()什么是文本节点，它的用途？ //document.createTextNode()
【发布时间】：2013-06-16 06:15:35
【问题描述】：

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

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

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

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

【问题讨论】：

大部分情况下，在 innerHTML 可靠运行之前，我们就是这样构建动态 HTML 的。
我只想指出，虽然使用 document.createElement、appendChild 和 createTextNode 等大型树循环可能感觉更“原生”，但在宏级别执行此操作时，innerHTML实际上可以更快（但在某些情况下存在安全风险，正如 Xotic 所说）。逻辑是调用 innerHTML 一次将信息直接传递给专门的 C++ 解析器，而手动创建/追加是在 Javascript 引擎中进行手动工作；它们很快，但仍不如浏览器的代码那么快。
@Katana 关于不同方法的性能，请参阅jsperf
见Security considerations of innerHTML，createTextNode 没有这个问题。
@Katana314 - 实际上也存在使用 createDocumentFragment 和 cloneNode 比 innerHTML 快得多的情况，如果您要创建数千个具有相同结构的节点（例如制作 DOM 数字行或其他东西）更快地创建一个documentFragment，将一百个左右的元素附加到它并克隆该documentFragment 很多次。 DocumentFragments 和 cloneNode 性能非常好。

标签： javascript html textnode

【解决方案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 不会导致重新创建任何元素。
李> 1234563例如，如果您正在对文档进行文本搜索，然后突出显示找到的文本，您可能会直接搜索文本节点。
您希望显示一些没有任何安全风险的文本，如果您使用.innerHTML，它可能包含浏览器会解析和解释的其他标记。因此，您创建一个文本节点并设置其文本的值，浏览器不会在其中插入任何 HTML。现代浏览器也可以使用元素的.textContent 属性代替.innerHTML 来解决这个问题。

【讨论】：

在现代浏览器上值得一提的是textContent，“建议您在插入纯文本时不要使用innerHTML；而是使用element.textContent。这不会将传递的内容解释为HTML，而是将其作为原始文本插入。”
"页面中所有可查看的文本都在文本节点中。"不，它也可能来自 ::before 或 ::after CSS 规则中的 content 属性。
“页面中的所有可见文本都在文本节点中”不，也可以来自 <submit> 或 <input type='submit' alt= 图像文本的“值”属性。 title= 也可以通过鼠标悬停查看

【解决方案2】：

innerText 获取并设置内容为纯文本，编码和解码。当innerHTML获取并设置HTML格式的内容。

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

【讨论】：