DOM Finder
<div id="rootA">
<div>
<div>
<div></div>
<div>
<div></div>
<div>
<div id="nodeA">Node A</div>
</div>
</div>
</div>
</div>
</div>
<div id="rootB">
<div>
<div>
<div></div>
<div>
<div></div>
<div>
<div>Node B</div>
</div>
</div>
</div>
</div>
</div>
Function Implementation
const getPathFromChildToParent = (parent, node) => {
const path = [];
let currentNode = node;
while (currentNode != parent) {
let parentElement = currentNode.parentElement;
let parentElementChildrens = Array.from(parentElement.children);
path.push(parentElementChildrens.indexOf(currentNode));
currentNode = parentElement;
}
return path;
};
const findNodeUsingPath = (parent, path) => {
let currentNode = parent;
while (path.length) {
currentNode = Array.from(currentNode.children)[path.pop()];
}
return currentNode.textContent;
};
const domFinder = () => {
const rootA = document.getElementById("rootA");
const rootB = document.getElementById("rootB");
const nodeA = document.getElementById("nodeA");
const path = getPathFromChildToParent(rootA, nodeA);
console.log(path);
return findNodeUsingPath(rootB, path);
};
console.log(domFinder());
// Output:
[0, 1, 1, 0, 0]
Node B