Uncaught TypeError读取parentElement为null报错如何解决

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')

该报错的触发根源是：脚本监听了页面所有带id的div元素，但部分div的id并没有在导航栏中存在对应的<a href="#对应id">锚点链接，此时document.querySelector(nav li a[href="#${id}"])会返回null，代码直接访问null的parentElement属性就抛出了错误。功能看似正常是因为存在对应锚点的div逻辑不受影响，仅没有对应导航锚点的div会触发报错。

可通过两个层级的优化解决问题：

• 操作类名前先判断对应导航元素是否存在，避免空值访问
• 可选优化：监听前提前过滤掉没有对应导航锚点的div，减少不必要的观测开销

window.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const id = entry.target.getAttribute('id');
            // 先查询对应导航元素，非空再执行后续操作
            const navLink = document.querySelector(`nav li a[href="#${id}"]`);
            if (!navLink) return;
            if (entry.intersectionRatio > 0) {
                navLink.parentElement.classList.add('active');
            } else {
                navLink.parentElement.classList.remove('active');
            }
        });
    });

    // 可选优化：仅监听有对应导航锚点的div，减少无效观测
    document.querySelectorAll('div[id]').forEach((div) => {
        const id = div.getAttribute('id');
        if (document.querySelector(`nav li a[href="#${id}"]`)) {
            observer.observe(div);
        }
    });
});

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