如何利用MutationObserver检测新增DOM节点中cursor为pointer的元素

问题分析 #

你当前的代码仅遍历了新增节点的直接子节点，且未过滤文本节点等非元素节点，导致无法检测到深层嵌套的子元素（比如示例中的<a>标签），还可能触发不必要的错误。

改进方案 #

使用querySelectorAll('*')一次性获取当前元素的所有后代元素，再结合展开运算符将新增节点本身纳入检查范围，最后逐个验证计算样式中的cursor属性即可覆盖所有目标元素。

修改后的完整代码 #

<button onClick="myfunc()">
Add to DOM
</button>

a {
  cursor: pointer;
}

function myfunc() {
    const ele = document.createElement('div')
    ele.innerHTML = `<span><a>I am added</a></span><h2><a>I am two</a></h2>`
    document.body.appendChild(ele)
}

const observer = new MutationObserver(mutationsList => {
  mutationsList.forEach(mutation => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(addedNode => {
        if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.tagName !== 'SCRIPT') {
          // 合并当前节点与所有后代元素，确保无遗漏
          const allElements = [...addedNode.querySelectorAll('*'), addedNode];
          
          allElements.forEach(el => {
            const computedStyle = window.getComputedStyle(el);
            if (computedStyle.cursor === 'pointer') {
              console.log(`元素 ${el.tagName} 的cursor为pointer`, el);
            } else {
              console.log(`元素 ${el.tagName} 的cursor不为pointer`, el);
            }
          });
        }
      });
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

关键说明 #

• querySelectorAll('*')仅选中后代元素，通过[...xxx, addedNode]将新增节点本身加入检查队列，实现全范围覆盖
• 仅对元素节点执行样式检查，避免非元素节点（如文本节点）调用window.getComputedStyle引发错误
• 该方式无需递归遍历，代码简洁且能高效处理任意层级的嵌套元素

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