nodeValue vs 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

Differences between textContent/innerText/innerHTML on MDN.

And a Stackoverflow answer about innerText/nodeValue.

总结

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

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

Answer 2

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

快速示例：

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

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

输出：google

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

输出：google

您可以从第一个示例中看到，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 是子树中all TextNode 值的串联。无论渲染与否。

这是great post 详细说明差异

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

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

例如：我们有一个<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 属性插入网页时。请参阅此规则here。

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

如果在上例中使用textContent，则返回结果：

My Header My Text