Named element IDs can be referenced as JavaScript globals(css-tricks.com)

    <script>
        var _value = "test value";
        Object.defineProperty(window, "testName", {
            get: () => _value,
            set: (value) => { _value = String(value) },
        });
    </script>
    <script>
        var testName = {};
        // prints [object Object] string
        console.log(testName, typeof testName);
        var name = {};
        // prints [object Object] string
        console.log(name, typeof name);
    </script>

  <div id="foo"></div>
  <script>
    const { foo } = document.all
    // do something with foo
  </script>

    // proxy to simplify loading and caching of getElementById calls
    const $id = new Proxy({}, {
        // get element from cache, or from DOM
        get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))),
        
        // prevent overwriting
        set: () => $throw(`Attempt to overwrite id cache key!`)
    });

    <div id="something></div>

    $id.something.innerHTML = 'inside!';