循环只执行一次

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 和 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>

Answer 2

DOM 的firstChild 属性返回该DOM 的第一个子节点，而不是第一个子元素。

CHILD NODE 包括文本节点。

添加此代码console.log(el.childNodes) 以检查差异，您就会知道我在说什么。

在这种情况下，kind 将是第一个元素之前的空文本节点。
如果要获取第一个元素，请尝试修改 line:2 如下所示。
var kind = el.firstElementChild;
然后你会得到你想要的。

如果你想跳转到下一个同级元素，请将 line:7 修改为 kind = kind.nextElementSibling;。

它应该可以按您的预期工作。