Seltsames JavaScript

giesbert

Hibernal
Registriert
20.09.14
Beiträge
1.998
Ich bin da zufällig über ein eigenartiges Verhalten von JS gestolpert, das ich mir nicht erklären kann: Es ist möglich - nicht immer, aber sehr oft - ein HTML-Element direkt über seine ID anzusprechen, ohne es zuvor mit getElementById bzw. querySelector ausgewählt zu haben, so zB:

Code:
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script>
      function test() {
        testh1.innerHTML = "Sollte nicht funktionieren, tut's aber …";
      }
    </script>
  </head>
  <body>
    <h1 id="testh1" onclick="test()">Das ist ein Test</h1>
  </body>
</html>
Das funktioniert in allen Browsern, ist also anscheinend ein gewolltes Verhalten. Mir ist das völlig neu. Hat dafür jemand eine Erklärung?
 

Wuchtbrumme

Golden Noble
Registriert
03.05.10
Beiträge
21.417
ich bin jetzt überhaupt kein JavaScript-Crack, nicht im Geringsten, aber wäre es nicht eine Erklärung, wenn der Browser den Body-Teil zuerst liest bzw. Objekte im Script-Teil auch frei referenziert werden können, sofern dann später noch die Instanz richtig benamst wird?
 

giesbert

Hibernal
Registriert
20.09.14
Beiträge
1.998
ich bin jetzt überhaupt kein JavaScript-Crack, nicht im Geringsten, aber wäre es nicht eine Erklärung, wenn der Browser den Body-Teil zuerst liest bzw. Objekte im Script-Teil auch frei referenziert werden können, sofern dann später noch die Instanz richtig benamst wird?
Nicht wirklich. Bzw. wenn das so wäre - warum gibt es dann documet.querySelector("#id") bzw. document.getElementById("id"): die sind dann ja überflüssig, weil man jedes Element dann direkt mit id.Eigenschaft ansprechen könnte. Kann man aber nicht. Ich hab jetzt kein Beispiel parat, aber mir sind auch Fälle untergekommen, wo das direkte Ansprechen nicht funktioniert, darauf kann man sich also nicht verlassen. Ich verstehe das einfach nicht. Und wie gesagt: es ist mir völlig neu, dass das überhaupt (manchmal) funktioniert.
 

giesbert

Hibernal
Registriert
20.09.14
Beiträge
1.998
Das Verhalten scheint gewollt zu sein, ist aber wohl (noch?) nicht konsistent implementiert. Immerhin bin ich mit meiner Verwunderung nicht allein ;):

DOM elements with ID's are global variables
[…]
I have no idea how well known this is. I certainly did not know about it but, admittedly, I haven't spent a lot of time in the browser in many years. I've reached out to all of the frontend developers I know and none of them knew about this either.
[…]
 

GoodGuy

Granny Smith
Registriert
02.12.12
Beiträge
12
Der "named access" wurde schon vor einiger Zeit in die HTML5 Spezifikation aufgenommen. Mehr darüber kann in der Spezifikation selbst nachgelesen werden (Hier) . Es wird jedoch ausdrücklich dazu geraten, diese Funktionalität eher zu unterlassen und stattdessen
Code:
document.getElementById()
oder
Code:
document.querySelector()
zu verwenden.