小编Chi*_*Leg的帖子

我试图在var articleFirst中找到所有的事务,但是控制台中的返回消息说"querySelectorAll"不是一个函数.为什么我会收到这个错误？

这是我的HTML:

<article class="first">     
  <div class="feature parts"> 
    <div class="oferts"> 
      <div class="heart icons"></div> 
        <h1>Build with passion</h1>  
    </div>
  </div>
</article>

这是我的JavaScript:

var articleFirst = document.querySelectorAll("article.first");
var oferts = articleFirst.querySelectorAll(".oferts");

错误:

未捕获的TypeError:articleFirst.querySelectorAll不是函数

我想知道，为什么在这种情况下“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/