Earlier quoted context omitted.
Is there a reason to not use querySelector, since it’s a lot more flexible? One reason jQuery became so popular is because the DOM was painful to use. Things like querySelector fix that.
BTW, in my experience getElementById() is still fastest.
Named element IDs can be referenced as JavaScript globals
61–70 of 113 posts
Re: Named element IDs can be referenced as JavaScript globals
#62This was mostly useful back in the days when we had to manually query dom during development and debugging. I've seen some pretty horrible things but never have I seen this in a codebase, not even in a commit
Re: Named element IDs can be referenced as JavaScript globals
#63Another similar gotcha is that the global-scoped `name` variable must be a string. See https://developer.mozilla.org/en-US/docs/Web/API/Window/name for details. var name = true; typeof name; // "string", not "boolean" Luckily, this is not true within ES modules which you probably use most of the time anymway.
It takes a special kind of human to name variable "name" but not have it be a string.
Re: Named element IDs can be referenced as JavaScript globals
#64I'm surprised to find that this trick still works even in the new backwards-incompatible JavaScript Modules (using ), which enables "strict" mode and a number of other strictness improvements by default. I believe it works because the global object ("globalThis") is the Window in either case; this is why JavaScript Modules can refer to "window" in the global scope without explicitly importing it. cool console.log(thi…
1: https://github.com/tc39/proposal-shadowrealm
Re: Named element IDs can be referenced as JavaScript globals
#65Here's a minimal example (https://jsfiddle.net/wc5dn9x2/):
// The img object
console.log(document.getElementById);
// TypeError: document.getElementById is not a function :D
console.log(document.getElementById('asdf'));
I tried poking around for security vulnerabilities with this but couldn't find any :(It seems that the names overwrite properties on document with themselves only for these elements: embed form iframe img object
Edit: Here's how I found this: https://jsfiddle.net/wc5dn9x2/1/
Re: Named element IDs can be referenced as JavaScript globals
#66I don't want to sound like I have an axe to grind (but I do), but this is the kind of feature/wart that shows the age of the HTML/CSS/JS stack. The whole thing is ripe for a redo. I know they get a lot of hate, but of all the big players in this space I think FB is the best equipped to do this in a way that doesn't ruin everything. I just wonder if they have an incentive (maybe trying to break the Google/MS hegemony…
Could you explain how rewriting one of the worlds most complex and critical specifications would break of the Google/MS hegemony on search?
"If FB decided to try and break into search, then they might decide to attack the HTML/CSS/JS stack."
Not the other way around.
Re: Named element IDs can be referenced as JavaScript globals
#67Earlier quoted context omitted.
It takes a special kind of human to name variable "name" but not have it be a string.
Something like name = {first: "Jane", last: "Doe"} isn't obviously unreasonable. Which actually sets name to the string "[object Object]".
Re: Named element IDs can be referenced as JavaScript globals
#68The global scope polluter has pretty bad performance and interop surprises, you shouldn't depend on it and instead use getElementById even if it's a bit more verbose. It uses a property interceptor which is fairly slow in v8: https://source.chromium.org/chromium/chromium/src/+/main:out... to call this mess of security checks: https://source.chromium.org/chromium/chromium/src/+/main:thi... which has this interop surpr…
Re: Named element IDs can be referenced as JavaScript globals
#69Should read “rigamarole”
Re: Named element IDs can be referenced as JavaScript globals
#70The global scope polluter has pretty bad performance and interop surprises, you shouldn't depend on it and instead use getElementById even if it's a bit more verbose. It uses a property interceptor which is fairly slow in v8: https://source.chromium.org/chromium/chromium/src/+/main:out... to call this mess of security checks: https://source.chromium.org/chromium/chromium/src/+/main:thi... which has this interop surpr…
Is there a reason to not use querySelector, since it’s a lot more flexible? One reason jQuery became so popular is because the DOM was painful to use. Things like querySelector fix that.
getElement is slightly faster, but not by enough to care IIRC so I use querySelector for consistency and it's flexibility.
> One reason jQuery became so popular is because the DOM was painful
I would say that is the key reason, with everything else being collateral benefits. Assuming you combine element selection, dealing with legacy incompatibilities, and function chaining to reduce boilerplate code, under the same banner of "making the DOM less painful".