遍历所有 DOM 元素的有效方法是什么？

任务是以有效的方式迭代所有 DOM 元素。以下是在 JavaScript 的帮助下讨论的一些主要技术。

方法一：

• 使用document.getElementsByTagName('*')方法选择文档的所有 DOM 元素。
• 运行一个循环并通过索引（例如，第 i^个元素的 el[i]）一个一个地访问它们。

示例：此示例实现了上述方法。

  

    
        Efficient way to iterate
        over all DOM elements
    

  

      
     
        GeeksForGeeks 
    
      
    
      
    
        Click Here
    
      
    
      
    
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button to "
                    + "iterate over all DOM elements.";
  
        function gfg_Run() {
            var x = document.getElementsByTagName('*');
              
            for (var i = x.length; i--;) {
                x[i].style.color = "red";
            }
              
            el_down.innerHTML = "Every element has "
                        + "been traversed and color "
                        + "property has been changed.";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 使用$(“*”) 选择器选择文档的所有 DOM 元素。
• 通过在选择器上应用元素来更改元素的任何属性。

示例：此示例实现了上述方法。

  

    
        Efficient way to iterate
        over all DOM elements
    
      
    
    

  

      
     
        GeeksForGeeks 
    
      
    
      
    
        Click Here
    
      
    
      
    
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button to "
                    + "iterate over all DOM elements.";
  
        function gfg_Run() {
            $("*").css("color", "red");
            el_down.innerHTML = "Every element has "
                   + "been traversed and color "
                   + "property has been changed.";
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：