Run results for: document.getElementById vs GetChildElementById

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser: Chrome 121

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Native method	31543246.0 Ops/sec
Custom method	2971898.0 Ops/sec

HTML Preparation code:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="parent" class="parent_class">
      AAA
      <div id="child" class="child_class">
        content
      </div>
      BBB
    </div>
  </body>
</html>

Script Preparation code:

/**
 * Function will get element by id starting from specified node.
 * Author: Renato Bebić <renato.bebic@gmail.com>
 *
 */
function GetChildElementById(dNode, id) {
	var dResult = null;

	if (dNode.getAttribute('id') == id)
		return dNode;

	for (var i = 0; i < dNode.childNodes.length; i++) {
		if (dNode.childNodes[i].nodeType == 1) {
			dResult = GetChildElementById(dNode.childNodes[i], id);
			if (dResult != null)
				break;
		}
	}

	return dResult;
}

Tests:

Native method
var el = document.getElementById('child'); var className = el.className;
Custom method
var x = document.getElementById('parent'); var el = GetChildElementById(x, 'child'); var className = el.className;

Run results for: document.getElementById vs GetChildElementById

Comparing speed of getting element by id with two different methods.

Native method

Custom method