Zeichenfolge, die mit der ID eines Elements identisch ist, gibt das Element zurück [duplicate]

Ich bin auf eine Situation gestoßen, die funktioniert, aber ich verstehe nicht, warum. Wenn ich ein Element nenne id="abc" und TU console.log(abc) ohne es zuerst einzustellen, gibt es mir das HTML-Objekt. Kann sich jemand dieses Verhalten erklären?

Beispiel

<h1 Id="abc" >abcdefghj</h1> 

<script>
  // without using document.getElementById
  console.log(abc); // Returns h1 element  
 </script>

Ich weiß nicht, warum es mir das ganze Element gibt, ohne document.getElementById() zu verwenden.

Dies ist eine Legacy-Funktion der DOM-API: Grundsätzlich ist alles mit einer ID über seinen Schlüssel im Fensterobjekt zugänglich, dh window[id].

In Ihrem Fall, abc Ist im Wesentlichen window.abcwas ein Verweis auf das Element mit der ID von ist abc (d.h. übereinstimmend mit der #abc Wähler).

Dies ist auch ein Grund, warum IDs in einem HTML-Dokument eindeutig sein müssen und dass das Verhalten des Browsers, doppelte IDs zu handhaben, technisch nicht durch die Spezifikation definiert ist.

In einem ähnlichen Zusammenhang ist es aufgrund dieser Funktion gefährlich, Ihren Element-IDs zu geben, die native Funktionen/Prototypen außer Kraft setzen können. Hier ist ein Beispiel: <button id="submit"> wenn sie sich in einem Formular befinden. Wenn Sie versuchen, das Formular programmgesteuert mit zu senden formElement.submit()Sie laufen tatsächlich auf einen Fehler, weil jetzt die formElement.submit bezieht sich tatsächlich auf das verschachtelte Schaltflächenelement mit der ID von submit statt der nativen Methode. Hier kannst du es selbst ausprobieren:

const myForm = document.getElementById('myForm');

const helloButton = document.getElementById('btn');
helloButton.addEventListener('click', () => {
  myForm.submit();
})

<form id="myForm">
  <input type="text" />
  <button id="submit">
    Submit form
  </button>
  <button id="btn" type="button">
    Click me to programmatically submit form
  </button>
</form>