您好，请帮我使用JS来监听dom变化，请给出具体示例

好的，下面是一个简单的示例：

HTML：

<div id="myDiv">Hello, World!</div>

JS：

// 获取需要监听的DOM元素
const targetNode = document.getElementById('myDiv');

// 创建一个MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  // 对变化做出响应
  mutations.forEach(function(mutation) {
    console.log('变化类型：', mutation.type);
    console.log('变化前的值：', mutation.oldValue);
    console.log('变化后的值：', mutation.target.textContent);
  });    
});

// 配置需要观察的变化类型
const config = { attributes: true, childList: true, characterData: true, subtree: true, attributeOldValue: true, characterDataOldValue: true };

// 传入目标节点和观察选项
observer.observe(targetNode, config);

// 修改DOM
targetNode.textContent = 'Hello, ChitChat!';

// 停止观察
observer.disconnect();

在上面的示例中，我们首先获取了需要监听的 DOM 元素 `myDiv`，然后创建一个 MutationObserver 实例，并且将需要观察的变化类型和其他选项配置好。接着，我们调用 `observer.observe()` 方法，传入目标节点和观察选项，这样就可以开始监听 DOM 变化了。最后，我们对目标节点的内容进行了修改，并且调用 `observer.disconnect()` 停止观察。当 DOM 变化时，MutationObserver 实例会自动调用我们设置的回调函数，并且给我们传递一个 MutationRecord 对象，该对象包含了变化的详细信息，我们可以在回调函数中对变化做出响应。