JavaScript对整个类元素进行有效的样式更改

JavaScript efficient style change on the entire class of elements

本文关键字：有效 样式 元素 JavaScript      更新时间：2023-09-26

在一个非常常见的场景中，我们需要更改整个元素类的样式，我们有一个(简化和通用的)代码，看起来像这样:

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

检查的代码是完全相同的，但是为了性能，我可能需要让它改变数千个元素的样式，这样我就可以测量任何显著的差异。有什么好的、充分论证的理由来说明为什么我们应该偏爱其中一种方法吗?

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

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

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

相关文章：