什么是文本节点，它的用途？ //document.createTextNode（） [英] What Is A Text Node, Its Uses? //document.createTextNode()

问题描述

所以我一直在用原生的javascript慢慢替换很多我的普通jQuery代码，我碰巧在 document.createTextNode（）和相关的MDN文档。阅读后，我有点困惑文本节点是什么。

我知道它可以用来放置 div 的文本，但我确定有一点更多的是它，而不是用它来把元素放在元素内。 看一下，看来文本节点也可以将属性文本称为好的。

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

  var div = document.createElement（'div'）; 
 var text = document.createTextNode（'Y HALO THAR'）; 
 div.appendChild（text）; 
  

解决方案

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

元素节点的属性，它会创建适当的节点并使它们成为您设置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 在文本节点上不会导致任何元素被重新创建。

如果您只想找到没有任何元素的文档中的文本生成的HTML标记，并确切知道每段文本在DOM中的位置，只需搜索所有文本节点即可。例如，如果您正在对文档进行文本搜索，然后突出显示找到的文本，那么您可能会直接搜索文本节点。 你想显示一些没有任何安全风险的文本，如果您使用 .innerHTML ，它可能包含浏览器将解析和解释的其他标记。所以，你创建一个文本节点并设置其文本的值，浏览器不会插入任何HTML。现代浏览器也可以使用元素的 .textContent 属性而不是 .innerHTML 来解决这个问题。

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

解决方案

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.

When you set the .innerHTML property 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 innerHTML you set, then text nodes will be created to hold it.

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

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:

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 .nodeType of each child to know whether it is another element or a text node or some other type of node.

---

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

1. You want to change some text without affecting any of the elements around it. .innerHTML creates all new elements for the affected elements which kills any event handlers which might have been set on them, but setting the .nodeValue on 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 .textContent property of an element instead of .innerHTML to solve this problem too.

这篇关于什么是文本节点，它的用途？ //document.createTextNode（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！