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


HUX布斯
浏览 518回答 3
3回答

青春有我

MDN上的textContent / innerText / innerHTML之间的差异。还有一个关于innerText / nodeValue的Stackoverflow答案。摘要innerHTML将内容解析为HTML,因此需要更长的时间。nodeValue使用纯文本,不解析HTML,并且速度更快。textContent使用纯文本,不解析HTML,并且速度更快。innerText考虑样式。例如,它不会得到隐藏的文本。innerText根据caniuse的说法,直到FireFox 45才在firefox中不存在,但现在所有主要浏览器都支持。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript