Выбор нескольких элементов с помощью Quel Selector Alll - JavaScript

Question

У меня есть intersectionObserver на поле, которое меняет цвет, когда он входит в область просмотра, которая все работает нормально.

Я пытаюсь применить это к нескольким полям, хотя, и когда я изменяю getElementsById в querySelectorAll (строка 13 JS) он не играет в мяч.

Кто-нибудь знает, что я здесь делаю не так? Я не думаю, что проблема с intersectionObserver, я думаю, что это с селектором. Это сводит меня с ума.

Codepen: 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 возвращает массив узлов, getElementById возвращает один объект dom. понятию объект-наблюдатель в качестве параметра нужен объект dom, поэтому решение этой проблемы может быть

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