Run results for: parent vs closest 555

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 OPR/94.0.0.0

Browser: Opera 94

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
parentElement	6941340.0 Ops/sec
closest tag	8579541.0 Ops/sec
closest class	8248858.0 Ops/sec
closest tag class	7423773.0 Ops/sec
parentNode	11305820.0 Ops/sec
closestParentNode	6537261.0 Ops/sec

HTML Preparation code:

<span class="span">
    <div id='it'>
    </div>
</span>

Script Preparation code:

var it = document.getElementById("it");

function closestParent(element, className) {
    if (element.classList.contains(className)) return element;
    if (!element.parentNode) return null;
    if (element.parentNode.classList.contains(className)) return element.parentElement;
    return null;
  }

Tests:

parentElement
while (it !== null && it.className.indexOf("span") === -1) { it = it.parentElement; }
closest tag
it.closest('span')
closest class
it.closest('.span')
closest tag class
it.closest('span.span')
parentNode
while (it.className.indexOf("span") === -1) { it = it.parentNode; if(it === document) { it = null break } }
closestParentNode
closestParent(it, 'span');

Run results for: parent vs closest 555

parentElement

closest tag

closest class

closest tag class

parentNode

closestParentNode