Live data from Hacker News

Named element IDs can be referenced as JavaScript globals

css-tricks.com

61–70 of 113 posts

Re: Named element IDs can be referenced as JavaScript globals

#61

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.

The performance difference is negligible. Both methods can return 70k-100k selections in 10ms.

Re: Named element IDs can be referenced as JavaScript globals

#62

This 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

I remember using it on the first Javascript I ever used around 20 years ago. I naively assumed that the DOM was like state in a more procedural language and this variable trick played into that.

Re: Named element IDs can be referenced as JavaScript globals

#63
post #41
post #8

Another 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.

I can imagine someone doing this if they were using "name" as a verb

Re: Named element IDs can be referenced as JavaScript globals

#64

I'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…

There is some effort to standardize something along these lines. Well, some things which combined would achieve this. It’s too late to bake it into ESM, but I believe it’ll be possible with ShadowRealms[1] and/or SES[2], and Built-in Modules (JS STL)[3].

1: https://github.com/tc39/proposal-shadowrealm

2: https://github.com/tc39/proposal-ses

3: https://github.com/tc39/proposal-built-in-modules

Re: Named element IDs can be referenced as JavaScript globals

#65
I don't think this article is complete. It mentions no pollution, which is true of window and most HTML elements, but not always. Check this out, you can set an img name to getElementById and now document.getElementById is the image element!

Here'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

#66
post #42
post #21

I 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?

Sorry, what I meant was:

"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

#67
post #41

Earlier 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]".

Falsehoods programming languages believe about names.

Re: Named element IDs can be referenced as JavaScript globals

#68
post #40

The 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…

I really wish in the source code it was actually named globalScopePolluter()

Re: Named element IDs can be referenced as JavaScript globals

#70
post #40

The 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.

> Is there a reason to not use querySelector

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".

Post reply on HN