<pre class="shiki github-dark shaku"><code>// Start from target, traverse upwards and collect every element's selector untill it reaches root// O(h) time; O(h) space;export function generateSelector(root: Element, target: Element): string { let selectors: string[] = []; let currElement: Element | null = target; while (currElement) { if (currElement === root) break; const selector = getElementSelector(currElement); selectors.unshift(selector); currElement = currElement.parentElement; } return selectors.join(" &gt; ");}// Use recursive DFS to collect selectors of every element on the path from root to target// O(n) time; O(h) space;export function generateSelector1(root: Element, target: Element): string { const selectors: string[] = []; const collectSelectors = (root: Element): boolean =&gt; { if (root === target) return true; // returns whether we found the target on this path for (const child of root.children) { const found = collectSelectors(child); if (found) { const selector = getElementSelector(child); selectors.unshift(selector); // unshift because we are inserting element selectors closer to target first return true; } } return false; }; collectSelectors(root); return selectors.join(" &gt; "); // join selectors with the child combinator}function getElementSelector(element: Element) { // Prioritize using id selector const tag = element.tagName.toLowerCase(); if (element.id) return `${tag}#${element.id}`; // Use :nth-child() selector const parent = element.parentElement; if (!parent) { // fallback with className selector const classNames = Array.prototype.join.call(element.classList, "."); return `${tag}${classNames.length ? `.${classNames}` : ""}`; } const index = Array.prototype.findIndex.call( parent.children, (c) =&gt; c === element ); return `${tag}:nth-child(${index + 1})`;}// Exampleconst root = document.createElement("div");root.innerHTML = `&lt;p id="p1"&gt;BFE.dev&lt;/p&gt; &lt;div&gt; is &lt;p class="abc def ghi"&gt; &lt;span&gt;great. &lt;button&gt;click me!&lt;/button&gt;&lt;/span&gt; &lt;/p&gt; &lt;/div&gt;`;const target = root.querySelector("button")!;let selector = generateSelector(root, target);console.log(selector); // div:nth-child(2) &gt; p:nth-child(1) &gt; span:nth-child(1) &gt; button:nth-child(1)console.log(root.querySelector(selector)); // HTMLButtonElement</code></pre>

TypeScript solution

Given a DOM tree and a target element, generate a valid selector to target it. For example, for a DOM tree like below <div> BFE.dev <div> is <p…