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”的元素的可见性更改为“hidden”。另一方面，这段代码：

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

经过检查的代码完全相同，但就性能而言，我可能需要更改数千个元素的样式，以便能够测量任何显著的差异。是否有任何好的、有充分理由支持的方法，我们应该优先选择其中之一呢？

- Ulrik

---

请注意，string.prototype.replace不是破坏性的，它会返回一个新的字符串...虽然我没有进行过性能测试，但我无法想象重写整个DOM比更改一些节点更有效率... - Jared Smith

代码行数并不是衡量效率的好方法。请注意，正则表达式引擎在底层使用的循环和条件语句比代码#1要多得多。 - JJJ

Answer 1

正则表达式解决方案非常糟糕，除非在非常特殊的情况下，否则不应使用。主要原因是您不希望替换body的innerHTML。在这种情况下会发生什么是整个DOM树必须重建和重新渲染，导致不仅出现用户体验延迟和潜在性能问题，更重要的是丢失了所有绑定的事件处理程序。

另一方面，正确使用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;
}

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

- dfsq

---

简单更改一个父类可能会更高效（即在body中添加reallyHide并在CSS中使用.reallyHide .HideMe {visibility: hidden;}） - Alexei Levenkov