Hacker News new | ask | show | jobs
by chrismorgan 1668 days ago
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...>:

  <div id=result></div>
  <script>
      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?";
  </script>
Edit: adding another similar test to this page, window[`test${i}`] is taking roughly twice as long as document.querySelector(`#test${i}`) in Firefox, but only half as long in Chromium—which is still a bit slower than document.getElementById(`test${i}`) in Chromium, and than window[`test${i}`] in Firefox.
6 comments
asddubs 1667 days ago
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
link
chrismorgan 1667 days ago
The spec appropriately points out that this is a fragile technique.

Also to avoid any doubt: if something’s called a golfing trick, you almost certainly shouldn’t use it on normal code.

I confess I use this technique on every page on my website, in my carefully-golfed light/dark mode switcher. (https://chrismorgan.info/blog/dark-theme-implementation/ has a slightly-expanded version of it, and uses a more sensible document.querySelector instead.)

link
orangepanda 1667 days ago
It's great for quickly fiddling around in the dev console.

Similarly - $0 gives access to currently selected element

link
asddubs 1667 days ago
sure, for throwaway code anything goes of course
link
zerocount 1668 days ago
Bug fix: document.querySelector("#result")...

querySelector needs the '#' in this case.

link
ducharmdev 1668 days ago
Woah, no way. Although I could see this being abused, it's amazing that this even works.
link
esnard 1668 days ago
It has been abused to allow remote code execution in LastPass, a password manager.

https://bugs.chromium.org/p/project-zero/issues/detail?id=12...

link
JimDabell 1667 days ago
You could also crash Internet Explorer 6 simply by including an element with id="tags" on the page. When the user chose to print the page out, the browser would try to access window.tags, find the element instead of what it was expecting to find, and give up.
link
flomo 1668 days ago
This was the standard way of DOM touching in the early days, e.g.

  FormName.FieldName.value = "foo";
link
vgallur 1667 days ago
There are XSS attacks abusing this behaviour named DOM Clobbering

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

link
lhorie 1668 days ago
> code golfing tricks

> window[`test${i}`]

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

link
chrismorgan 1668 days ago
Well, that was actually what I wrote first for benchmarking, but I gave up waiting for it to finish. eval is slow.
link
seumars 1667 days ago
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).
link
chrismorgan 1667 days ago
False on two counts:

1. It doesn’t need to be a valid JavaScript identifier, though if it isn’t you’ll need to use subscripting syntax to access it:

  > document.body.id = "like-this";
  > window["like-this"]
  <body id="like-this">
2. It’s not added to the window object; rather, property lookup on a window object falls back to looking up elements by ID if there is no such property:

  > typeof example
  "undefined"
  > document.body.id = "example";
  > example
  <body id="example">
  > example = "no longer an element";
  > example
  "no longer an element"
  > delete example;
  true
  > example
  <body id="example">
link
keeganpoppen 1667 days ago
> one of my favourite

one of? you have tricks better than this? this is so fucking spicy holy cow. how did i not know this? excuse me while i add this to all my future code for no good reason :).

link