JavaScript: DOMを活用しよう

DOM(Document Object Model)とは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DOM(Document Object Model)について、MDN(Mozilla Developer Network)サイトのドキュメントをもとに、ご説明します。
講師:
04:06

字幕

このレッスンでは DOM Document Object Modelとはどういうものなのかということを簡単にご紹介したいと思います。現在開いているのは通称 MDN MozillaDeveloper Network というサイトです。ここは Mozilla とそのコミュニティによって運営されていて技術の詳細な情報が載っています。HTML や JavaScript それから CSS などについて調べたいと思ったときはまずはこのサイトを見てみるのがよいでしょう。検索の仕方なんですが mdn というのをキーワードにしてあとは知りたいことを次に書けばいいでしょう。今回は DOM なので dom として検索します。そして今開いていたのはこの DOM リファレンスというところから開いたページです。リファレンスとありますので下にスクロールをしていくとインターフェースについてのさまざまな情報がリンクが貼ってありますけれども。まず最初、一番導入部分を見ようということなので「導入」というリンクをクリックすると先ほどのページに行きます。まず「 DOM とはなにか?」ということなんですが Document Object Model の略でHTML や XML 文書のためのインターフェースを定めたものです。 そして HTML XML の構造化された内容を表現します。つまり element 要素であるとかあるいはツリーコードをですね、そういったものをどうやって操作するかということを API として提供してくれます。「 DOM にアクセスする方法 」これは JavaScript を使うんですけれども、例えば window というオブジェクトがあります。それから document というオブジェクト。これは文字通り HTML の文書を表します。さらにその最広い範囲ですね、現在開いているウィンドウについての一番大元となるオブジェクトがウィンドウとなります。ウィンドウに対して alert というメソッドを使うと、例えばですけれども、警告のダイアログを出すことができます。ここの例では body 要素の onload という属性に設定していますけれども、これを簡単にブラウザで確認することもできます。コピーをしてこの URL を入れるところなんですがJavaScript として今コピーしたものをペーストします。そして Enter キーを押すと警告のダイアログが出て括弧の中に書いたことですね「私のホームページへようこそ! 」という文字が表示されました。 これは例えば一つの DOM へのアクセスの方法です。他にもいろいろあるんですがここでは簡単に確認するだけですので「 DOM の中で核となるインターフェイス 」というのを見てみましょう。今見た通り window であるとか、それから document もかなり大元のオブジェクトになります。それに対して getElementsById 名前の通りなんですが、要素を ID で取り出しましょうと、ID で要素にアクセスすることができます。あるいは TagName, getElementsByTagNameということでタグですね、li タグとか p タグとかアクセスをすることができますし、あるいは Element をJavaScript へ動的に作ることができます。そして作ったオブジェクトはそのまま文書に入ってませんので文書に加えるにはappendChild ということでツリー構造の中に加えます。それからツリー構造のマークアップに対してアクセスするものとかスタイルですね、これは CSS です。あるいは属性にアクセスすることも可能です。DOM API のテストのとこでもう少し細かいテスト方法などがありますのでもし興味のある方はこのページを詳しくご覧になると良いでしょう。 このレッスンでは Mozilla Developer NetworkMDN のサイトのページを使ってDOM とはなにかということを簡単にご紹介しました。

JavaScript: DOMを活用しよう

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

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

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

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

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