如何使用Javascript有效地确定HTML文档中同级元素的相对顺序

简单地说，我需要确定两个同级元素中的哪一个按DOM顺序排在第一位，但它们可能不是直接相邻的同级。我当前用于执行此操作的代码如下所示：

/**
 * Determine if an element comes before or after another element.
 *
 * This requires both elements to be siblings.
 *
 * @param {Element} el1 - The element to use as a reference.
 * @param {Element} el2 - The element to look for.
 * @returns {?boolean} True if el2 comes before el1, false if el1 comes before el2, undefined otherwise.
 */
function isBefore(el1, el2) {
    let tmp = el1

    while (tmp.previousElementSibling) {
        if (tmp.previousElementSibling === el2) {
            return true
        }

        tmp = tmp.previousElementSibling
    }

    tmp = el1.nextElementSibling

    while (tmp.nextElementSibling) {
        if (tmp.nextElementSibling === el2) {
            return false
        }

        tmp = tmp.nextElementSibling
    }

    return undefined
}

我想知道是否有更有效的方法在vanilla JavaScript中执行此检查。

当兄弟姐妹用尽时，您可以使用并提升一个级别来执行此检查，下面是一个示例：

function isBefore(el1, el2) {
    if (el1.contains(el2) || el2.contains(el1)) {
        return undefined; // not before or after, it's a parent child relationship.
    }

    let tmp = el1.previousElementSibling || el1.parentElement

    while (tmp) {
        if (tmp === el2 || tmp.contains(el2)) {
            return true
        }
        tmp = tmp.previousElementSibling || tmp.parentElement;
    }

    return false; // if it is not before, it must be after.
}

---

为什么要费心检查下一个远程入口同级？我的意思是，如果它不是

以前的元素同级

，那么它就不是“before”，您可以返回false…@HereticMonkey，这主要是因为我希望能够捕捉到两个元素不是同级的情况（如果出现这种情况，这是我代码中的某个错误）。然而，这让我意识到，获取所有同级元素的完整列表并将其简化为检查节点列表中的顺序可能会更快，因此感谢您的评论。