JavaScript 整个 class 元素的高效样式更改

Question

在一个非常常见的场景示例中，我们需要更改整个 class 元素的样式，我们有一个（简化和通用的）代码，如下所示：

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++)
    if (elements[i].className == 'HideMe')
        elements[i].style.visibility = 'hidden';

它从文档中获取所有 div 元素，遍历它们，并将具有 class "HideMe" 的元素的可见性更改为 "hidden"。另一方面，这段代码：

document.innerHTML.replace(/class="HideMe"/mg, 'class="HideMe" style="visibility: hidden"');

会将隐身样式插入具有 class "HideMe" 的所有内容。我是 JavaScript 的新手，请不要误会我的意思，但我目前看到的每个示例、每个教程都在教授第一种方法。单行代码、单个函数调用、由更聪明的人创建的替换算法，难道不应该比使用 if 语句的任何类型的循环更快、占用资源更少吗？这个问题其实比较笼统，why not do:

document.innerHTML.replace('id="foo"', 'id="bar"');

而不是：

document.getElementById('foo').id = 'bar';

检查的代码完全相同，但为了性能，我可能需要让它改变数千个元素的样式，以便我可以衡量任何显着差异。有什么充分的、经过充分论证的理由可以说明我们应该偏爱一种方法而不是另一种方法吗？

Answer 1

正则表达式解决方案非常糟糕，永远不应该使用（除非在非常特殊的情况下）。主要原因是您不想替换 body 的 innerHTML。在这种情况下发生的是 entire DOM 树必须重建和重新渲染，不仅导致 UX 滞后和潜在的性能问题，而且更重要的是 - [= 的丢失24=]所有个绑定的事件处理程序。

另一方面，正确使用 DOM 操作方法应该会给你最好的性能和更清晰易读的代码。

但是，您提到的第一种方法也不是很好：您应该避免将 CSS 样式更改为 Javascript。理想的方法是向元素添加一个修饰符 class，例如：

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++)
    if (elements[i].className == 'HideMe')
        elements[i].className += ' HideMe-hidden';
        // or elements[i].classList.add('HideMe-hidden');

在 CSS 你会

.HideMe-hidden {
    visibility: hidden;
}

这是最灵活和最优的解决方案。

JavaScript 整个 class 元素的高效样式更改

JavaScript efficient style change on the entire class of elements

html

javascript

css

element