Select 多个元素与查询 Select 或所有 - JavaScript

Question

我在一个盒子上有一个 intersectionObserver，它在进入视口时会改变颜色，一切正常。

不过，我正在尝试将其应用于多个盒子，当我将 getElementsById 更改为 querySelectorAll（JS 的第 13 行）时，它没有发挥作用。

有谁知道我在这里做错了什么？我不认为问题出在 intersectionObserver，我认为是选择器。快把我逼疯了。

代码笔：https://codepen.io/emilychews/pen/RMWRPZ

window.addEventListener("load", function(){

var iO = "IntersectionObserver" in window; /* true if supported */

if (iO) {
  const config = {
    root: null, // sets the framing element to the viewport
    rootMargin: '400px 0px 0px 0px',  // should remove the animation 400px after leaving the viewport
    threshold: .5
  };

  const box = document.getElementById('box1');
  // const box = document.querySelectorAll('.box');

  let observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(item) {
      if (item.intersectionRatio > .5) {
        item.target.classList.add("active");
      } else {
        item.target.classList.remove("active");
      }
    });
  }, config);

  observer.observe(box);

} // end of if(iO)


}); // end of load event

body {
  font-family: arial;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250vh;
}

.box {
  margin: 1rem;
  width: 100px;
  height: 100px;
  background: blue;
  opacity: 1;
  transition: .5s all;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.active {
  background: red;
  opacity: 1;
}

<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>

Answer 1

querySelectorAll returns 节点数组，getElementById returns 单个 dom 对象。 observer.observe 需要一个 dom 对象作为参数，因此解决方案可能是

const box = document.getElementsByClassName('box');
box.forEach(function(item){
    observer.observe(item);
});

Select 多个元素与查询 Select 或所有 - JavaScript

Select Multiple Elements with Query Selector Alll - JavaScript

javascript

selectors-api

intersection-observer