浏览器提供了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>
遍历父节点
<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)。以空间换时间。
记录记录!