循环遍历所有不起作用的 DOM 元素答案

【问题标题】：Loop through ALL DOM elements not working循环遍历所有不起作用的 DOM 元素
【发布时间】：2020-02-24 02:06:10
【问题描述】：

在“demo” div 中，我想显示所有元素的 getAttribute id 和样式（在本例中为两个元素 demoe 和 demotwo）。如果我删除循环，则只显示第一个元素 id 和 style 并且一切正常。一旦我添加循环停止工作，我错了。

function myFunction() {
  var divs = document.querySelectorAll('*'),
    i;
  for (i = 0; i < divs.length; ++i) {
    var div = divs[i];
    var id = document.getElementById(div).getAttribute("id");
    var sty = document.getElementById(div).getAttribute("style");

    document.getElementById("demo").innerHTML = "Id element: " + id + "   Style element: " + sty + "";
  }
}

<div id="demoone" style="width:50px;height:60px;">One</div>

<div id="demotwo" style="width:30px;height:40px;">Two</div>

<button onclick="myFunction()">Try it</button>

<div id="demo"></div>

【问题讨论】：

您将使用循环遍历您的按钮和演示 div。可能最好给您的演示 div 一个匹配的类或将它们包装在另一个 div 中，以便您可以定位它们。此外，不确定“i”在您的 queryselectorAll 之后做了什么，并且您最终将覆盖演示 InnerHTML 中的文本，因为您没有附加到它（您每次都在设置它）

标签： javascript loops dom queryselectall

【解决方案1】：

querySelectorAll() 不返回 ID，它返回元素本身。所以在获取属性之前不需要调用getElementById()。

如果您想查看所有元素的信息，您需要将消息附加到 DIV 的 HTML，而不是每次循环都覆盖它。

function myFunction() {
  var divs = document.querySelectorAll('*'),
    i;
  document.getElementById("demo").innerHTML = ''; // start with empty DIV
  for (i = 0; i < divs.length; ++i) {
    var div = divs[i];
    var id = div.getAttribute("id");
    var sty = div.getAttribute("style");

    document.getElementById("demo").innerHTML += "Id element: " + id + "   Style element: " + sty + "<br>";
  }
}

<div id="demoone" style="width:50px;height:60px;">One</div>

<div id="demotwo" style="width:30px;height:40px;">Two</div>

<button onclick="myFunction()">Try it</button>

<div id="demo"></div>

【讨论】：

【解决方案2】：

主要问题是您使用循环索引来隔离div 元素，然后使用实际的div 元素作为传递给getElementById() 的参数。要通过 id 获取元素，您必须传递与 HTML 中使用的实际 id 属性匹配的字符串。

但是，有一种更简单的方法，不需要知道任何元素的id。使用Array.forEach() 方法循环遍历您找到的元素数组，而不是计数循环。这避免了必须维护一个计数器。此外，如果您打算只查看 div 元素，请将您的选择器从 * 更改为 div。

另外，最后，当您将结果写入demo 元素时，您将.innerHTML 设置为=。这将导致任何先前的值被丢弃，因此您不会得到所有元素的报告，您只会看到循环结束的最后一个元素的信息。相反，使用+=，它将新值连接到最后一个值。此外，永远不要在循环中更新.innerHTML，因为它会导致 DOM 更新多次，这会导致多次重绘和重排，这可能会很昂贵。相反，当您在循环中移动时构建一个字符串，当循环完成时，使用该字符串更新您的元素一次。

最后，it's not a good practice to set up events via HTML attributes (onclick)。相反，将 JavaScript 与 HTML 分开，并使用 .addEventListener() 进行事件处理。

<div id="demoone" style="width:50px;height:60px;">One</div>
<div id="demotwo" style="width:30px;height:40px;">Two</div>
<button>Try it</button>
<div id="demo"></div>

<script>
// Do event handling the modern way, not with inline HTML:
document.querySelector("button").addEventListener("click", myFunction);

function myFunction() {
  // Get reference to the output element
  let output = document.getElementById("demo");
  
  // Get all the elements and convert the collection into an Array
  var divs = Array.prototype.slice.call(document.querySelectorAll('div'));
  
  // Loop over the array
  let results = "";
  divs.forEach(function(div){
    results += "<br>Id element: " + div.id + "   Style element: " + div.getAttribute("style") + "";
  });
  output.innerHTML = results; // Inject string into the element
}
</script>

【讨论】：