NodeValue 对 innerHTML 和 textContent。如何选择？

我使用纯 js 来修改 label 元素的内部文本，我不确定应该基于什么理由使用 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 要快得多，有什么问题吗? 它没有得到广泛支持吗? 还有其他问题吗？

90603 次浏览
小开
最佳答案

MDN 上 textContent/innerText/innerHTML 的差异。

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

摘要

  1. InnerHTML 将内容解析为 HTML，因此需要更长的时间。
  2. NodeValue 使用直接文本，不解析 HTML，速度更快。
  3. TextContent 使用直接的文本，不解析 HTML，而且速度更快。
  4. InnerText 考虑样式，例如不会得到隐藏文本。

根据 犬科动物的说法，在 FireFox 45之前，innerText并不存在于 FireFox 中，但现在所有主流浏览器都支持 innerText。

小开

.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 文本内容，< a href = “ https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue”rel = “ noReferrer”> MDN nodeValue

小开

我熟悉并且正在使用的两个是 innerHTML 和 文本内容。

我使用 文本内容时，我只是想改变一个段落或标题的文本，如下所示:

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>

因此，文本内容只是改变文本，但是它不解析 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)

小开

InnerText 大致就是您选择并复制文本后得到的结果。未呈现的元素不存在于 innerText 中。

TextContent 是子树中 所有 TextNodes 的值的串联。

下面是一个 很棒的帖子，详细介绍了这些差异

InnerHTML 不应该包含在与 innerText 或 textContent 的比较中，因为它们是完全不同的，你应该知道为什么: ——单独查找

小开

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

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

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

(注意: 我在这里只讨论速度，在选择使用哪一个之前，您可能需要查看其他标准!)

小开

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 属性插入到网页中时。看看这条规则 给你。

因此，在插入纯文本时不推荐使用 innerHTML，而应使用 textContent。textContent属性不会理解您传递的代码是 HTML 语法，而只是一个不多也不少的100% 文本。

如果在上面的示例中使用 textContent，则返回结果:

My Header My Text

提交答案