Werden DOM -Baumelemente mit IDs zu globalen Variablen?

StackOverflow https://stackoverflow.com/questions/3434278

Frage

Arbeiten Sie an einer Idee für eine einfache HTMLelement -Wrapper, die ich für den Internet Explorer und auf Folgendes gestoßen bin und Chrom:

Für eine gegebene HTMLElement mit der ID im DOM -Baum ist es möglich, die DIV unter Verwendung seiner ID als variabler Name abzurufen. Also für einen Div wie

<div id="example">some text</div>

in Internet Explorer 8 und Chrom können Sie tun:

alert(example.innerHTML); //=> 'some text'

oder

alert(window['example'].innerHTML); //=> 'some text'

Bedeutet das also? Jedes Element im Dom -Baum Wird im globalen Namespace in eine Variable konvertiert? Und bedeutet es auch, dass man dies als Ersatz für die verwenden kann getElementById Methode in diesen Browsern?

War es hilfreich?

Lösung

Was passieren soll, ist, dass "benannte Elemente" als offensichtliche Eigenschaften der hinzugefügt werden document Objekt. Dies ist eine wirklich schlechte Idee, da sich Elementnamen mit echten Eigenschaften von zusammenhalten können document.

Dh die Situation verschlimmerte, indem er auch benannte Elemente als Eigenschaften der hinzugefügt hat window Objekt. Dies ist doppelt schlecht, da Sie jetzt vermeiden müssen, Ihre Elemente nach einem Mitglied der beiden zu benennen document oder der window Objekt, das Sie (oder ein anderer Bibliothekscode in Ihrem Projekt) möglicherweise verwenden möchten.

Dies bedeutet auch, dass diese Elemente als globale Variablen sichtbar sind. Zum Glück in diesem Fall irgendwelche wirklichen globalen var oder function Deklarationen in Ihrem Code beschatten Sie sie, sodass Sie sich nicht so sehr Sorgen machen müssen, hier zu Benennung var, Sie erhalten einen Fehler in IE, da es versucht, dem Wert selbst den Wert zuzuweisen.

Es wird allgemein als schlechte Praxis angesehen, wegzulassen var, sowie, um sich darauf zu verlassen, dass benannte Elemente sichtbar sind window oder als Globale. Bleiben bei document.getElementById, was häufiger unterstützt und weniger mehrdeutig ist. Sie können eine triviale Wrapper -Funktion mit einem kürzeren Namen schreiben, wenn Sie das Tippen nicht mögen. In jedem Fall ist es keinen Sinn, einen ID-to-Element-Lookup-Cache zu verwenden, da Browser die typischerweise die optimieren getElementById Rufen Sie an, um eine schnelle Suche sowieso zu verwenden. Alles, was Sie bekommen, sind Probleme, wenn sich Elemente ändern id oder werden aus dem Dokument hinzugefügt/entfernt.

Opera kopierte den IE, dann web, und nun sowohl die zuvor erfüllte Praxis, benannte Elemente aufzunehmen document Eigenschaften und die bisherige Praxis, sie anzuziehen window sind Sein standardisiert von HTML5, dessen Ansatz darin besteht, jede schreckliche Praxis zu dokumentieren und zu standardisieren, die uns von Browserautoren zugefügt wurde, wodurch sie für immer Teil des Webs zu einem Teil des Webs gemacht werden. Firefox 4 wird dies auch unterstützen.

Was sind "genannte Elemente"? Alles mit einem id, und alles mit einem name zum „Identifizieren von“ Zwecken verwendet werden: das heißt Formen, Bilder, Anker und einige andere, aber nicht andere nicht verwandte Fälle von a name Attribut wie Steuernamen in Formulationsfeldern, Parameternamen in <param> oder Metadaten Typ in <meta>. "Identifizierung" nameS sind diejenigen, die zugunsten von vermieden werden sollten id.

Andere Tipps

