使用MutationObserver监听DOM时如何判断目标节点变更及节点是否支持querySelector

问题原因 #

MutationObserver返回的addedNodes包含所有类型的DOM节点，除了普通的元素节点（比如div、span），还会包含注释节点（你看到的<!---->就是注释）、文本节点等非元素类型，这些节点没有实现querySelector方法，直接调用就会抛出异常。

解决方法 #

调用querySelector前先判断当前节点是否为元素类型，有两种常用判断方式：

• 检查node.nodeType === Node.ELEMENT_NODE
• 检查node instanceof Element

修正后的代码 #

handleMutations( mutationsList, observer ) {
    // console.log( mutationsList );
  
    mutationsList.forEach( mutation => {
        mutation.addedNodes.forEach( node => {
            console.log( "added", node, typeof( node ) ) 

            let foundNode = ( node.id === "thediv" );
    
            if ( !foundNode && node.nodeType === Node.ELEMENT_NODE ) {
              // 仅元素类型节点可以调用querySelector
              const child = node.querySelector( "#thediv" );
      
              if ( child ) {
                foundNode = true;
              }           
            }
    
            if ( foundNode ) {
              console.log( "found node. do something." );
            }
        });         
    }); 
},

额外优化建议 #

如果监听的DOM层级不深，也可以在初始化MutationObserver时开启subtree: true配置，直接监听整个目标子树的元素变动，减少手动遍历的逻辑。

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