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

Question

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

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

它从文档中获取所有的 div 元素，遍历它们，并将具有类“HideMe”的元素的可见性更改为“隐藏”。另一方面，这段代码:

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

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

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

代替:

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

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

Answer 1

Regexp 解决方案非常糟糕，永远不应该使用(除非在非常特殊的情况下)。主要原因是您不想替换 body 的 innerHTML。在这种情况下发生的事情是必须重建和重新呈现整个 DOM 树，这不仅会导致 UX 滞后和潜在的性能问题，而且更重要的是 - 丢失 所有 绑定(bind)事件处理程序。

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

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

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;
}

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