nodeValue vs 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快得多，那么有什么收获呢？是否得到广泛支持？还有其他问题吗？

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

还有一个关于innerText / nodeValue的Stackoverflow答案。

摘要

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

innerText根据caniuse的说法，直到fireFox 45才在firefox中不存在，但现在所有主要浏览器都支持该功能。

.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浏览器未解析type的输出，并显示了完整的内容。类型的输出text/html告诉浏览器在显示它之前先对其进行解析。

MDN innerHTML，MDN textContent，MDN nodeValue

我很熟悉并使用的两个是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）

如果选择并复制了文本，innerText大致就是您所得到的。innerText中不存在未呈现的元素。

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

这是一篇很棒的文章，详细介绍了不同之处

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

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

如果有人想知道今天最快的是什么：https : //jsperf.com/set-innertext-vs-innerhtml-vs-textcontent＆https : //jsperf.com/get-innertext-vs-innerhtml-vs-textcontent（对于第二项测试，范围的内容为纯文本，结果可能会根据其内容而有所不同）

.innerHtml就纯速度而言，这似乎是最大的赢家！

（注意：我在这里仅谈论速度，您可能希望在选择使用哪个标准之前先寻找其他条件！）

的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属性插入网页时。在这里看到这个规则。

因此，innerHTML在插入纯文本时不建议使用using ，而是使用textContent。该textContent属性将无法理解您传递的代码是HTML语法，而只是100％的文本而已。

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

My Header My Text