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

What Is A Text Node, Its Uses? //document.createTextNode()

提问by AlbertEngelB

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.

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

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.

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

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);

回答by jfriend00

All viewable HTML text in a page (except text in form elements or custom embedded objects) is in text nodes. The page consists of a number of different types of nodes (you can see a listing of the different node types here: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType), some of which can have child nodes and some of which cannot. For example, a div is an ELEMENT node which can contain child nodes. Those child nodes can be other ELEMENT nodes or they can be TEXT nodes or COMMENT nodes or other types of nodes.

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

When you set the .innerHTMLproperty of an element node, it creates the appropriate nodes and makes them child nodes of the element that you set the innerHTML property on. If there is text in the innerHTMLyou set, then text nodes will be created to hold it.

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

DOCUMENT_NODE, ELEMENT_NODEand TEXT_NODEare the most common node types and are in every page that has text.

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

In your code example:

在您的代码示例中：

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

This creates one text node and puts it into the div you created. It generates the same DOM structure as this:

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

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

In the latter case, the system creates the text node for you.

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

---

---

In plain javascript programming (jQuery tends to shield developers from nodes that aren't of type ELEMENT_NODE), you will encounter text nodes any time you walk the child nodes of an element that has text in it. You will need to check the .nodeTypeof each child to know whether it is another element or a text node or some other type of node.

在普通的 javascript 编程中（jQuery 倾向于将开发人员与非 type 的节点屏蔽开来ELEMENT_NODE），每当您遍历包含文本的元素的子节点时，您都​​会遇到文本节点。您需要检查.nodeType每个子节点的 ，以了解它是另一个元素、文本节点还是其他类型的节点。

---

---

In general, there aren't a lot of reasons to manipulate text nodes directly as you can often use the higher level .innerHTMLproperty more simply. But, to give you an idea, here are a couple reasons you might want to deal directly with text nodes:

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

1. You want to change some text without affecting any of the elements around it. .innerHTMLcreates all new elements for the affected elements which kills any event handlers which might have been set on them, but setting the .nodeValueon a text node doesn't cause any elements to get recreated.

2. If you want to find just the text in a document without any of the resulting HTML markup and know exactly where each piece of text is in the DOM hieararchy, you can just search for all the text nodes. For example, if you were doing a text search of the document and then highlighting found text, you would probably search text nodes directly.

3. You want to display some text without any security risks that it might contain other markup that the browser would parse and interpret if you used .innerHTML. So, you create a text node and set the value of its text and the browser won't interpet any HTML in it. Modern browsers can also use the .textContentproperty of an element instead of .innerHTMLto solve this problem too.

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

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

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