JavaScriptでHTMLElementをそのまま（？）扱えることをなんと呼べばいいですか？

html
1<div id=hoge></div>
2
3<script>
4    function demo() {
5        console.log(hoge);
6    }
7
8    demo();
9</script>

このようなコードでhogeがHTMLElementとしてメソッドによる代入なしにそのまま扱えることを知りました。

この仕様にはどのような名前がついていますか？

また、名前を知ったあとで調べればよいとおもうのですが、getElementByIdで取得し代入して扱うことと、なにか差はあるのでしょうか？

今日まで一度もみたことがなかったのですが、実行環境を考慮せず積極的に使ってよいものなのでしょうか。

回答5件

予約語との競合などかんがえるとたまたま参照できるからと言って
その機能を使うのはあまり得策だとは言えません

javascript
1<div id="hoge"></div>
2<div id="window"></div>
3<script>
4console.log(hoge);
5console.log(window);
6console.log(document.getElementById('window'));
7console.log(document.querySelector('#window'));
8</script>

投稿2019/10/25 01:20

yambejp

総合スコア109894

今日まで一度もみたことがなかったのですが、実行環境を考慮せず積極的に使ってよいものなのでしょうか。

できれば使わないことをおすすめします。

As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the Web platform, for example. Instead of this, use document.getElementById() or document.querySelector(). （HTML Living Standardより）

投稿2019/10/25 01:27

maisumakun

総合スコア142217

ベストアンサー

前提としてIDは1画面に1つという前提があります。
つまり、それだけで特定できるためそれ単体でオブジェクトとして扱えるということも言えます。

「JavaScript ID 変数」とかで調べれば解説記事はでてきます。
名前らしい名前はついていないと思います。

getElementByIdで取得し代入して扱うことと、なにか差はあるのでしょうか？

後回しにすることなく、ミニマムなテストコードを書いて確かめれば良いと思います。

js
1console.log(hoge);
2let hogediv = document.getElementById("hoge");
3console.log(hogediv );
4console.log(hoge==hogediv);
5console.log(hoge===hogediv);

投稿2019/10/24 13:23

編集2019/10/24 14:03

m.ts10806

総合スコア80386

回答へのコメント

maisumakun

2019/10/25 01:27

HTML LSにあたってみましたが、タイトルは「Named access on the Window object」と事象説明といった感じでした。

m.ts10806

2019/10/25 01:36

一応それっぽい名前と解釈できなくもないですね

技術的なことは、m.ts10806さんが回答されておりますので、

今日まで一度もみたことがなかったのですが、実行環境を考慮せず積極的に使ってよいものなのでしょうか。

に関して回答させていただきます。
正直言うと、私自身も初めて知りました。
これはとても便利な仕様かと思います。

さて、
基本的には使っていいと思います。
~~ただし、~~JavaScriptの性質上、
あまり使うことは推奨できないものかと思います。
（後述するが、チーム開発や、ライブラリとして公開するのには非常に不適切な仕様）
JavaScriptは、ルートスコープに変数を置くと、非常にスパゲティコードになりやすく、
あまり推奨されないので、もしかしたら気にしなくいいかもしれませんが、
変数を扱う上でそのルート変数と区別がつきずらい可能性が非常に高くなるかと思われます。
例えば下記の例です。

javascript
1// define.js
2const hoge = 100;

javascript
1// main.js
2function calc(p) {
3  return hoge + p;
4}

html
1<!-- 上記JSを読み込んでいるHTML -->
2<div id="hoge"></div>
3
4<script src="define.js"></script>
5<script src="main.js"></script>
6<script>
7console.log(calc(15));
8</script>

といった時、hogeはどっちゃね？ってなります。
（検証していないが、おそらくconst hoge = 100の方が優先される）
もちろんこの時点でスパゲティコードなので、あまりよろしくない例かと思いますが、
実際にこの仕様を使うときは、このような現象が起きやすいので、
HTMLでid指定している変数名は、js内では使わない、などのチーム内で厳密にルール化する必要がでてくるでしょう。
また、ライブラリとして公開するにも不適切かと思います。
なぜなら、変数として扱っているid名のHTML要素がわからず、ユーザーが定義しようとしている、HTMLや変数と名前が被る可能性が多分にあるからです。

つまり、個人で開発して、他の誰にも引き継がないようなものであれば、別に気にしなくて使っていいと思うって話です。

投稿2019/10/25 01:30

編集2019/10/25 01:46