JavaScript: DOMを活用しよう

getElementById()メソッドでDOM要素を取り出す

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
document.getElementById()メソッドで、id属性の値からDOM要素を取り出します。
講師:
08:10

字幕

このレッスンでは getElementById というメソッドでid 属性の値から DOM 要素を取り出します。id 属性というのはそのページの中で1つしかない一意といいますけれども、そういう要素ですから一番確実でしかも処理も速いというメソッドになります。今開いているのは MDN のgetElementById のページです。ここを出すには検索で「 mdn 」で「 getelementbyid 」とタイプすればほぼ確実に一番先頭に来ると思います。このページですね。構文が出ています。これは dcoument のオブジェクトに対するメソッドになっているので「 document. 」です。そして「 getElementById 」大文字小文字区別しますので「 E 」と「 B 」と「 I 」。「 d 」は小文字ですのでこの3つが大文字だということにお気をつけください。括弧の中に渡すものを引数というんですが引数は id 属性の文字列となります。ではこれを実際に試してみましょう。まずは Google Chrome のデベロッパーツールで簡単に確かめてみましょう。「開発/管理」でデベロッパーツールです。 この HTML ドキュメントの構造はこうなっていましてまず body がありますね。そして body に id 属性が定められています。ですから getElementById を使うことができます。けれどももし id がなくても body は1つしかありませんので簡単にアクセスができます。やはり document ですね。document に対して body という風にタイプすれば「 document.body 」ですね。これでアクセスすることができます。けれどもこの HTML ドキュメントではid 属性が定められていますから先ほどご紹介した「 document 」の「 getElementById 」。「 get 」大文字「 E 」でメニューからもうすでに選ばれていますので右向き矢印で確定します。そして丸括弧の中に文字列ですのでクオテーションを付けてそして「 page_home 」ですね。これで同じですけれどもねbody の要素が取ることができます。他に id 属性が定められているものというとちょっと確認をしてみますがこの一番上のアイコン「 Select an element in the page to inspect it 」。 長いですね。 これでクリックするとここに何があるかなという。この DOM の構造の中で要素を選択することができます。そうするとこの h2 の要素の親であるarticle という要素にやはり id が定められていますから「 comingtoevent 」ですね。「 document.getElementById 」と全部タイプしてもいいですが先ほど入力したものはこのコンソールJavaScript コンソールで上向き矢印を押せば履歴を遡ることができます。ですからここを書き換えて「 comingtoevent 」ですね。こうしてあげて Enter キーを押せばこの article のところですね。ここを拾うことができます。JavaScript コンソールでも三角ボタンで中を開けたり閉じたりということができます。ではもう少し探ってみたいのでこれを変数に入れたいと思います。ちょっと一旦クリアをしましてこの JavaScript コンソールでも変数に代入するということはできます。じゃあ今の履歴を辿って上向き矢印でこれはコピーしてしまいましょう。コピーをして下向き矢印で次に行って「 var myNode 」とかですね。 そしてペーストをすれば変数に代入をすることができます。ここで Enter キーを押しますと変数に代入をしただけですから「 undefined 」何も起こっていないように見えますけどmyNode という変数の中には要素が入っています。Node が入っていますので「 myNode 」ということでタイプをすると取り出すことができます。こうしてもいいんですが変数に入れたり何行かJavaScript コードを書いていくのであればHTML ドキュメントの方で作業した方がやりやすいと思います。見やすいと思いますので HTML ドキュメントの方の Dreamweaver で開くことにしましょう。こちらが Dreamweaver で開いた+HTML ドキュメントです。コードの入力をしますのでコードだけをビューで見ることにしましょう。Script 要素は body 要素の中一番下にすでに場所だけ取ってありますのでここに入力をします。「 var myNode 」ですね。先ほどコピーしたのがまだ残っていると思いますので「ペースト」しましょう。大丈夫ですね。こちらはちゃんとセミコロンで命令文終了というのを入れておいた方が確実です。 それをまたやはりブラウザで確認したいと思います。そのときには「 Console.log 」というのが一番使われる命令ですね。この中に「 myNode 」と入れればこの変数の中に入っている要素をブラウザの方で確かめることができます。では一旦保存して Chrome の方でリロードをします。そうすると JavaScript コンソールの方に先ほどと値同じですけれどもね出てきました。この中にはまだ要素がいくつか含まれています。その要素にアクセスしてみたいと思います。Node の中の子要素を一通り見ようという場合には「 childNodes 」と。子どもたくさんありますのでね。複数形になりますのでご注意ください。保存をしまして Chrome をリロードします。そうすると子どもが配列に入ってきます。この「 text 」というのは改行とかですね空白スペースがテキストになっています。h2 要素ここにちょろっと見えますけどもこれが h2 ですね。これを取り出したいという場合には2番目なんですけれども配列は0番からスタートしますので1番目の値として取り出すことができます。配列の index1 という場合には角括弧で1と書きます。 保存をしましょう。クロームをリロードです。そうすると h2 の要素が取り出されました。この中には上で見た方がいいですかね。テキストが入っていますね。このテキストもやはり h2 の子どもといことになります。ではテキストを取り出しましょう。今回は子どもはあのテキスト1つしかありません。つまりの最初の子、一人っ子ですね。こういう場合には「 FirstChild 」ということで取り出すことができます。保存をしましょう。Chrome をリロードするとテキストを取り出すことができました。このレッスンでは id 属性でエレメントを取り出すdocument.getElementById というメソッドについてご紹介しました。引数は id の値である文字列。それから childNodes FirstChild についてもご紹介をしました。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

3時間24分 (33 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年03月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。