19.md

Solution

Submission link - https://bigfrontend.dev/problem/find-corresponding-node-in-two-identical-DOM-tree/discuss/581

/**
 * @param {HTMLElement} rootA
 * @param {HTMLElement} rootB - rootA and rootB are clone of each other
 * @param {HTMLElement} nodeA
 */
const findCorrespondingNode = (rootA, rootB, target) => {

  // we can track 'target' in rootB using indexes stored during tracing 'target' in rootA
  let path = [];

  // 
  const getRootAPath = (rootA, target) => {
    if (rootA === target) return rootA; // if 'target' is itself rootA then directly return rootA, this will make 'path' array empty, and it will return rootB in reduceRight
    let node = target;

    while (node.parentNode) { // we will iterate till we reach top of the DOM tree
      const children = Array.from(node.parentNode.children); // convert HTMLCollection into Array
      path.push(children.indexOf(node)); // push index where 'node' found
      node = node.parentNode; // this will make sure we move from down to top
    }
  }

  getRootAPath(rootA, target);

  // reduceRight is same as reduce but it iterate values from right to left
  return path.reduceRight((acc, index) => {
    return acc.children[index];
  }, rootB)
}

Short story

The question itself was not clear to me. I tried hard but then eventually needed to check solutions.
I understood the question and then tried to solve it by taking inspiration from a solution.

After completing that solution, I thought to try using recursion. I almost solved it but needed to check the solution again.
It would have been better to solve at least recursion without taking inspiration from the existing solution.

Hope to learn more and solve problems by myself.

Algorithm

1. We take the target node and get its parentNode
2. We check the target node index in the children of its parentNode
3. We push that index in the path array
4. We re-assign target as its parentNode and keep on repeating the above steps till target.parentNode is undefined
5. We take the path array and iterate it from right to left to search for a node in another DOM tree

Code overview

1. We define a path array to store the path we visited from the target node to its topmost parent node.
2. We declare the getRootAPath function which takes the rootA node and the target node.
3. If rootA and target are the same then we return rootA. Why?
   1. There is no point to run while-loop when we know that both the nodes are the same and it won't even go inside the loop.
4. We declare a variable node and define it with the target.
5. We run a while-loop till we reach to topmost parent node from the target node.
   1. For this, we keep modifying the node with the successive parent node
   2. We check the index position of the node in children of node parent
   3. We push that index in the path array we created earlier
   4. After this, we update node value with node.parentNode
   5. We do this until there is no more node.parentNode available
6. At this point, we have a path array containing the position of the target node in rootA and rootB (clone of rootA).
7. As we pushed indexes from bottom to top, we need to run a loop in the reverse direction.
8. We use reduceRight for this use case, it iterates items in an array from right to left
9. We iterate over position till we reach to the target in rootB.
10. We return the target node once we reach the node in the rootB.

That's all, folks.

---

I'm excited to improve the solution and code walkthrough. Feel free to drop a comment, or send a PR or send memes @knowkalpesh.