Javascript 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的速度快得多，有什么问题吗？它是否得到广泛支持？还有其他问题吗？

摘要

innerHTML将内容解析为HTML，因此需要更长的时间

nodeValue使用纯文本，不解析HTML，速度更快

textContent使用纯文本，不解析HTML，速度更快

innerText将样式考虑在内。例如，它不会得到隐藏文本

---

innerText

在firefox 45之前不存在于firefox中，但现在在所有主要浏览器中都受支持。

.textContent

输出

text/plain

而

innerHTML

输出

文本/html

快速示例：

var-example=document.getElementById（'exampleId'）

example.textContent=''

输出：

example.innerHTML=''

输出：

您可以从第一个示例中看到，浏览器不会解析
text/plain
类型的输出，并显示完整内容。类型
text/html
的输出告诉浏览器在显示之前对其进行解析

，
我熟悉并使用的两个工具是innerHTML和textContent

当我只想更改段落或标题的文本时，我使用textContent，如下所示：


var heading=document.getElementById（'heading'））
var段落=document.getElementById（'段落'）
setTimeout（函数（）{
heading.textContent='我的新标题！'
paragration.textContent='我的第二个六字故事'
}，2000）
em{font-style:italic；}
我的标题
我的六个字的故事就在这里。
innerText大致上就是您选择并复制文本时得到的内容。未呈现的元素不存在于innerText中

textContent是子树中allTextNodes值的串联。无论渲染与否

下面是一个详细说明差异的示例

innerHTML不应与innerText或textContent进行比较，因为这是完全不同的，你应该知道原因：-）单独查找它。[/p>[注意：这篇文章更多的是关于共享可能帮助某人的特定数据，而不是告诉人们该做什么]

如果有人想知道今天最快的是什么：
&（对于第二个测试，跨度的内容是纯文本，结果可能会根据其内容而变化）

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

（注意：我这里只讨论速度，在选择使用哪个标准之前，您可能需要查找其他标准！）
Element.innerHTML属性设置
或
获取
元素的HTML代码

例：我们有一个
标签和强大的风格：

我的标题普通文本
要
get
元素的内容id等于“myHeader”，我们将执行相同的操作：

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

返回结果：

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

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

=>我们不应该使用它

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

错误操作：仅插入每个文本有时会删除插入元素的所有其他HTML代码
出于安全考虑：当然，上面的两个示例是完全无害的，即使使用标记仍然没有问题，因为HTML5标准阻止了标记内命令行的执行。通过innerHTML属性插入网页时。请看这条规则
因此，插入纯文本时不建议使用
innerHTML
，而应使用
textContent
。
textContent
属性不会理解您传递的代码是HTML语法，而只是100%的文本

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

My Header My Text

嗯，
nodeValue
也不解析html“使用textContent可以防止XSS攻击”，所以使用innerText我可以使用hey之类的东西，这将是粗体的？你对innerHTML的说法对我来说是如此明显，我确实不明白为什么有那么多人没有理解它。
My Header My Text