Wie in der früheren Antwort erwähnt, ist dieses Verhalten als bekannt als Benannte Zugriff auf das Fensterobjekt. Der Wert der name Attribut für einige Elemente und den Wert der id Das Attribut für alle Elemente werden als Eigenschaften des globalen window Objekt. Diese sind als Elemente bezeichnet. Seit window ist das globale Objekt im Browser, jedes benannte Element ist als globale Variable zugänglich.

Dies wurde ursprünglich vom Internet Explorer hinzugefügt und schließlich von allen anderen Browsern implementiert, nur um die Kompatibilität mit Websites, die von diesem Verhalten abhängig sind. Interessanterweise entschied sich Gecko (Firefox 'Rendering Engine), dies in Mackenmodus Nur während andere Rendering -Motoren es im Standardmodus eingeschaltet.

Ab dem Firefox 14, jedoch, Firefox unterstützt jetzt den benannten Access auf der window Objekt auch im Standardmodus. Warum haben sie das geändert? Es stellt sich heraus, dass es immer noch viele Websites gibt, die im Standardmodus auf dieser Funktionalität beruhen. Microsoft sogar veröffentlichte eine Marketing -Demo Das war so und verhinderte, dass die Demo in Firefox arbeitet.

Webkit hat kürzlich als das Gegenteil angesehen, ablenken benannte Zugang auf die window Objekt nur zum Quirks -Modus. Sie entschieden sich dagegen dagegen wie Gecko.

Also ... verrückt, wie es scheint, dass dieses Verhalten jetzt ist Technisch sicher in der neuesten Version aller wichtigen Browser im Standardmodus zu verwenden. Aber während benannter Access etwas bequem erscheinen kann, Es sollte nicht verwendet werden.

Wieso den? In diesem Artikel können viele Argumentation darüber zusammengefasst werden, warum Globale Variablen sind schlecht. Einfach ausgedrückt, führt ein paar zusätzliche globale Variablen zu mehr Fehlern. Nehmen wir an, Sie geben versehentlich den Namen von a ein var und zufällig tippen ein id eines Dom -Knotens, Überraschung!

Obwohl es standardisiert ist, gibt es in den Implementierungen von Browser von benannten Access noch einige Unstimmigkeiten.

  • Dh fälschlicherweise macht der Wert der name Attribut für Formularelemente zugänglich (Eingabe, Auswahl usw.).
  • Gecko und Webkit machen fälschlicherweise nicht <a> Tags, die über ihre zugänglich sind name Attribut.
  • Gecko verarbeitet fälschlicherweise mehrere benannte Elemente mit demselben Namen (es gibt eine Referenz auf einen einzelnen Knoten anstelle eines Referenzarschusses zurück).

Und ich bin mir sicher, dass es mehr gibt, wenn Sie versuchen, benannte Access On Edge -Fälle zu verwenden.

Wie in anderen Antworten erwähnt, verwenden Sie document.getElementById um einen Verweis auf einen Dom -Knoten durch seine zu erhalten id. Wenn Sie einen Verweis auf einen Knoten erhalten müssen name Attribut verwendet document.querySelectorAll.

Bitte verbreiten Sie dieses Problem bitte nicht, indem Sie den benannten Access auf Ihrer Website verwenden. So viele Webentwickler haben Zeit verschwendet, um dies aufzuspüren magisch Verhalten. Wir müssen wirklich Maßnahmen ergreifen und Rendering -Motoren zum Namen Access im Standardmodus abschließen. Kurzfristig wird es einige Websites brechen, die schlechte Dinge tun, aber auf lange Sicht wird es dazu beitragen, das Web vorwärts zu bewegen.

Wenn Sie interessiert sind, spreche ich in meinem Blog ausführlicher darüber - - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/.

Sie sollten sich anhalten getElementById() In diesen Fällen zum Beispiel:

document.getElementById('example').innerHTML

Dh mischt gerne Elemente mit name und ID Attribute im globalen Namespace, am besten, um explizit zu sein, was Sie bekommen möchten.

Ja, das tun sie.

Getestet in Chrome 55, Firefox 50, dh 11, dh Edge 14 und Safari 10
Mit dem folgenden Beispiel: 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="im_not_particularly_happy_with_that">
    Hello World!
  </div>
  <script>
    im_not_particularly_happy_with_that.innerText = 'Hello Internet!';
  </script>
  <!-- Looking at you W3 HTML5 spec group ಠ_ಠ -->
</body>
</html>

http://jsbin.com/mahobinopa/edit?html, output

Die Frage sollte Sound :: "HTML -Tags mit bereitgestellten IDs global zugänglich DOM -Elemente?"

Die Antwort ist ja!

So sollte es funktionieren, und deshalb wurden von W3C anfangs IDs vorgestellt.Die ID eines HTML -Tags in einer Parsen -Skriptumgebung wird zu seinem entsprechenden DOM -Element -Handle.

Netscape Mozilla weigerte sich jedoch, sich an (an sie eindringende) W3C anzupassen, und verwendeten hartnäckig das veraltete Namensattribut, um Chaos zu erstellen und daher die Skriptfunktionalität und die Codierungsbequemlichkeit durch die Einführung einzigartiger IDs durch das W3C zu brechen.

Nach dem Netscape Navigator 4.7 fiasko gingen ihre Entwickler alle den W3C, während ihre Mitarbeiter das Web mit falschen Praktiken und Missbrauch von Beispielen ersetzt. Die Verwendung und Wiederverwendung des bereits veralteten Namensattributs [!, Das nicht einzigartig sein sollte], so dass ID -Attribute so sind, dass Skripte, die ID verwendeten, für den Zugriff auf bestimmte DOM -Elemente einfach brechen würden!

Und brechen, wie sie auch umfangreiche Codierungsstunden und Beispiele schreiben und veröffentlichen würden [ihr Browser würde ohnehin nicht erkennen] wie document.all.ElementID.property Anstatt von ElementID.property Um es zumindest ineffizient zu machen und dem Browser mehr Overhead zu geben, falls er es nicht einfach in der HTML-Domäne durchgebrochen hat, indem er denselben Token für den Namen (jetzt [1996-97], veraltet) und das Standard-ID der gleiche Token -Wert.

Sie gelang es ihnen leicht, die - damals - überwältigende Armee von ignoranten Code -Schreib -Amateuren zu überzeugen, dass Namen und IDs praktisch gleich sind, außer dass das ID -Attribut kürzer und daher für den Codierer bequemer ist als die Eigenschaft des alten Namens. Das war natürlich eine Lüge. Oder - in ihren ersetzenden veröffentlichten Artikeln von HTML, die überzeugen, dass Sie Ihren Tags sowohl Namen als auch ID angeben müssen, damit sie von der Skriptmotor zugänglich sind.

Mosaikmörder [Codenamen "Mozilla"] waren so sauer, dass sie dachten, "wenn wir untergehen, sollte es auch das Internet".

Das steigende Microsoft - andererseits - war so naiv, dass sie dachten, sie sollten das veraltete und markierte für Löschnameneigenschaften behalten und es so behandeln, als wäre es eine ID, die eine eindeutige Kennung ist, damit sie die Skriptfunktionalität von nicht brechen würden Alte Seiten, die von Netscape -Auszubildenden codiert werden. Sie waren tödlich falsch ...

Und die Rückgabe einer Array-Sammlung von ID-widersprüchlichen Elementen war auch keine Lösung für dieses absichtliche künstliche Problem. Eigentlich besiegte es den ganzen Zweck.

Und dies ist der einzige Grund, warum W3C hässlich geworden ist und uns Idiosozies gab, wie z. document.getElementById und die dazugehörige Rococo -Goddamn -nervige Syntax der Art ... (...)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top