javascript - 什么是文本节点及其用途？//document.createTextNode()

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

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

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

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