61

So I've been slowly replacing a lot of my normal jQuery code with native javascript, and I happened upon the document.createTextNode() and related MDN documentation. After reading I'm somewhat confused what a text node is.

I understand it can be used to put text inside div's, but I'm sure there's a bit more to it than just "use it to put words inside elements". Looking at this, it appears a text node can also refer to the text of attributes as well.

Can anyone provide a bit more of a definition of what a text node is and what it's used for? Are there practical uses for this other than basic stuff like this?

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

2 回答 2

80

页面中所有可查看的 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 倾向于保护开发人员免受非 type 节点的影响ELEMENT_NODE），每当您遍历包含文本的元素的子节点时，您都​​会遇到文本节点。您将需要检查.nodeType每个孩子的 ，以了解它是另一个元素还是文本节点或其他类型的节点。

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

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

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

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

于 2013-06-19T16:13:00.047 回答
0

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

var div = document.createElement('div');
div.innerText = 'Y HALO THAR';
于 2020-09-29T13:17:11.940 回答