如何监听导航栏所有.elementskit-megamenu-panel元素的class变化

原代码仅对第一个.elementskit-megamenu-panel生效的核心原因是：

• document.querySelector()API只会返回匹配对应选择器的第一个DOM元素，后续同类型元素不会被获取到
• 原逻辑仅给获取到的单个元素绑定了MutationObserver监听，其余元素未被注册监听，自然不会触发回调

如果页面上的.elementskit-megamenu-panel都是页面初始加载时就存在的静态节点，直接遍历所有匹配元素逐个绑定监听即可，修改后完整代码如下：

// 获取所有携带目标类名的面板元素
const menuPanels = document.querySelectorAll('.elementskit-megamenu-panel')
const observerOptions = {
    attributes: true
}

// 复用的class变更回调逻辑
function handleClassChange(mutationList, observer) {
    mutationList.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            // 此处编写class变更后的业务逻辑
            console.log('当前变更元素的class为：', mutation.target.className);
        }
    })
}

// 遍历所有面板，逐个绑定属性监听
menuPanels.forEach(panel => {
    const observer = new MutationObserver(handleClassChange)
    observer.observe(panel, observerOptions)
})

如果页面会通过JS动态新增.elementskit-megamenu-panel元素，逐个绑定的方式无法覆盖后续新增的节点，此时可以改为监听所有面板的公共父容器，利用变更冒泡特性捕获所有后代节点的属性变更，代码更简洁且兼容性更好：

// 替换为所有megamenu面板的公共固定父容器，示例中对应最外层ul标签
const menuWrapper = document.querySelector('ul')
const observerOptions = {
    attributes: true,
    subtree: true, // 开启后代节点监听
    attributeFilter: ['class'] // 仅监听class属性变更，过滤无关回调提升性能
}

function handleClassChange(mutationList, observer) {
    mutationList.forEach(mutation => {
        // 校验触发变更的元素是否为目标面板
        if (mutation.target.classList.contains('elementskit-megamenu-panel')) {
            // 此处编写class变更后的业务逻辑
            console.log('当前变更元素的class为：', mutation.target.className);
        }
    })
}

const observer = new MutationObserver(handleClassChange)
observer.observe(menuWrapper, observerOptions)

该方案无需遍历逐个绑定，初始渲染和后续动态插入的所有.elementskit-megamenu-panel元素的class变更都能被正常捕获。

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