Run results for: document.getElementById vs GetChildElementById

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:68.0) Gecko/20100101 Firefox/68.0

Browser: Firefox 68

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
Native method	2225290.0 Ops/sec
Custom method	897395.1 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