JavaScriptでのDOMの取得の際にHTML要素のid属性の値を変数名として使用できるのはなぜでしょうか？

JavaScriptで以下のようなHTMLドキュメントを扱う単純なプログラムを試していたのですが、

JavaScript
1<body>
2    <div id="x" />
3
4    <script>
5        const x = document.getElementById("x");
6        console.log(x);
7    </script>
8</body>

たまたま以下のようにDOMの取得をしていなくても問題なく実行できることに気づきました。

JavaScript
1<body>
2    <div id="x" />
3
4    <script>
5        console.log(x);
6    </script>
7</body>

Chrome、Firefox、Edge、いずれのブラウザでもできるようです。
JavaScriptでDOMエレメントを取得するコードを書かなくても、HTMLの要素で id 属性が定義されていれば、そのまま変数名としてJavaScript上で扱えているようなのですが、これはブラウザの仕様なのでしょうか？

hoshi-takanori

2020/05/13 20:52

HTML の仕様です。 https://qiita.com/nakajmg/items/c895105afae95bfa8fae

nagomisan

2020/05/13 21:16

早速の回答ありがとうございます。そのような仕様になっていたのですね。

m.ts10806

2020/05/13 21:38

過去質問にもありましたね

kei344

2020/05/14 04:23

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

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

回答1件

ベストアンサー

HTML Standardに、特定の属性値がグローバル変数として定義される規定があります。

https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object

window's document-tree child browsing context name property set;

the value of the name content attribute for all embed, form, img, and object elements that have a non-empty name content attribute and are in a document tree with window's associated Document as their root; and

the value of the id content attribute for all HTML elements that have a non-empty id content attribute and are in a document tree with window's associated Document as their root.

最も、相互運用性の為の仕様と思われ、問題も多いので、活用はお勧めしません。