nodeValue 与 innerHTML 和 textContent。 如何选择？

Question

我正在使用纯 js 来更改标签元素的内部文本，但我不确定应该使用 innerHTML 或 nodeValue 或 textContent 的理由。 我不需要创建新节点或更改 HTML 元素或其他任何东西 — 只需替换文本即可。 下面是代码示例：

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

我查看了 jQuery 源代码，它只使用了一次 nodeValue，但多次使用了 innerHTML 和 textContent。 然后我发现这个 jsperf 测试表明 firstChild.nodeValue 明显更快。 至少我是这么理解的。

如果 firstChild.nodeValue 快得多，有什么收获？ 它不是得到广泛支持吗？ 还有其他问题吗？

Answer 1

MDN 上 textContent/innerText/innerHTML 之间的差异。

以及关于innerText/nodeValue 的Stackoverflow 答案。

概括

1. innerHTML将内容解析为 HTML，因此需要更长的时间。
2. nodeValue使用纯文本，不解析 HTML，速度更快。
3. textContent使用直接文本，不解析 HTML，并且速度更快。
4. innerText考虑样式。 例如，它不会获得隐藏文本。

根据caniuse，在 FireFox 45 之前，firefox 中不存在innerText ，但现在所有主要浏览器都支持。

Answer 2

.textContent输出text/plain而.innerHTML输出text/html 。

快速示例：

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

输出：<a href="http://google.com">google</a>

example.innerHTML = '<a href="https://google.com">google</a>';

输出：谷歌

您可以从第一个示例中看到，类型text/plain输出没有被浏览器解析并导致显示完整内容。 text/html类型的输出告诉浏览器在显示之前解析它。

MDN innerHTML , MDN textContent ,MDN nodeValue

Answer 3

我熟悉并与之合作的两个是 innerHTML 和textContent 。

当我只想像这样更改段落或标题的文本时，我使用textContent ：

 var heading = document.getElementById('heading') var paragraph = document.getElementById('paragraph') setTimeout(function () { heading.textContent = 'My New Title!' paragraph.textContent = 'My second <em>six word</em> story.' }, 2000)

 em { font-style: italic; }

 <h1 id="heading">My Title</h1> <p id="paragraph">My six word story right here.</p>

因此， textContent只是更改文本，但它不会解析 HTML，正如我们可以从结果中纯文本中可见的标签看出的那样。

如果我们想解析 HTML，我们可以像这样使用innerHTML ：

 var heading = document.getElementById('heading') var paragraph = document.getElementById('paragraph') setTimeout(function () { heading.innerHTML = 'My <em>New</em> Title!' paragraph.innerHTML = 'My second <em>six word</em> story.' }, 2000)

 em { font-style: italic; }

 <h1 id="heading">My Title</h1> <p id="paragraph">My six word story right here.</p>

因此，第二个示例将我分配给 DOM 元素的innerHTML属性的字符串解析为 HTML。

这太棒了，而且是一个很大的安全漏洞:)

（如果您想了解安全性，请查找 XSS）

Answer 4

如果您选择文本并复制它，则innerText大致是您将获得的内容。 未呈现的元素不存在于innerText 中。

textContent是子树中所有TextNode 的值的串联。 无论是否渲染。

这是一篇很好的文章，详细说明了差异

innerHTML不应与innerText 或textContent 进行比较，因为它们完全不同，您应该真正知道原因:-) 单独查找

Answer 5

[注意：这篇文章更多的是关于分享可能对某人有帮助的特定数据，而不是告诉人们该做什么]

如果有人想知道今天最快的是什么： https : //jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent (对于第二个测试，span 的内容是纯文本，结果可能会根据其内容而变化）

看来.innerHtml是纯粹速度方面的大赢家！

（注意：我在这里只讨论速度，在选择使用哪个标准之前，您可能需要寻找其他标准！）

Answer 6

用于set或get元素的 HTML 代码的 Element.innerHTML 属性。

例如：我们有一个<h1>标签和它的强风格：

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>要get id 等于“myHeader”的元素的内容，我们将执行相同的操作：

var element = document.getElementById("myHeader");
element.innerHTML

返回结果：

<strong>My Header</strong> Normal Text`

要为此元素“设置”新内容（值），代码将在此处：

Element.innerHTML = "My Header My Text";

因此，此属性不仅适用于纯文本，而且旨在传递或复制 HTML 代码。

=> 我们不应该使用它。

但是，很多程序员（包括我自己）使用这个属性在网页中插入文本，这种方法存在潜在的风险：

1. 错误操作：插入每个文本有时会删除插入元素的所有其他 HTML 代码。
2. 为了安全：当然，上面两个例子是完全无害的，即使使用标签也没有问题，因为HTML5标准已经阻止了标签内部命令行的执行。 当通过innerHTML 属性插入网页时。 在此处查看此规则。

由于这个原因，在插入纯文本时不建议使用innerHTML ，而是使用textContent 。 textContent属性不会理解您传递的代码是 HTML 语法，而只是 100% 文本，不多也不少。

如果在上面的示例中使用textContent返回结果：

My Header My Text