Javascriptでdocument.getElementById("xxxxx")を使用する場合としない場合の違い

Question

こんにちは。
Javascriptを勉強し始めたばかりです。

テキストに「オブジェクトの中のデータをWEBに表示させる」というワークがあるのですが、
ふとした時に、document.getElementById("xxxxx")はなぜ必要なのかと思い投稿させていただきました。

実際に、下記2種類を書いてWebに反映させたところ、全く同じレイアウトで同じテキストが反映されました。

実際にはどのように違うものなのか教えてください。　よろしくお願いいたします。

<script> var js={title:"JS", price:2500, stock:30}; document.getElementById("title").textContent=js.title; document.getElementById("price").textContent=js.price +"円"; document.getElementById("stock").textContent=js.stock; </script> <script> var js={title:"JS", price:2500, stock:30}; title.textContent=js.title; price.textContent=js.price +"円"; stock.textContent=js.stock; </script>

Comments

[退会済みユーザー]

ブラウザは何ですか？　ブラウザ依存の JavaScript の質問なのですからそれぐらい書きましょうよ。

[limelimelime]

ご指摘ありがとうございます。Chromeとなります。ブラウザ情報が必要なのも知らず、次回からは記載するようにしますね。

[退会済みユーザー]

バージョンも書いてください。それも重要な情報です。

[limelimelime]

すいません。回答も頂いたのにお返事が遅れました。バージョン: 64.0.3282.186でした。

Answer 1

getElementByIdメソッドはHTML文書から得られたDOMツリーの中のid値をもつノードを抽出するためのものです.

通常これさえあればDOM内の検索は可能なのですが, いちいちdocument.getElementByIdと入力するのは面倒なので, HTML文書読み込み時にid属性を持つノードが現れると勝手にグローバル変数(windowオブジェクトの疑似プロパティ)にノードを追加することになっています. つまりノード<span id="title"></span>は変数window.title(windowは省略可能なのでtitle)としてアクセス可能です.

とは言え, このグローバル変数への登録処理はHTML文書読み込み時の1度だけ行われるので, スクリプトを使って新たなid属性を持つノードをDOMに追加し, それを抽出する場合はgetElementByIdメソッドを使わなければならない…のです.

なお, このidによる直接アクセスはブラウザ毎に細かい部分で実装が異なるため, 広く互換性を求める用途には適していません.

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

Comments

[limelimelime]

とても詳しく説明いただきありがとうございました。
半分ほどは孫引きしながら読ませていただくような次第で、恐縮です。。。

Answer 2

title とか price でオブジェクトが取得できるというのは昔は IE 独自の非標準の機能でした。

なので、質問者さんの後者のコードのように、getElementById を使用せずに、直接名前 (id) を指定して html 要素を参照するコードを書いて、IE では動いていたものが、他のブラウザでは動かないということは、ありがちなミスでした。

IE は、他のブラウザでは機能しないさまざまな非標準の簡易表現を DOM においてサポートしていました。その一部が他のブラウザでも取り入れられたりして、様子が変わってているようですが、getElementById を使用するのは必須だと思った方がよさそうです。

余談ですが、textContent は IE8 以前ではサポートされておらず、title.innerHTML と書く必要があったりしました。以下のサイトで調べてみると良いと思います。

Can i use
https://caniuse.com/

という訳で、JavaScript の質問をする際は、使うブラウザとバージョンは必ず書くように書ましょう。

Comments

[limelimelime]

そういう背景があるのですね。
現在使用しているChromeは、記述無し・有り、ともにカバーしているから、
WEB上の動作が同じに見えるんですね。

[limelimelime]

ご回答いただきましてありがとうございました。
質問にピンポイントな答えを頂いたのでベストアンサーとさせていただきました。

ブラウザ更新状況も考えながらコードを打っていく必要があるのだというのが、本当に簡単なコードだけからも体験でき、また、それを理解させていただきました。ありがとうございました。

Answer 3

すでに回答があるように
window.title（もしくはwindow["title"]）としてidが暗黙的に登録されるからのようですが
これを盲信するといくつか問題がありそうです

• ユーザーがあらたに変数：titleを宣言すると、titleに対するアクセスができなくなる

　（その場合もwindow.titleなら行けそう）

• たとえばidにハイフンをいれたりすると参照できなくなる
  たとえばprice-1というidだと price-1.textContentを指定しようにも

　ハイフンが引き算として機能してエラーになる

• IE8以前では動かない
  その他サポートしないブラウザがあることは否定できない

やはりきちんとgetElementByIdないしquerySelectorを利用してアクセスしてください

Comments

[defghi1977]

そうそう, ブラウザによってidが"効く"要素と効かない要素があるんですよね

[limelimelime]

なるほど。
一つ一つが勉強になります。　どうもありがとうございます。