如何检测目标节点的nextElementSibling存在并执行对应函数？

需要在指定节点的nextElementSibling出现时执行对应函数，场景如下：
初始DOM结构：

<section>
   <div id="a">...</div>
   <div id="b">...</div>
</section>

第三方脚本会在未知时间动态注入新节点，最终DOM变为：

<section>
   <div id="a">...</div>
   <div id="b">...</div>
   <div id="c">...</div>
   <div id="d">...</div>
</section>

核心需求：

1. 当节点b存在nextElementSibling（即节点c）时，调用函数X并传入节点c；
2. 实现批量逻辑：当b存在时调用X(a)，c存在时调用X(b)，d存在时调用X(c)。

现有一个基于选择器等待元素的函数，但它依赖选择器，无法直接检测“当前节点的下一个兄弟节点”：

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
        });
    });
}

请问如何修改或使用该函数来实现需求？

一、检测单个节点的nextElementSibling #

修改原函数，让它接受目标节点而非选择器，直接监听该节点的父元素变化，精准判断下一个兄弟节点是否出现：

function waitForNextSibling(targetNode) {
    return new Promise(resolve => {
        // 先检查当前是否已有下一个兄弟节点
        const nextSibling = targetNode.nextElementSibling;
        if (nextSibling) {
            return resolve(nextSibling);
        }

        // 仅监听目标节点的父元素，减少不必要的性能消耗
        const observer = new MutationObserver(() => {
            const updatedNext = targetNode.nextElementSibling;
            if (updatedNext) {
                resolve(updatedNext);
                observer.disconnect();
            }
        });

        observer.observe(targetNode.parentElement, {
            childList: true,
            subtree: false
        });
    });
}

// 使用示例：先获取节点b，再等待它的下一个兄弟节点
const nodeB = document.getElementById('b');
waitForNextSibling(nodeB).then(nodeC => {
    X(nodeC);
});

二、批量处理：每个新节点出现时调用前一个节点的函数 #

如果需要实现“新节点出现时，自动调用函数X并传入它的前一个兄弟节点”，可以监听父容器的子节点新增事件，同时兼容已存在的节点：

function setupSiblingObserver(parentSelector, callback) {
    const parent = document.querySelector(parentSelector);
    if (!parent) return;

    // 先处理已存在的节点（除第一个外，每个节点触发前一个节点的回调）
    const children = Array.from(parent.children);
    children.slice(1).forEach(child => {
        callback(child.previousElementSibling);
    });

    // 监听父容器的子节点新增事件
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    const prevSibling = node.previousElementSibling;
                    if (prevSibling) {
                        callback(prevSibling);
                    }
                }
            });
        });
    });

    observer.observe(parent, {
        childList: true,
        subtree: false
    });

    return observer; // 返回观察者实例，方便后续手动断开监听
}

// 使用示例：监听section容器，实现需求逻辑
setupSiblingObserver('section', prevNode => {
    X(prevNode);
});

这个方法会自动覆盖两种场景：

• 初始已存在的节点：比如b节点会触发X(a)；
• 后续新增的节点：c出现时触发X(b)，d出现时触发X(c)。

关键优化点 #

• 缩小监听范围：不再监听整个document.body，仅监听目标节点的父元素，降低性能开销；
• 精准节点判断：直接通过nextElementSibling/previousElementSibling获取目标节点，无需依赖选择器；
• 全场景覆盖：同时处理已存在节点和未来新增节点，满足批量需求。

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