HTMLのタグにidをふると自動的にJSの変数に代入される

今までidをつけたTAGの取得は以下のようにやっていました。

html
1        <body>
2          <input type="text" id='tt' value='テキストボックスの中'>
3          <p id="pp">masao</p>
4        </body>
5          <script>
6            var tt = document.querySelector('#tt');
7            var pp = document.getElementById('pp');
8            console.log(tt);
9            console.log(pp);
10          </script> 
11        </html> 
12

しかし、querySelectorやgetElementByIdをしなくとも変数が作られていることを知りました。

html
1        <body>
2          <input type="text" id='tt' value='テキストボックスの中'>
3          <p id="pp">masao</p>
4        </body>
5          <script>
6            console.log(tt);
7            console.log(pp);
8          </script> 
9        </html> 
10

ChromeとFireFoxでためしどちらでも確認できたのですが、これはJavaScriptの公式な挙動なのでしょうか？
だとすると、getElementByIdはどういった際に使う関数なのでしょうか？
初めて知ったので驚いてます。

行動規範の内容に同意します

回答1件

ベストアンサー

根拠となる仕様は下記

DOM: element IDs are global variables

Qiitaにも上記の仕様のリンクがある記事があります

HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される

getElementByIdはどういった際に使う関数なのでしょうか？

そこはドキュメントを見た上で考えてもらえたらと。

Document.getElementById()

「こうできる」からと「使わない」「意味がない」わけではないですね。
様々なアプローチの方法があっても不思議ではありません。
試してないですが、動的に生成した要素とかは必要なのかなと。

ただ、基本は後勝ちなので同じ変数名で別の情報を定義すればこのグローバル変数の考え方は採用できませんので、getElementById()を利用して別途取得する必要があります。
この仕様については「windowオブジェクトのプロパティ」ということもありますので、なるべく明示的に自身で制御した方がいいように思います。

投稿2019/01/21 21:04