使用 MutationObserver 写法来获取页面元素

[bxb100]

之前一直使用 DOMContentLoaded 来捕捉 DOM 树的变化, 写的渣代码需要判断, 然后还要 Promise setTimeout 这种形式来 sleep (不能直接用 setTimeout 是 js 运行的 eventLoop 会在最后才执行)

但是当使用 https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists 所述的代码

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

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

直接将 MutationObserver 和 Promise 结合起来, 这样可以直接用 Promise.then 来链式调用, 并且也可以复用 js 中 Promise 相关优秀的特性, 比如 race , any 等

当然有点需要注意, 构造方法中的 callback 返回的是所有更新的 MutationRecord 数组, 所以没法简单的使用 mutations.addedNodes.find(node => node.matches("...")), 原回答的解法目前看来最简单且优雅