即使使用Defer和addEventListener仍遇IntersectionObserver observe参数错误

即使使用Defer和addEventListener，代码仍抛出如下错误：

错误信息：

Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

对应的JS代码：

let cartProducts = document.getElementById('products');
if (cartProducts) {
  let lastItem = cartProducts.lastElementChild;
  console.log(lastItem);
  let observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          cartProducts.classList.remove('bg-red');
        } else {
          cartProducts.classList.add('bg-red');
        }
      });
    },
    { threshold: 1 },
  );
  observer.observe(lastItem);
}

错误原因 #

• 虽然cartProducts元素存在，但它没有任何子元素，导致lastElementChild返回null。而IntersectionObserver.observe()要求必须传入有效的DOM元素，传入null就会触发这个类型错误。
• 查看console.log(lastItem)的输出，如果是null，就说明cartProducts下没有子节点。

解决办法 #

在调用observe()之前，先校验lastItem是否为有效DOM元素：

let cartProducts = document.getElementById('products');
if (cartProducts) {
  let lastItem = cartProducts.lastElementChild;
  console.log(lastItem);
  
  // 新增校验：确保lastItem是Element类型
  if (lastItem instanceof Element) {
    let observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            cartProducts.classList.remove('bg-red');
          } else {
            cartProducts.classList.add('bg-red');
          }
        });
      },
      { threshold: 1 },
    );
    observer.observe(lastItem);
  } else {
    // 处理无子女元素的场景，比如设置默认样式
    cartProducts.classList.add('bg-red');
    console.log('cartProducts没有子元素，无法创建IntersectionObserver');
  }
}

如果业务允许，也可以直接将监听目标改为cartProducts本身，避免子元素为空的问题。

内容的提问来源于stack exchange，提问作者Cheerio