为何能console.log()节点HTML，MutationObserver却无法识别该节点？

错误原因 #

你遇到的问题核心是类型不匹配：

• $("#myDiv")返回的是jQuery包装对象，不是原生的DOM Node节点
• MutationObserver的observe方法要求第一个参数必须是原生Node类型，因此会抛出类型错误

而$("#myDiv").html()能正常工作，是因为jQuery的html()方法内部会自动获取对应的原生DOM节点，再读取它的innerHTML，所以不会触发类型问题。

解决办法 #

只需把jQuery对象转换成原生DOM节点即可，有两种常用方式：

1. 通过数组下标获取：$("#myDiv")[0]
2. 使用jQuery的get()方法：$("#myDiv").get(0)

修改后的代码如下：

$( document ).ready(function() {
    console.log($("#myDiv").html());
    // 转换成原生DOM节点
    const container = $("#myDiv")[0];
    const options = { childList: true };
    
    const observer = new MutationObserver(function onMutation(mutations, observer) {
      console.log('Mutations', mutations)
    });
    
    observer.observe(container, options);
});

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