Head First JavaScriptプログラミング、第2版

第6章. Webページと対話するDOMを知る

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

あなたはJavaScriptで長い道のりを歩んできた。実際、あなたは初心者からスクリプター、そしてプログラマへと進化してきた。しかし、何かが足りない。JavaScriptのスキルを真に活用し始めるには、自分のコードが存在するWebページとのインタラクションを知る必要がある。そうすることでしか、動的なページ、反応するページ、ロード後に更新されるページを書くことはできない。では、どうやってページとやりとりするのか？DOM（ドキュメント・オブジェクト・モデル）を使うのだ。この章では、DOMを分解し、JavaScriptと一緒に使うことで、ページに新しいトリックを教える方法を紹介する。

前章では、ちょっとした課題を残した。"クラック・ザ・コード・チャレンジ "だ。

あなたは、エベル博士のWebサイトからキャプチャされた、外部ファイルにコードが書かれたHTMLを渡された：

そして、このコードからあなたの推理力を使って、エベル博士のパスコードを割り出す必要があった。

では、このコードは何をするのか？

このコードを通して、エベル博士がどのようにパスコードを生成しているのか見てみよう。各ステップを分解すると、これがどのように機能しているかがわかるだろう：

• まず、このコードでは という変数に、 オブジェクトの メソッドを呼び出し、"code9 "を渡した結果をセットしている。返されるのは要素オブジェクトだ。access document getElementById

  注

  この章では、ドキュメント・オブジェクトとエレメント・オブジェクトのすべてを学ぶ。

• 次に、その要素（つまり、idが "code9 "の要素）を取り出し、その プロパティを使ってその内容を取得する。innerHTML code.

  

• Evel博士のコードは、 に格納されている文字列「My watch stopped ...