JavaScript 巧妙利用 MutationObserver，解决 DOM 元素呈现后读取属性问题

在 DOM 中等待元素呈现，再查看附加元素高度的 JS 解决方案

问题陈述

在 JavaScript 中，我们经常需要等待元素呈现到 DOM 中，然后再查看附加元素的高度。现有的解决方案并没有真正展示出如何解决这一常见问题。我们希望找到一种方法，让 JavaScript 将元素渲染到 DOM 中，然后循环返回以读取插入元素的属性，而不使用 setTimeout。

解决方案：MutationObserver

MutationObserver 是一个 API，它允许我们观察 DOM 中的更改。我们可以使用它来检测元素何时被添加到 DOM 中。

要使用 MutationObserver，我们执行以下步骤：

1. 创建 MutationObserver 实例：

const observer = new MutationObserver(callback);

2. 定义回调函数：

function callback(mutations) {
  // 在这里检查是否已将元素添加到 DOM 中
}

3. 观察 DOM：

observer.observe(document.body, { childList: true });

4. 触发更改：
   触发导致元素添加到 DOM 中的更改，例如使用 forEach 循环。

示例代码

// 创建 MutationObserver
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      const newElement = mutation.addedNodes[0];

      if (newElement.id === 'adjective') {
        const height = newElement.clientHeight;
        // 执行操作，例如滚动文本
      }
    }
  });
});

// 观察 DOM
observer.observe(document.body, { childList: true });

// 附加元素到 DOM 中
wordsArray.forEach((word, index) => {
  $('#adjective').append(`<div style='opacity: ${index === 0 ? 1 : 0};'>${word}</div>`);
});

常见问题解答

1. MutationObserver 何时被触发？
   MutationObserver 在 DOM 中发生更改时被触发，例如添加、删除或修改元素。
2. 是否可以在 DOM 中的其他元素上观察变化？
   是的，可以使用 target 参数将 MutationObserver 附加到 DOM 中的任何元素上。
3. MutationObserver 有哪些替代方案？
   其他替代方案包括 EventListener 和 ResizeObserver API。
4. 如何确保在元素被添加到 DOM 中之前创建 MutationObserver？
   将 MutationObserver 的创建放在 forEach 循环之外。
5. MutationObserver 如何检测插入的元素？
   MutationObserver 通过检查添加的节点来检测插入的元素。