Question

我想知道，为什么在这种情况下＆＃34; firstChild＆＃34;和＆＃34; lastChild＆＃34;不起作用，但是当我通过数组中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

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

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

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

Updated Fiddle

Firstchild / lastchild不使用JavaScript

1 个答案: