Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

GetElementById vs. QuerySelector

blog.wesleyac.com

Post reply on HN
Print view View original

31–40 of 100 posts

Re: GetElementById vs. QuerySelector

#31

Post by chrismorgan »

akersten wrote: post #17

> ignores the first 5 results (to avoid caching effects). This would be the correct approach if you're interested in the "sterile laboratory" performance of these APIs. But the average webpage is going to not be doing a bunch of throwaway work before it starts selecting elements. I think it would actually be much more interesting to see the cold start results to see if they're comparable to each other. Hypothetically…

Unless you are accessing elements by ID ridiculously often, the time taken will be utterly unnoticeable rounding error (far below one millisecond). But if the difference is enough to skew the benchmarks, then it makes perfect sense to remove them. (In practice, on removing the skipping, I see no significant evidence that it actually makes a difference.)

Re: GetElementById vs. QuerySelector

#32

Post by rudasn »

LeonB wrote: post #15
simlevesque wrote: post #3

Edit: seems like I'm wrong. They are both completely different and almost no one mentions how they differ in these comparison blog articles. querySelector return a static node while getElementById returns a live node. If the element returned by getElementById is deleted in the DOM, the variable becomes unavailable while for querySelector you get a snapshot of the node that lives on. If you use both of them the same w…

The responses to this are a fantastic example of Cunningham’s Law at work. Thank you!

Yeah, I surprised to even see those two terms on an article on HN (who uses getElementById or querySelectors nowadays right?) but I was even more surprised by the number of comments it gathered (which are of course unrelated to the original article)

Re: GetElementById vs. QuerySelector

#33

Post by JoelEinbinder »

kasajian wrote: post #23
anderskaseorg wrote: post #10

Earlier quoted context omitted.

You are misreading the documentation. There's no such distinction as live node vs. static node in that sense. There's only a distinction between a live node list and a static node list. This is a difference between getElementsByClassName("foo") and querySelectorAll(".foo"), but not between getElementById("foo") and querySelector("#foo"). The difference is whether membership changes in the collection are reflected imm…

spookily?

Its a reference to Einstein's spooky [action at a distance](https://en.wikipedia.org/wiki/Action_at_a_distance)

Re: GetElementById vs. QuerySelector

#34

Post by lhorie »

chrismorgan wrote: post #16

Related: one of my favourite code golfing tricks is named access on the Window object https://html.spec.whatwg.org/multipage/window-object.html#na... >: document.getElementById("result").textContent = "Why do it this way—"; document.querySelector("result").textContent = "—or even this way—"; result.textContent = "—when you can do it this way?"; Edit: adding another similar test to this page, window[`test${i}`] is tak…

> code golfing tricks

> window[`test${i}`]

surely you must mean `eval('test'+i)` :)

Re: GetElementById vs. QuerySelector

#35

Post by chrismorgan »

lhorie wrote: post #34
chrismorgan wrote: post #16

Related: one of my favourite code golfing tricks is named access on the Window object https://html.spec.whatwg.org/multipage/window-object.html#na... >: document.getElementById("result").textContent = "Why do it this way—"; document.querySelector("result").textContent = "—or even this way—"; result.textContent = "—when you can do it this way?"; Edit: adding another similar test to this page, window[`test${i}`] is tak…

> code golfing tricks > window[`test${i}`] surely you must mean `eval('test'+i)` :)

Well, that was actually what I wrote first for benchmarking, but I gave up waiting for it to finish. eval is slow.

Re: GetElementById vs. QuerySelector

#36

Post by jaynetics »

rudian wrote: post #19

Please don't listen to this, it's misleading. querySelector *does not* take 62ms to run. Both of them take 0.01ms at most, try it yourself. This is the sort of micro optimization you should not concern yourself with. How often do you need to select unique elements by ID? Don't use IDs in the first place. This is akin to using `i--` in loops to "speed up your code" — we're past that.

> This is the sort of micro optimization you should not concern yourself with.

Not as an app dev, but if you transpile your code anyway, a transpiler plugin that does this and similar optimizations could be neat.

Re: GetElementById vs. QuerySelector

#37

Post by iKevinShah »

rudian wrote: post #19

Please don't listen to this, it's misleading. querySelector *does not* take 62ms to run. Both of them take 0.01ms at most, try it yourself. This is the sort of micro optimization you should not concern yourself with. How often do you need to select unique elements by ID? Don't use IDs in the first place. This is akin to using `i--` in loops to "speed up your code" — we're past that.

> How often do you need to select unique elements by ID? Don't use IDs in the first place.

wait a minute, does everyone NOT use IDs for unique elements on page (not each element)? I mean I am genuinely interested in knowing why not to use IDs. There are unique elements which need to be selected on a page like #logout or something.

Re: GetElementById vs. QuerySelector

#38

Post by agys »

Jamie9912 wrote: post #18

Why is Chrome so slow with this? Does anyone know

It’s Firefox that has become fast…!

This is totally unscientific, but I like to write experimental apps that manipulate the DOM heavily and Firefox is very often the fastest between Chrome and Safari in repainting the DOM (this wasn’t the case ~3 years ago).

Re: GetElementById vs. QuerySelector

#39

Post by flomo »

ducharmdev wrote: post #20
chrismorgan wrote: post #16

Related: one of my favourite code golfing tricks is named access on the Window object https://html.spec.whatwg.org/multipage/window-object.html#na... >: document.getElementById("result").textContent = "Why do it this way—"; document.querySelector("result").textContent = "—or even this way—"; result.textContent = "—when you can do it this way?"; Edit: adding another similar test to this page, window[`test${i}`] is tak…

Woah, no way. Although I could see this being abused, it's amazing that this even works.

This was the standard way of DOM touching in the early days, e.g.

  FormName.FieldName.value = "foo";

Re: GetElementById vs. QuerySelector

#40

Post by olavgg »

rudasn wrote: post #32
LeonB wrote: post #15

Earlier quoted context omitted.

The responses to this are a fantastic example of Cunningham’s Law at work. Thank you!

Yeah, I surprised to even see those two terms on an article on HN (who uses getElementById or querySelectors nowadays right?) but I was even more surprised by the number of comments it gathered (which are of course unrelated to the original article)

I use them all the time.
Post reply on HN