Warum verwenden wir in JavaScript nicht einfach Element-IDs als Bezeichner?

Alle Browser, mit denen ich arbeite, erlauben den Zugriff auf ein Element id="myDiv" indem du einfach schreibst:

myDiv

Siehe hier: http://jsfiddle.net/L91q54Lt/

Wie auch immer, diese Methode scheint ziemlich schlecht dokumentiert zu sein, und tatsächlich erwähnen die Quellen, auf die ich stoße, sie nicht einmal und gehen stattdessen davon aus, dass man sie verwenden würde

document.getElementById("myDiv")

oder vielleicht

document.querySelector("#myDiv")

auf ein DOM-Element zugreifen, auch wenn seine ID im Voraus bekannt ist (dh nicht zur Laufzeit berechnet wird). Ich kann sagen, dass die letzteren Ansätze den Vorteil haben, den Code sicher aufzubewahren, falls jemand versehentlich versucht, ihn neu zu definieren myDiv in einem größeren Umfang (allerdings keine so brillante Idee …), überschreibt es mit einem anderen Wert und fährt fort, ohne den Konflikt zu bemerken.

Aber sonst das? Gibt es Bedenken bei der Verwendung der obigen Kurzform außer dem Codedesign, oder was fehlt mir hier noch?

Wie auch immer, diese Methode scheint ziemlich schlecht dokumentiert zu sein, und tatsächlich wird sie in den Quellen, auf die ich stoße, nicht einmal erwähnt […]

Abgesehen von der Abhängigkeit von implizit deklarierten globalen Variablen ist der Mangel an Dokumentation ein guter Grund, sie nicht zu verwenden.

Die offensichtliche Förderung von id Werte in globale Variablen ist nicht standardkonform (die HTML5-Spezifikation für das ID-Attribut erwähnt es nicht) und daher sollten Sie nicht davon ausgehen, dass zukünftige Browser es implementieren werden.

EDIT: Es stellt sich dieses Verhalten heraus ist standardkonform – In HTML5, window sollte den Eigenschaftszugriff auf “Benannte Elemente” unterstützen:

Benannte Objekte mit dem Namen name sind für die Zwecke des obigen Algorithmus solche, die entweder:

• untergeordnete Browserkontexte des aktiven Dokuments, dessen Name lautet Name,
• a-, applet-, area-, embed-, form-, frameset-, img- oder object-Elemente, die ein name content-Attribut haben, dessen Wert ist Nameoder
• HTML-Elemente mit einem Ich würde Inhaltsattribut, dessen Wert ist Name.

Quelle: HTML 5-Spezifikation, „Benannter Zugriff auf Fensterobjekt“, Betonung von mir.

Ausgehend davon ist die Einhaltung von Standards kein Grund, dieses Muster zu vermeiden. Die Spezifikation selbst rät jedoch von ihrer Verwendung ab:

Wenn Sie sich darauf verlassen, führt dies in der Regel zu sprödem Code. Welche IDs letztendlich dieser API zugeordnet werden, kann im Laufe der Zeit variieren, wenn beispielsweise neue Funktionen zur Webplattform hinzugefügt werden. Verwenden Sie stattdessen
document.getElementById() oder document.querySelector().

Tolle Frage. Wie Einstein wahrscheinlich nicht gesagt hat, sollten die Dinge so einfach wie möglich sein, und nicht einfacher.

Letztere Ansätze haben den Vorteil, dass der Code sicher bleibt, wenn jemand versehentlich versucht, myDiv in einem größeren Umfang neu zu definieren (jedoch keine so brillante Idee …), es mit einem anderen Wert überschreibt und fortfährt, ohne den Konflikt zu bemerken

Das ist der Hauptgrund, warum dies eine schlechte Idee ist, und es ist völlig ausreichend. Auf globale Variablen kann man sich nicht sicher verlassen. Sie können jederzeit von jedem Skript, das auf der Seite ausgeführt wird, überschrieben werden.

