Цикл ВСЕХ элементов DOM не работает

Question

В "demo" div я хочу показать getAttribute id и стиль всех элементов (в данном случае два элемента demone и 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>

Answer 1

Основная проблема заключается в том, что вы используете индекс цикла для изоляции элемента div, а затем используете фактический элемент div в качестве аргумента, который вы передаете getElementById(). Чтобы получить элемент по его id, вы должны передать строку, которая соответствует фактическому атрибуту id, используемому в HTML.

Но есть более простой способ, который не требует знания idлюбого элемента. Вместо цикла подсчета, переберите массив элементов, который вы найдете с помощью метода Array.forEach(). Это позволяет избежать необходимости поддерживать счетчик. Кроме того, если вы намереваетесь просматривать только элементы div, измените селектор с * на div.

Кроме того, в конце, когда вы записываете результаты в элемент demo,Вы устанавливаете .innerHTML с помощью =. Это приведет к тому, что любое предыдущее значение будет выброшено, поэтому вы не получите отчет обо всех элементах, вы просто увидите информацию из последнего элемента, который прошел цикл. Вместо этого используйте +=, который объединяет новое значение с последним значением. Кроме того, никогда не обновляйте .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>

Answer 2

querySelectorAll() не возвращает идентификаторы, он возвращает сами элементы. Поэтому вам не нужно вызывать getElementById() перед получением атрибута.

Если вы хотите просмотреть информацию для всех элементов, вам нужно добавить сообщение в HTML-код DIV, а не перезаписывать его каждый разчерез петлю.

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>