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解决方案非常糟糕,永远不应该使用(除非在特定情况下).最主要的原因是,你不想取代innerHTML的body.在这种情况下发生的是整个 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;
}

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