javascript - 使用 JavaScript 从每个元素中删除隐藏类

Question

我正在尝试从使用 JavaScript 单击的元素中删除所有隐藏类。这是我用来尝试执行此操作的虚拟代码:

    <style>
    .hidden {display:none;}
    </style>
    

    <div>Value 1</div>
    <div class="hidden">Value 2</div>
    <div class="hidden">Value 3</div>
    <div class="hidden">Value 4</div>
    
    
    <button onclick="removeHidden()">Show All</button>
    
    
    <script>
    function removeHidden()
    {
        var hidden = document.getElementsByClassName("hidden");
        for(var i=0; i<hidden.length; i++)
        {
            hidden[i].classList.remove("hidden");
        }
    }
    </script>

单击该按钮时，我希望所有“隐藏”类都被删除，但奇怪的是，它从第二个 div 和第四个 div 中删除了隐藏类，但跳过了第三个。

我得到的结果是:

Value 1
Value 2
Value 4

知道为什么是因为我真的不明白吗？

我也试过这段代码，但结果相同:

var els = document.getElementsByClassName("hidden");

Array.prototype.forEach.call(els, function(el) {
    el.ClassList.remove("hidden");
});

Answer 1

问题是 getElementsByClassName()返回 "live" node list ，这是一个在您引用列表时随时更新的列表。这可确保您始终获得最新的元素引用。这是一个昂贵的构造，实际上仅在需要时用于罕见的用例。

每次您的代码引用hidden 变量时，DOM 都会重新扫描具有hidden 类的元素，并且在您开始删除该类，列表的长度将减少一个。这是因为 length 的变化，一个项目被跳过。

要在此处正确使用 getElementsByClassName()，请首先从最后一个元素中删除该类，然后向后移动到第一个元素。这可确保随着节点列表长度的缩短，您不会跳过任何节点。

<style>
    .hidden {display:none;}
</style>
    
    <div>Value 1</div>
    <div class="hidden">Value 2</div>
    <div class="hidden">Value 3</div>
    <div class="hidden">Value 4</div>
    
    
    <button onclick="removeHidden()">Show All</button>
          
    <script>
    function removeHidden()
    {
        var hidden = document.getElementsByClassName("hidden");
        for(var i = hidden.length-1; i > -1; i--)
        {
            hidden[i].classList.remove("hidden");
        }
    }
    </script>

但是，由于实时节点列表会导致性能下降，因此一般来说，不要使用它们。相反，使用静态节点列表，您可以使用更现代、更灵活的 .querySelectorAll() 获得它.此外，如果我们将 .querySelectorAll() 返回的静态节点列表转换为 Array，我们可以使用 Array API 通过 .forEach() 对其进行迭代，这消除了对索引器的需要。

<style>
    .hidden {display:none;}
</style>
    

    <div>Value 1</div>
    <div class="hidden">Value 2</div>
    <div class="hidden">Value 3</div>
    <div class="hidden">Value 4</div>        
    
    <button onclick="removeHidden()">Show All</button>
            
    <script>
    function removeHidden()
    {
        // Get all the elements that match the selector into an Array
        var hidden = Array.prototype.slice.call(document.querySelectorAll(".hidden"));
        
        // Now we can loop using the Array API
        hidden.forEach(function(item){
            item.classList.remove("hidden");
        });
    }
    </script>