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/109.0.0.0 Safari/537.36

Browser: Chrome 109

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
parentElement	8619861.0 Ops/sec
closest tag	10504910.0 Ops/sec
closest class	10061200.0 Ops/sec
closest tag class	9319441.0 Ops/sec
parentNode	14286790.0 Ops/sec
closestParentNode	7624971.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