面试官:怎么找到DOM树中最近公共父节点鸭?

335 阅读1分钟

浏览器提供了contains这个API函数。除了使用contains,我们还可以遍历两个子节点的父节点,再进行查找。

contains

 <div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>

    <script>
        let box1 = document.querySelector('#box1')
        let box2 = document.querySelector('#box2')


        // 1.contains
        function findParentNode(node1, node2) {
            if (node1.contains(node2)) {
                return node1;
            }
            else {
                return findParentNode(node1.parentNode, node2)
            }
        }

        console.log(findParentNode(box1, box2));
    </script>

image.png

遍历父节点


 <div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>

    <script>
        let box1 = document.querySelector('#box1')
        let box2 = document.querySelector('#box2')

        //2.遍历出节点的所有父节点,再比较
        function findParentNode(node1, node2) {
            function findParent(node, parent = []) {
                if (!node.parentNode) return parent;
                parent.push(node.parentNode);
                return findParent(node.parentNode, parent)
            }

            let node1Parent = findParent(node1)
            let node2Parent = findParent(node2)

            let map = new Map();

            for (let i of node1Parent) {
                map.set(i, true)
            }

            for (let i = 0; i < node2Parent.length; i++) {
                if (map.has(node2Parent[i])) return node2Parent[i];
            }
        }



        console.log(findParentNode(box1, box2));
    </script>

这里使用hash表,将时间复杂度有O(n^2)降为O(n)。以空间换时间。

image.png


记录记录!