如何高效遍历所有 DOM 元素

任务是以高效的方式遍历所有 DOM 元素。接下来用 JavaScript 来介绍一些技术。

方法1

使用 document.getElementsByTagName(‘*’) 方法选择文档中的所有 DOM 元素。
运行循环，通过索引（例如 el[i]）逐个访问它们。

示例: 以下示例实现了上述方法。

<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
      
    <p id="GFG_UP"></p> 
      
    <button onclick="gfg_Run()"> 
        Click Here 
    </button> 
      
    <p id="GFG_DOWN" style="color:green;"></p> 
      
    <script> 
        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."; 
        } 
    </script> 
</body>

输出：

如何高效遍历所有 DOM 元素

方法2

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

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

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
      
    <p id="GFG_UP"></p> 
      
    <button onclick="gfg_Run()"> 
        Click Here 
    </button> 
      
    <p id="GFG_DOWN" style="color:green;"></p> 
      
    <script> 
        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."; 
        } 
    </script> 
</body>

输出：

如何高效遍历所有 DOM 元素