jQuery中$符号含义及DOMNodeInserted事件替换技术咨询

问题解答 #

1. 关于jQuery中$的含义
   $是jQuery库核心函数的别名，作用是把原生DOM对象或选择器字符串转换为jQuery包装对象，以此调用jQuery提供的链式API。$(document)就是将浏览器原生的document对象（代表整个HTML文档）包装成jQuery对象，所以你要找的target就是原生的document对象。

2. 替换后的完整代码
   原代码监听的是整个文档内的节点插入事件，替换时直接用document作为target即可。另外要注意：原DOMNodeInserted事件的回调接收的是事件对象，而MutationObserver中传给addedNodes.forEach的是单个节点，需要调整调用方式保证参数兼容。

修改后的代码示例：

// 创建MutationObserver实例
const observer = new MutationObserver(mutationList => {
  // 筛选出子节点变化的记录
  mutationList.filter(mutation => mutation.type === 'childList')
    .forEach(mutation => {
      // 遍历所有新增节点，调用原处理函数
      mutation.addedNodes.forEach(node => {
        // 模拟原事件回调的参数，若原函数依赖事件对象其他属性，需补充对应值
        InspectPage.OnNodeInserted({ target: node });
      });
    });
});

// 监听整个文档的子节点变化，包含所有子树
observer.observe(document, { childList: true, subtree: true });

3. 额外注意
   如果InspectPage.OnNodeInserted原本依赖DOMNodeInserted事件对象的其他属性（比如relatedNode），需要根据MutationRecord的对应属性（如mutation.target、mutation.previousSibling）补充相关值，确保函数逻辑正常运行。

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