当前位置: 首页 > 面试题库 >

nodeValue vs innerHTML和textContent。如何选择?

唐彬炳
2023-03-14
问题内容

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


问题答案:

摘要

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

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



 类似资料:
  • 问题内容: 我有一个由Javascript填充的下拉列表。 在决定应该在加载时显示的默认值时,我意识到以下属性显示的值完全相同: 我自己的研究显示基准测试或其中一些(但不是全部)之间的比较。 我可以使用自己的常识并选择1或其他,因为它们提供相同的结果,但是,我担心如果数据发生更改,这将不是一个好主意。 我的发现是: 将按原样显示该值,并忽略可能包含的任何HTML格式 将显示值并应用任何HTML格式

  • 设置regionserver和zookeeper仲裁的好做法是什么? 我有一个16个节点的小型hadoop集群。按照http://hbase.apache.org/book/example_config.html中给出的示例,我选择16个节点作为regionserver,并选择这些节点的一个子集作为Zookeeper。 但当一个作业由不在与HBase.zookeeper.quorum对应的列表中的

  • 本文向大家介绍精灵图和base64如何选择?相关面试题,主要包含被问及精灵图和base64如何选择?时的应答技巧和注意事项,需要的朋友参考一下 css精灵,用于一些小的图标不是特别多,一个的体积也稍大,比如大于10K (这个没有严 格的界定)。 base64,用于小图标体积较小(相对于css精灵),多少都无所谓。字体图标,用于一些别 人做好的图标库(也有少数自己去做的)用起来比较方便,他的图标只能

  • 我正在用量角器编写一些e2e测试。我的应用程序是Angular材料2应用程序。在我的测试中,我想按值选择md-select的一个选项。当我检查打开的md-select时,我看到了md-选项项。选项的值在一个属性ng-反映-值中。 假设我有一个值为“optionA”的选项。如何通过该值选择某个选项? 我试过这个: 在里面,我看到了选项的正确数目,但是我如何选择值为“of options”的选项呢?

  • 本文向大家介绍精灵图和base64如何选择呢?相关面试题,主要包含被问及精灵图和base64如何选择呢?时的应答技巧和注意事项,需要的朋友参考一下 精灵图 优点 将多个图像加载请求合并为一个请求 弊端 难以维护和更新 增加内存消耗 base64 优点 将多个图像加载请求合并为一个CSS文件请求 轻松更新生成文件 弊端 base64编码比原始二进制表示大约大25% IE6或IE7不支持

  • 问题内容: 我正在尝试编写一个项目。在我的项目中,我可以成功拖动图像。 这是图片,这是我的ViewOnTouchListener代码: 请看图片 ,这是我的DragView代码: 一切都好。但是我需要做的是,当用户单击图像(贴纸)时,阴影和边框消失。当用户再次单击图像时,它们会再次出现。我不知道该怎么办。 问题答案: 最后,我找到了正确的答案。我认为这可能会有所帮助。所以我分享。首先,我在Drag