如何查找两个DOM节点的最近公共父节点

在前端开发中，如果你需要找到两个 DOM 节点的最近公共父节点，可以使用 JavaScript 提供的 DOM API 来实现。以下是一个简单的函数，该函数接受两个 DOM 节点作为参数，并返回它们的最近公共父节点：

function findClosestCommonParent(node1, node2) {
    // 获取节点1的所有父节点
    const parents1 = getParents(node1);
    // 获取节点2的所有父节点
    const parents2 = getParents(node2);

    // 从顶层开始比较，找到第一个共同的父节点
    for (let i = 0; i < parents1.length; i++) {
        if (parents2.includes(parents1[i])) {
            return parents1[i]; // 返回第一个找到的公共父节点
        }
    }

    return null; // 如果没有找到公共父节点，返回null
}

// 辅助函数：获取一个节点的所有父节点
function getParents(node) {
    const parents = [];
    let parent = node.parentNode;
    while (parent) {
        parents.push(parent);
        parent = parent.parentNode;
    }
    return parents;
}

使用示例：

const node1 = document.getElementById('node1');
const node2 = document.getElementById('node2');
const commonParent = findClosestCommonParent(node1, node2);
if (commonParent) {
    console.log('最近公共父节点:', commonParent);
} else {
    console.log('没有找到公共父节点');
}

这个函数首先通过 getParents 辅助函数分别获取两个节点的所有父节点，并存储在两个数组中。然后，它遍历第一个节点的父节点数组，检查每个父节点是否也存在于第二个节点的父节点数组中。当找到第一个公共父节点时，函数返回该节点。如果没有找到公共父节点，函数返回 null。