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

61–70 of 100 posts

Re: GetElementById vs. QuerySelector

#61

Post by seumars »

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…

Love this trick. It should be noted that the element is added to the window object as long as the id follows the syntax of a valid javascript variable (meaning no dashes).

Re: GetElementById vs. QuerySelector

#62

Post by vgallur »

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.

There are XSS attacks abusing this behaviour named DOM Clobbering

https://portswigger.net/research/dom-clobbering-strikes-back

Re: GetElementById vs. QuerySelector

#63

Post by bobince »

greggman3 wrote: post #52

I'm getting getElementById is 2x to 4x faster than querySelector depending on the browser https://jsbenchit.org/?src=25e097f939f76b559b2515430fb5e459 I'm a little surprised. Sure i'd expected getElementById to be faster but honestly I'd have expected browser implementation of querySelector to do a relatively trivial up front check, is the selector a simple id, if so, call getElementById. I suppose that adds overheads…

Flexible is a double-edged sword. `querySelector` is bringing in the added complexity of selector syntax, which is more stuff to think about that isn't relevant to what you're trying to do.

For example now you have to worry about whether there are any characters in the ID that need escaping in a selector (eg `.`), something that may not be easy to verify when formatting an ID out of variables.

So I'd suggest preferring getElementById for its directness, rather than for micro-optimisation reasons.

(In principle the same should be true for getElementsByClassName, but the live NodeLists returned by that method are a trap for the unwary, so neither option is ideal.)

Re: GetElementById vs. QuerySelector

#64

Post by asddubs »

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…

I would seriously not recommend doing this, because it's terrible at communicating intent. Yes, it works, but someone else (if you're lucky) or you will be staring at a variable that seems to have come out of nowhere trying to figure out what's going on sooner or later. Especially if the HTML id inadvertently got changed without changing the variable in kind

Re: GetElementById vs. QuerySelector

#66

Post by da_chicken »

samastur wrote: post #56
snovv_crash wrote: post #53

Earlier quoted context omitted.

Glad to hear that Javascript is such a simple language and only experts should use things like C++.

This is an API issue (DOM), not a language one.

Deflecting to semantics or categorization isn't a defense.

Re: GetElementById vs. QuerySelector

#68

Post by orangepanda »

asddubs wrote: post #64
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…

I would seriously not recommend doing this, because it's terrible at communicating intent. Yes, it works, but someone else (if you're lucky) or you will be staring at a variable that seems to have come out of nowhere trying to figure out what's going on sooner or later. Especially if the HTML id inadvertently got changed without changing the variable in kind

It's great for quickly fiddling around in the dev console.

Similarly - $0 gives access to currently selected element

Re: GetElementById vs. QuerySelector

#69

Post by asddubs »

orangepanda wrote: post #68
asddubs wrote: post #64

Earlier quoted context omitted.

I would seriously not recommend doing this, because it's terrible at communicating intent. Yes, it works, but someone else (if you're lucky) or you will be staring at a variable that seems to have come out of nowhere trying to figure out what's going on sooner or later. Especially if the HTML id inadvertently got changed without changing the variable in kind

It's great for quickly fiddling around in the dev console. Similarly - $0 gives access to currently selected element

sure, for throwaway code anything goes of course

Re: GetElementById vs. QuerySelector

#70

Post by jfrunyon »

tentacleuno wrote: post #49
minitech wrote: post #8

Earlier quoted context omitted.

That’s incorrect. Maybe you’re thinking of querySelectorAll, which returns a static list , compared to getElementsByTagName and getElementsByClassName, which return live ones?

I wonder why we need all these different collections. Makes the DOM feel hacked together by lots of totally different people not communicating (?) There's probably a reason, though.

That's because it was hacked together by lots of totally different people not communicating. Over a couple of decades, no less.
Post reply on HN