Is getElementById() efficient?

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.

So you don't want to use [jQuery](http://jquery.com/)? They did it for you. `getElementById("id1");` == `$('#id1')` — Ron van der Heijden, Sep 20 '12 at 14:38
I am unable to use jQuery or other imported Libraries. It has to be bland JavaScript. Sad, huh? — Jon, Sep 20 '12 at 14:40
WHAT?!?! You can use javascript but you can't use javascript? — Ron van der Heijden, Sep 20 '12 at 14:41
@Bondye: What do you mean? jQuery doesn't make it faster. It's basically boils down to `getElementById` plus constructing a set etc. — pimvdb, Sep 20 '12 at 14:42
jQuery would make things slower as it's yet another library to load. — SMBiggs, Sep 16 '17 at 18:04

score 20 · Accepted Answer · edited May 23 '17 at 11:47

20

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.

edited May 23 '17 at 11:47

Community

1
1

answered Sep 20 '12 at 14:40

Laoujin

9,962
7
42
69

15

neglectable (something you can neglect) != negligable (something so small as to be unmesurable) – Jamiec Sep 20 '12 at 14:46
Neglectable? Maybe for web application, but surely not if you develop a JS game! I think it's worth to mention – Lis Oct 02 '18 at 15:52
It would be more interesting to benchmarks performed on DOM trees having deep hierarchies and numerous nodes. – Lonnie Best Dec 01 '18 at 21:55

Konstantin Dinev · Answer 2 · 2016-08-18T09:00:43.107

8

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.com/getelementbyid-vs-everyone-else

edited Aug 18 '16 at 09:00

answered Sep 20 '12 at 14:41

Konstantin Dinev

34,219
14
75
100

score 4 · Answer 3 · answered Sep 20 '12 at 14:38

4

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

answered Sep 20 '12 at 14:38

Simon

7,182
2
26
42

Is getElementById() efficient?

3 Answers3

Linked