Run results for: find anchor

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser: Chrome 107

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
while distance 3	1267992.5 Ops/sec
while distance 0	3978270.0 Ops/sec
while no a distance 3	711080.4 Ops/sec
closest distance 3	2218610.2 Ops/sec
closest distance 0	3964339.2 Ops/sec
closest no a distance 3	1937568.9 Ops/sec

HTML Preparation code:

<div id="app-target">
  <div>
    <div>
      <div>
        <a id="distance-0">
          <span>
            <span>
              <span id="distance-3">
              </span>
            </span>
          </span>
        </a>
        <div id="no-a-distance-0">
          <span>
            <span>
              <span id="no-a-distance-3">
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

var appTarget = document.getElementById('app-target');

var distance0 = document.getElementById('distance-0');
var distance3 = document.getElementById('distance-3');

var noA0 = document.getElementById('no-a-distance-0');
var noA3 = document.getElementById('no-a-distance-3');

/**
 * @param {Element} element
 * @returns {Element | null}
 */
function parent_element(element) {
	let parent = element.assignedSlot ?? element.parentNode;

	// @ts-expect-error handle shadow roots
	if (parent?.nodeType === 11) parent = parent.host;

	return /** @type {Element} */ (parent);
}

/**
 * @param {Element} element
 * @param {Element} target
 */
function find_anchor(element, target) {
	while (element !== target) {
		if (element.nodeName.toUpperCase() === 'A') {
			return /** @type {HTMLAnchorElement | SVGAElement} */ (element);
		}

		element = /** @type {Element} */ (parent_element(element));
	}
}

function find_anchor_closest(element, target) {
	// fast path
	if (element.nodeName.toUpperCase() === 'A') {
		return element;
	}

	const a = element.closest('a');
	if (target.contains(a)) {
		return a;
	}
}

Tests:

while distance 3
const a = find_anchor(distance3, appTarget); if (!a) { /* return */ }
while distance 0
const a = find_anchor(distance0, appTarget); if (!a) { /* return */ }
while no a distance 3
const a = find_anchor(noA3, appTarget); if (!a) { /* return */ }
closest distance 3
const a = find_anchor_closest(distance3, appTarget); if (!a) { /* return */ }
closest distance 0
const a = find_anchor_closest(distance0, appTarget); if (!a) { /* return */ }
closest no a distance 3
const a = find_anchor_closest(noA3, appTarget); if (!a) { /* return */ }

Run results for: find anchor

while distance 3

while distance 0

while no a distance 3

closest distance 3

closest distance 0

closest no a distance 3