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”被标记为注释时，循环正常工作。当行处于活动状态时，仅出现一个警报，没有子项获得橙色backgroundcolor。

Answer 1

这里的问题是firstChild和nextSibling返回文本节点和元素。因此，您正在选择ul和li之间的textnode。因此，要解决此问题，请使用跳过文本节点的元素选择器版本。

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”，而不是第一个“ CHILD ELEMENT”。

CHILD NODE包括文本节点。

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

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

如果要跳到下一个元素同级，则将第7行修改为kind = kind.nextElementSibling;。

它应该可以按预期工作。

循环仅执行一次

2 个答案: