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

Question

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

我知道它可以用于将文本放入其中div,但我确信它不仅仅是"用它来将元素放入元素中". 看一下,看来文本节点也可以引用属性文本.

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

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 hieararchy中的位置,那么您可以只搜索所有文本节点.例如,如果您正在对文档进行文本搜索,然后突出显示找到的文本,则可能会直接搜索文本节点.

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