要素のIDに文字列identitical要素を返します

アビシェーク・クマール：

私は動作しますが、私はなぜ理解しない状況が発生しました。私は要素に名前を付ける場合id="abc"と行うconsole.log(abc)最初にそれを設定せずに、それは私のHTMLオブジェクトを提供します。誰もが、この動作を説明してもらえますか？

例

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

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

それはのdocument.getElementById（）を使用せずに私の全体の要素を与えるだ理由を私は知りません。

テリー：

これは、DOM APIのレガシー機能です：基本的には、IDを使って何がウィンドウオブジェクトでのキー、すなわちによってアクセス可能ですwindow[id]。

あなたのケースでは、abc本質的であるwindow.abcのIDを持つ要素への参照である、abc（すなわち、一致する#abcセレクタ）。

また、これは、HTML文書内のIDは一意でなければならない理由で、重複するIDを扱うのブラウザの動作は、技術的仕様で定義されていません。

---

関連ノートでは、この機能により、ネイティブ関数/プロトタイプを無効にすることができるあなたの要素のIDを与えることは危険です。次に例を示します。<button id="submit">フォームに配置されたとき。あなたがプログラムで使用してフォームを送信しようとするとformElement.submit()、あなたが実際にエラーに遭遇し、ためには、今formElement.submit、実際のIDを持つネストされたボタンの要素を指し、submit代わりにネイティブメソッドの。あなたはここに自分でこれを試してみることができます。

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>