0

在“演示” 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>

4

2 回答 2

0

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>

于 2019-10-28T19:28:55.440 回答
0

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

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

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

最后，通过 HTML 属性 ( )设置事件不是一个好习惯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>

于 2019-10-28T19:34:24.500 回答