Henry: querySelector oder getElementById nicht zwingend notwendig?

Hallo,

mir sind heute ein paar Scripte, von gar nicht mal so unbegabten Leuten, aufgefallen die auf den genannten Ballast schlichtweg verzichten. Ich war überrascht, dass dies überhaupt geht, vor vielen Jahren wars nicht so.

Beispiel:

<!DOCTYPE html>
<html><body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3 id="x">This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<button onclick="alert(x.innerHTML);">Result</buttton>

</body>
</html>

Mal abgesehen davon ob guter/schlechter Stil, ist diese einfache Art der Referenzierung überhaupt erlaubt, oder doch nur eine temporäre Möglichkeit.

Gruss
Henry

--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“

akzeptierte Antworten

  1. Moin,

    Ich war überrascht, dass dies überhaupt geht, vor vielen Jahren wars nicht so.

    Beispiel:

    <!DOCTYPE html>
    <html><body>
    
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3 id="x">This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    
    <button onclick="alert(x.innerHTML);">Result</buttton>
    
    </body>
    </html>
    

    Elemente mit einer ID erzeugen ein gleichnamiges DOM-Elementobjekt als Eigenschaft des window-Objekts. Ich habe jetzt auf die Schnelle kein Zitat aus irgendeiner Spec zur Hand, aber das ist schon gefühlte 1000 Jahre so. Das war schon eine umstrittene Alternative zum proprietären document.all, das AFAIR mit dem IE4 eingeführt wurde - also vor rund 20 Jahren.

    Mal abgesehen davon ob guter/schlechter Stil, ist diese einfache Art der Referenzierung überhaupt erlaubt, oder doch nur eine temporäre Möglichkeit.

    Es ist wohl erlaubt, aber ich finde das Konzept an sich fragwürdig, denn durch die Injektion beliebig benannter Objekte kann es Namenskonflikte mit anderen, vordefinierten Eigenschaften des window-Objekts geben. Viel Spaß bei der Fehlersuche. 😉

    Live long and pros healthy,
     Martin

    --
    Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen.
    1. Hallo Martin,

      das nennt sich „named access on the window object“ und ist standardisiert. Eine der schlechteren Ideen.

      Mal abgesehen davon ob guter/schlechter Stil, ist diese einfache Art der Referenzierung überhaupt erlaubt, oder doch nur eine temporäre Möglichkeit.

      Es ist wohl erlaubt, aber ich finde das Konzept an sich fragwürdig, denn durch die Injektion beliebig benannter Objekte kann es Namenskonflikte mit anderen, vordefinierten Eigenschaften des window-Objekts geben.

      Nein. Jede existierende Eigenschaft sowie jeder via var/let/const/function eingeführte Identifier überschatten das DOM-Element.

      Nichts desto trotz ist das natürlich eine echt schlechte Idee… man muss jetzt, um den Code zu verstehen, auch wissen, dass es ein HTML-Element mit der gleichnamigen ID gibt oder ein applet/object/embed/img-Element mit dem gleichen name-Attribut.

      Viel Spaß bei der Fehlersuche. 😉

      In der Tat…

      Freundliche Grüße,
      Christian Kruse

      1. Hallo Christian,

        das nennt sich „named access on the window object“ und ist standardisiert. Eine der schlechteren Ideen.

        sag ich doch. 😉

        Es ist wohl erlaubt, aber ich finde das Konzept an sich fragwürdig, denn durch die Injektion beliebig benannter Objekte kann es Namenskonflikte mit anderen, vordefinierten Eigenschaften des window-Objekts geben.

        Nein. Jede existierende Eigenschaft sowie jeder via var/let/const/function eingeführte Identifier überschatten das DOM-Element.

        Ah, gut. Dann richtet das zumindest keinen Schaden an, aber ...

        Nichts desto trotz ist das natürlich eine echt schlechte Idee… man muss jetzt, um den Code zu verstehen, auch wissen, dass es ein HTML-Element mit der gleichnamigen ID gibt oder ein applet/object/embed/img-Element mit dem gleichen name-Attribut.

        Genau. Verschleierungstaktik.

        Live long and pros healthy,
         Martin

        --
        Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen.
    2. Hallo Der,

      Es ist wohl erlaubt,

      danke.

      aber ich finde das Konzept an sich fragwürdig, denn durch die Injektion beliebig benannter Objekte kann es Namenskonflikte mit anderen, vordefinierten Eigenschaften des window-Objekts geben. Viel Spaß bei der Fehlersuche. 😉

      Hättest du da ein Beispiel wie du das meinst? Weil,... ah gerade die Antwort von @Christian Kruse gesehen. Wenn ich das richtig verstehe ist das Problem, dass es "x" in diesem Fall zwar als id gibt, könnte aber ausser als ID gleichzeitig als alles möglich im Code auftauchen und dann gibts Konflikte. Richtig?

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. Hallo,

        aber ich finde das Konzept an sich fragwürdig, denn durch die Injektion beliebig benannter Objekte kann es Namenskonflikte mit anderen, vordefinierten Eigenschaften des window-Objekts geben. Viel Spaß bei der Fehlersuche. 😉

        Hättest du da ein Beispiel wie du das meinst? Weil,... ah gerade die Antwort von @Christian Kruse gesehen. Wenn ich das richtig verstehe ist das Problem, dass es "x" in diesem Fall zwar als id gibt, könnte aber ausser als ID gleichzeitig als alles möglich im Code auftauchen und dann gibts Konflikte. Richtig?

        richtig, aber das hatte ich nicht gemeint.
        Ich hatte befürchtet, dass z.B. ein Element <foo id="location"/> den Zugriff auf window.location verhindern könnte. Aber Christian hat ja schon erklärt, dass das nicht der Fall ist.

        Live long and pros healthy,
         Martin

        --
        Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen.
  2. Hallo Henry,

    <h3 id="x">This is heading 3</h3>
    
    console.log(x);
    

    Wenn ich mich recht erinnere, war es eine Unart des IE, der vor langer Zeit damit begonnen hat. Offenbar haben das in der Zwischenzeit die anderen Browser übernommen (siehe auch SO)

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.