цикл выполняется только один раз

Question

var el = document.getElementById("aufgaben");
var kind = el.firstChild;
var i = 0;
while (kind) {
  alert(i + kind);
  kind.style.backgroundColor = "orange";
  kind = kind.nextSibling;
  i++;
}

<ul id="aufgaben">
  <li class="offen">aufgabe1<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe2<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe3<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe4<a href="#"> erledigen</a></li>
</ul>

цикл работает правильно, когда строка 'kind.style.backgroundColor = "orange' помечена как комментарий. Когда строка активна, только одно предупреждениепоявляется, и ни один из детей не получает оранжевый цвет фона.

Answer 1

Свойство firstChild DOM возвращает первый ДЕТСКИЙ УЗЕЛ этого DOM, а не первый ДЕТСКИЙ ЭЛЕМЕНТ.

ДЕТСКИЙ УЗЕЛ включает текстовые узлы.

Добавьте этот код console.log(el.childNodes), чтобы проверить разницу, вы поймете, что я говорю.

В этом случае kind будет пустым текстовым узлом перед первым элементом.
Если вы хотите получить первый элемент, попробуйте изменить строку: 2, как показано ниже.
var kind = el.firstElementChild;
Тогда вы получите то, что хотите.

И если вы хотите перейти к следующему элементу, измените строку: от 7 до kind = kind.nextElementSibling;.

Это должно работать так, как вы ожидали.

Answer 2

Проблема здесь в том, что firstChild и nextSibling возвращают текстовые узлы и элементы.Итак, вы выбираете текстовый узел между ul и li.Поэтому, чтобы обойти это, используйте версии селектора элементов, которые пропускают текстовые узлы.

var el = document.getElementById("aufgaben");
var kind = el.firstElementChild;
var i = 0;
while (kind) {
  kind.style.backgroundColor = "orange";
  kind = kind.nextElementSibling;
  i++;
}

<ul id="aufgaben">
  <li class="offen">aufgabe1<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe2<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe3<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe4<a href="#"> erledigen</a></li>
</ul>

Чтобы сделать это с помощью своего кода, вам необходимо проверить тип узла

var el = document.getElementById("aufgaben");
var kind = el.firstChild;
var i = 0;
while (kind) {
  if(kind.nodeType==1) {  // make sure it is an element node
    kind.style.backgroundColor = "orange";
  }
  kind = kind.nextSibling;
  i++;
}

<ul id="aufgaben">
  <li class="offen">aufgabe1<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe2<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe3<a href="#"> erledigen</a></li>
  <li class="offen">aufgabe4<a href="#"> erledigen</a></li>
</ul>