Is getElementById or getElementsByClassName[0] faster?

Polar

Is it faster to use getElementById

document.getElementById('foo').style.visibility = 'visible';

or getElementByClassName[0]

document.getElementsByClassName('foo')[0].style.visibility = 'visible';

I have read that too many IDs can hamper performance, which is why I am trying to shy away from IDs. But if it is faster to use an ID for a quick JavaScript lookup, I will gladly do so.

vanowm

getElementById would be the fastest method, since it's simple table lookup.

getElementsByClassName the same as querySelector almost twice as slow.

For best performance use ids for javascript and classes for CSS.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Change from getElementById to getElementsByClassName

How to change getElementbyId to getElementsbyClassName

How to change getElementbyID script to getElementsbyclassname?

querySelectorAll faster for animations than getElementsByClassName?

Modify script to appendChild using getElementsByClassName instead of getElementById

querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript

getElementById returning null but getElementsByClassName works, why?

How do I getElementsByClassName instead of getElementById here?

getElementsByClassName doesn't work, but getElementById does?

Is if(!a) faster than if(a==0)?

Is >0 faster than !=0 for an int?

Replace getelementbyid with getelementsbyclassname in w3CodeColor javascript function

Javascript to move focus onkeyup getElementById Works getElementsByClassName does not

document.getElementById().value truncating the seconds if it is 0

Which is faster int[0] or AtomicInteger?

In `document.getElementById('id')[0]` - what does the [0] means?

Why is list(x for x in a) faster for a=[0] than for a=[]?

Faster byte math for subtraction with min of 0

What is faster: SUM over NULL or over 0?

in python why if rank: is faster than if rank != 0:

How to do jasmine test case for display none css property using documet.getElementById and getElementsByClassName

Why is (a*b != 0) faster than (a != 0 && b != 0) in Java?

Will an update statement to 0 be generally faster if 0 values are excluded from the update?

Theoretically, is comparison between 0 and 255 faster than 0 and 1?

getElementById in Safari

not ready getElementById

'getElementById' on HTMLelement

getElementById in React

getElementById in Purescript