为什么我可以控制台.log()节点的html，但MutationObserver无法识别它

Question

我试图在<div>上使用MutationObserver，但收到错误：

jquery.min.js:2未捕获类型错误：未能在上执行"observe"MutationObserver"：参数1的类型不是"Node">

表示MutationObserver找不到节点或在节点出现之前正在加载(这很奇怪，因为div只是DOM的正常部分，不是动态添加的(。

但是，如果我这样做：

console.log($("#myDiv").html());

在我的MutationObserver脚本之前，它会返回divs.html，正如预期的那样。

我很好奇为什么会这样？

我的完整代码：

$( document ).ready(function() {
console.log($("#myDiv").html());
const container = $("#myDiv");
const options = { childList: true };

const observer = new MutationObserver(function onMutation(mutations, observer) {
console.log('Mutations', mutations)
});

observer.observe(container, options);
});

Answer 1

MutationObserver是一个本地javascript特性，因此不会理解jquery对象。

更改

const container = $("#myDiv");

至

const container = $("#myDiv")[0];

或使用observer.observe(container[0], options);

将jquery对象转换为本地javascript节点，然后MutationObserver可以使用该节点。