Außerdem einfach eintippen myDiv ist keine „Kurzform“ von document.getElementById(). Es ist ein Verweis auf eine globale Variable.document.getElementById() werde gerne wiederkommen null Wenn das Element nicht vorhanden ist, wird beim Versuch, auf eine nicht vorhandene globale Variable zuzugreifen, ein Referenzfehler ausgelöst, sodass Sie Ihre Referenzen auf die globale Variable in einen Try/Catch-Block einschließen müssen, um sicher zu sein.

Dies ist einer der Gründe, warum jQuery so beliebt ist: Wenn Sie es tun $("#myDiv").remove()und es gibt kein Element mit einer ID von myDivwird kein Fehler ausgegeben – der Code wird einfach stillschweigend nichts tun, was oft genau das ist, was Sie bei der DOM-Manipulation wollen.

Es gibt ein paar Gründe:

Sie möchten nicht, dass Ihr Code und Ihr Markup so gekoppelt sind.

Indem Sie einen bestimmten Aufruf verwenden, um auf ein div zuzugreifen, müssen Sie sich keine Sorgen machen, dass der globale Speicherplatz beschädigt wird. Fügen Sie eine Bibliothek hinzu, die deklariert myDiv im globalen Raum und Sie befinden sich in einer Welt voller Schmerzen, die schwer zu beheben sein werden.

Sie können über die ID auf Elemente zugreifen, die nicht Teil des DOM sind

Sie können sich in einem Fragment, einem Frame oder einem Element befinden, das gelöst und noch nicht wieder an das DOM angefügt wurde.

BEARBEITEN: Beispiel für den Zugriff auf nicht angehängte Elemente durch ID

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.id = "span-test";
frag.appendChild(span);
var span2 = frag.getElementById("span-test");
alert(span === span2);

In meinem Fall hatte ich einen Iframe in meiner Seite. Ich war verwirrt von id Attribut vs name -Attribut, die sich beide auf eine Variable mit dem Namen auswirkten inner_iframezugänglich von window!

• Wenn ich nur die benutzte id-Attributwie id="inner_iframe", window.inner_iframe ist ein HTMLIFrameElement. Eigenschaften umfassen inner_iframe.contentDocument und inner_iframe.contentWindow wie hier beschrieben*

  • In diesem Fall gehe ich davon aus, dass die Variable auf erscheint window wegen dem grund zitiert von @joew in der akzeptierten Antwort:
    

    HTML-Elemente mit einem Ich würde Inhaltsattribut, dessen Wert name ist

• Wenn ich nur die benutzte Namensattributwie name="inner_iframe" dann window.inner_iframe ist ein “Rahmen”, auch bekannt als a “Fensterobjekt”. contentWindowdaher das Namensattribut inner_iframe nicht Eigenschaften haben contentDocument oder contentWindow.

  • Ich vermute die inner_iframe Variable erscheint auf window wegen dem grund zitiert von @joew in der akzeptierten Antwort
    

    Untergeordnete Browsing-Kontexte des aktiven Dokuments, dessen Name ist Name

• Wenn ich verwendet habe beide name und id Attribute, und ich habe beiden Attributen den gleichen Wert gegeben name="inner_iframe" id="inner-iframe"; das name Attribut übertrumpft / verprügelt die id Attribut; Mir blieb das “Fensterobjekt”, nicht das HTMLIFrameElement!

Mein Punkt ist also, mit Mehrdeutigkeiten vorsichtig zu sein; der Konflikt zwischen name und id Attribute für dasselbe Objekt mit zwei verschiedenen APIs: Dies ist nur ein Sonderfall, in dem implizites Verhalten und Anhängen an eine Fenstervariable Sie verwirren können.

*(und nur wenn die <script> wurde nach/unter geladen <iframe> im HTML, oder die <script> gewartet bis window.onload bevor Sie versuchen, über das id-Attribut zuzugreifen)

**Diese Unterscheidung zwischen “Frame” und DOM-Element wird in der Mozilla-Dokumentation wie folgt beschrieben:

Jedes Element im Pseudo-Array window.frames stellt das Fensterobjekt dar, das dem angegebenen Inhalt von ‘s oder ‘ entspricht. nicht das (i)frame DOM-Element (dh window.frames[0] ist dasselbe wie document.getElementsByTagName(“iframe”)[0].contentWindow).