# MutationObserver

## 定义

MutationObserver提供监视DOM树修改的能力。可监听的变化有：属性、文本。支持监听孙子节点。

## 简单示例

```javascript
// 注册监视器, 一旦发生变化会alert
let observer = new MutationObserver(()=>{
    alert('change')
});
// 开始监视，observer可以接受{ attributes: true, childList: true, subtree: true }
observer.observe(el, { childList: true, subtree: true });
// 停止监视, 释放资源
observer.disconnect()
```

## 常用场景

滚动加载, 用来监视元素是否已经加入或者修改子元素, 加入成功后触发回调

```javascript
// DOM注册scroll事件监听
container.addEventListener('scroll', onScroll);
// 创建MutationObserver对象，并绑定到onScroll事件处理  
const observer = el[scope].observer = new MutationObserver(onScroll);
// 设置监听
observer.observe(container, { childList: true, subtree: true });
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/html/dom/mutationobserver.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.