質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

1157閲覧

JavaScriptでHTMLElementをそのまま(?)扱えることをなんと呼べばいいですか?

hanyoaka

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3グッド

2クリップ

投稿2019/10/24 13:20

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で取得し代入して扱うことと、なにか差はあるのでしょうか?

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

mistn, miyabi_pudding, dice142👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

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

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

前提として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

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/10/25 01:27

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

2019/10/25 01:36

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

0

技術的なことは、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
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/10/25 01:39 編集

この締めかたなら頭に「基本的には使っていい」と書かない方が意図が正しく伝わると思います。質問者は「積極的に使っていいか」を聞いてるので (締めがなければ低評価押すところでした)
miyabi_takatsuk

2019/10/25 01:39

m.ts10806さん>ご指摘ありがとうございます。回答を修正いたします。
m.ts10806

2019/10/25 01:47

調整ありがとうございます。確認しました。
miyabi_takatsuk

2019/10/25 01:49

m.ts10806さん>再評価、コメント、大変にありがとうございます!
guest

0

7.3.3 Windowオブジェクトの名前付きアクセス

ですかね。

こちらからの引用ですが、

HTML StandardではHTMLマークアップ上の次の属性値がグローバル変数名となる仕様が追加されました。

  • 全要素のid属性値
  • embed,form,frameset,img,object要素のname属性値

質問されている hoge が丁度、id属性です。

この仕様、「HTMLにおいて重複があり得ない属性だから」なのでしょうね。

追記)
ブラウザ側でも ESモジュール(script[type=module])の開発が常識になるまでは、積極的に使うことは控えたほうがいいと思います。

モジュールはスコープが完全に分かれてくるので、「オブジェクト汚染」を気にしなくても良くなる。
そんなブラウザ側JavaScriptの未来を見据えての仕様追加なのかなと感じました。

投稿2019/10/25 06:23

編集2019/10/25 06:41
AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問