<pre class="shiki github-dark shaku"><code>function getSelector(element: HTMLElement): string { if (!element.parentElement) { return ''; } const tagName = element.tagName; const parentElement = element.parentElement; const allSiblings = Array.from(parentElement.children); let nthChild = 1; allSiblings.forEach((sibling, index) =&gt; { if (sibling === element) { nthChild = index + 1; } }) return nthChild === 1 ? tagName : `${tagName}:nth-child(${nthChild})`;}function generateSelector(root: HTMLElement, target: HTMLElement): string { const selector: string[] = []; let currentElement = target; let hasReachedRootElementOrNull = false; while (!hasReachedRootElementOrNull) { if (currentElement === root || !currentElement.parentElement) { hasReachedRootElementOrNull = true; break } else { selector.push(getSelector(currentElement)); } if (currentElement.parentElement) { currentElement = currentElement.parentElement } } return selector.reverse().join(' &gt; ');}const div = document.createElement('div')div.innerHTML = `&lt;div&gt; &lt;p&gt;BFE.dev&lt;/p&gt; &lt;div&gt; &lt;button&gt;BFE.dev&lt;/button&gt; &lt;/div&gt; &lt;div&gt; is &lt;p&gt; &lt;span&gt; great. &lt;button id="button"&gt;click&lt;/button&gt; &lt;button&gt;me!&lt;/button&gt; &lt;/span&gt; &lt;/p&gt; &lt;button&gt;BFE.dev&lt;/button&gt; &lt;p&gt;bigfrontend.dev &lt;a href="https://bfe.dev"&gt;BFE.dev&lt;/a&gt; &lt;a href="https://bfe.dev" id="link"&gt;BFE.dev&lt;/a&gt;&lt;/p&gt; &lt;div&gt;BFE.dev &lt;a&gt;BFE.dev&lt;/a&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt;`const root = div.firstElementChildconst button = div.querySelector('#button')let selector = generateSelector(root, button)const element = root.querySelector(selector)console.log({selector, element})</code></pre>

No idea

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…