Firstchild/lastchild 无法在 JavaScript 中工作

Question

我想知道，为什么在这种情况下“firstChild”和“lastChild”不起作用，但是当我通过数组中 li 的位置执行此操作时，一切正常。

这是我的 HTML：

<div class="listContainer">
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

这是我的 JS，当它不工作时：

  for (var i = 0; i < div.length; i++){
      div[i].addEventListener("mouseover", function(){
        var list = this.firstElementChild;
        var listLi = list.children;

        var firstLi = listLi.firstChild;
        var lastLi = listLi.lastChild;

        firstLi.style.backgroundColor = "red";
        lastLi.style.backgroundColor = "blue";
      });
};

我试图这样做，但它不起作用：

listLi.firstChild.style.backgroundColor = "red";
listLi.lastChild.style.backgroundColor = "blue";

但是当我使用数组中的位置来执行此操作时，一切都正常：

listLi[0].style.backgroundColor = "red";
listLi[4].style.backgroundColor = "blue";

编辑：它看起来像这样，当它工作时： https: //fiddle.jshell.net/aadfnazk/

Answer 1

首先，您必须使用firstElementChildandlastElementChild以便它选择元素节点而不是文本节点。

list其次，在元素而不是子数组上调用它们listLi。

list.firstElementChild.style.backgroundColor = "red";
list.lastElementChild.style.backgroundColor = "blue";

更新了小提琴