Is getElementById() efficient? [duplicate]

Question

I often use the method getElementById("id1"); in my methods. I use it to find certain elements in my HTML. I wonder if I need to be concerned about how much I use it if it has to search the entire DOM every time.

How does this method work? Does it parse the DOM and return the element when it is found, or does it have all those values indexed somehow and so is able to return more quickly?

P.S. I am curious about the method in general, but I am using an Android WebView if that makes any difference.

Wargo

So you don't want to use jQuery? They did it for you. getElementById("id1"); == $('#id1') – Much

I am unable to use jQuery or other imported Libraries. It has to be bland JavaScript. Sad, huh? – Wargo

WHAT?!?! You can use javascript but you can't use javascript? – Much

@Bondye: What do you mean? jQuery doesn't make it faster. It's basically boils down to getElementById plus constructing a set etc. – Bille

jQuery would make things slower as it's yet another library to load. – Infrared

Answer 1

getElementById is very fast and you shouldn't have to worry about performance.

If you are using the same ID over and over (and over and over) again, you might want to cache it. The performance gain is neglectable:

var myId = getElementById("myId");
myId.operation1();
myId.operation2();
myId.andSome5000MoreCalls();

Check this SO answer for some benchmarks. The results Mike posted were:

IE8 getElementById: 0.4844 ms
IE8 id array lookup: 0.0062 ms

Chrome getElementById: 0.0039 ms
Chrome id array lookup: 0.0006 ms

Firefox 3.5 was comparable to chrome.

Florella

neglectable (something you can neglect) != negligable (something so small as to be unmesurable) – Parada

Neglectable? Maybe for web application, but surely not if you develop a JS game! I think it's worth to mention – Schurman

It would be more interesting to benchmarks performed on DOM trees having deep hierarchies and numerous nodes. – Wheaton

Answer 2

In fact getElementById is the fastest way to access an element in the DOM. Indexing depends on the specific browser, but here is a benchmark for it:

http://jsperf.app/getelementbyid-vs-everyone-else

Addis

Answer 3

Elements with IDs are indeed indexed, selecting an element by its ID through the DOM function is the most efficient way of selection.

Fiord