JavaScript: DOMを活用しよう

DOM要素をデベロッパーツールで操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Chromeのデベロッパーツールで、HTMLドキュメントのDOM要素を操作してみます。
講師:
10:22

字幕

このレッスンでは Google Chrome のデベロッパーツールを使ってHTML ドキュメントの DOM 要素を操作してみます。今 Google Chrome でサンプルのドキュメントを開いています。非常に簡単な構成なんですけれどもこれで試してみたいと思います。メニューは表示です。そして「開発/管理」というところに3つあります。上から順番に見ていきます。「ソースを表示」にするとこの HTML ドキュメントのHTML のコードソースが別ウィンドウで開いています。こちらは元々なんですけれどもそれを開くと、こんな感じだということがサーバーにあっても分かります。中の HTML ドキュメントの構成を確認することができるということですね。もちろん本格的に編集するには HTML のエディタツールを使う必要があります。では次に「表示」の「開発/管理 」で「デベロッパーツール」。これを使うと HTML ドキュメントの中のElement 要素ですね。それをいろいろと確かめることができます。ポイントを合わせると今どこの HTML の要素にハイライトによってどこがフォーカスされているかということが分かりますね。 例えば header というところがあるんですけど、三角のマークをクリックすると開いたりあるいは畳んだりということができる訳です。この内容はまたあとで少し詳しく見ていきますけれども、このパネルを閉じたいというときには右側のバッテンで閉じます。3つ目も先に見てみまいましょう。「表示」メニューから「開発/管理」の「 JavaScript コンソール」です。これを使うと JavaScript を実行することもできますしあるいは JavaScript の方にこのコンソールに表示したい警告とかデータとかといったものを記述しておけばこの中に表示することができます。他にもタブによって切り替えができるんですが、先ほどのツリーの内容を見る分ですね。これは Elements になっています。Console 。その他にもいろいろと内容を確認するためのタブがあるんですが、主には Elements と Console を使うというのがスタートラインでしょう。これショートカットもありますのでよく使いますからショートカットを覚えていただくといいと思います。ショートカットはデベロッパーツールがCommand Option の I です。 Windwows の場合にはControl Alt I となります。JavaScript コンソールの方は I がJ に替わるということですね。これでショートカットで開いたり閉じたりということができます。ではデベロッパーツールをもう1回開きます。今ウィンドウの下に開いてるんですけど、この開く位置を変えることができます。右側のこのバッテンの隣ですね。ここで今この真ん中の状態になっています。「 Doc to bottom 」下の方に Doc が出てくるということなんですが、右側をクリックするとパネルが Doc が右側に表示されます。それから画面を切り替えて使いたいという場合には切り離すこともできます。切り離して特にディスプレイが大きい方が別々に見ることができます。ここでは下に表示しておくことにしましょう。「 bottom 」の方に切り替えます。あと今 Elements を見てる場合ですね。Elements を見てる場合に Console も見たいなと。切り替えてもいいんですが Elements の状態でやはりこのメニュー。ここで「 Show console 」という項目を選ぶとちょっと狭くなりますけどね。 今画面があまり大きくないので、下側に表示することができます。消したい場合にはもう一度選ぶんですけどこれショートカットが Esc になっています。そして Esc でオンオフできますので1回隠しました。今度はキーボードから Esc キーを押してみます。そうすると Console が出てもう1回 Esc キーを押すと消えると。こういう風になっています。ではあらためてこのツリーを見てみましょう。まず body ですね。これが開いたり閉じたりすることができます。head も同様ですね。ただ head の方は画面に見えてこないので操作してもあまり分かりにくいのでbody の方を中心に操作していきます。header の中には nav という要素があってそしてその中にはさらにol リストの要素が入っています。クリックするとそのリストの要素が選択されます。そしてその中身を見てみたいというときには三角印をクリックすると中が見られます。これでは3番目なので「 SCHEDULE 」ですね。この「 SCHEDULE 」という項目が選ばれています。a 要素です。開く閉じるというのはマウスでクリックしても結構ですし今開いていますが、キーボードから矢印キー左側を押すと閉じることができます。 右側を押すと開きます。あるいは上下に矢印キーを押せばこの要素を切り替えていくことができます。そして今 ol を選んで左側の矢印で閉じるという具合ですね。それからいちいちツリーを全部辿っていくんじゃなくてこれ選びたいと思った場合ですね。こういう簡単なドキュメントだったらすぐどれだか分かるんですけれどもこの左側です。「 Select an element in the pageto inspect it 」ちょっと長いですけどね。ページの中で調べたいと。それをエレメントを選びたいという場合にこれ1回クリックします。そうするとブルーになりますので、じゃあこの ARTSITS を選びたいなと。ARTSITS をクリックするとすぐにARTSITS が選ばれます。1回クリックして選んでしまうとまたオフになりますのでSCHEDULE を選びたいなと思ったら、またクリックをして SCHEDULE を選びます。このようにして下側の Doc のツリーを選んで確認をして確かめていってもいいですし、上側から選ぶということもできます。デフォルトでは普通にテキストがこう選択ができるという状態ですね。あるいはこれリンク先がないんですけど、クリックができる状態になっています。 それから今選ばれているのは a 要素のSCHEDULE ですね。これが選ばれていますけれども下の方にはこの HTML のツリー構造が表示されています。今 a ですね。1個上がるとクリックするとli 要素という風に選択をこの下でも切り替えることができます。ですからこの a 要素が含まれているli の ol の nav グループ。ここをもういきなりクリックするとポンッと選ばれてしまってこのツリーを1個1個辿っていって確かめるという必要はないのでここも合わせて使うと便利でしょう。さてあらためてこの a 要素SCHEDULE を選びます。そして今度はこの右側ですね。右側のペインのピンのようなアイコンなんですけれども「 Toggle Elements State 」という風になっています。選ぶとマウスポイントを普通重ねる場合はホバーの状態で重なった状態の CSS が有効になるんですがここで「 hover 」にしてしまえということでクリックするとエミュレートすることができます。重なったときどうなるのということですね。あるいはまたこの長い項目ですね。説明が長い項目でリンクがあります。そしてここで「 focus 」という風にするとフォーカスが当たった場合にはこういう風になりますよということを確認することができます。 ピンのアイコンをクリックするとこのstate 状態のオプションが隠れます。さてさらにドキュメントの編集を一時的に加えることもできます。例えばこの最初の p 要素いきましょうか。これですね。一段落目です。そしてテキストを書き換えてみましょうか。右クリックで「 Edit Text 」という風にするとテキストが書き換えられます。半分消しちゃいます。選んで Delete と Enter キーを押すとテキストが減りました。さらに今度はこのタグの方です。p 要素で右クリックして「 Add Attribute 」という風にしますと属性が加えられます。では分かりやすいところで style ですね。color を red にしてしまいましょう。という風に変更することができます。これはあくまで一時的な変更ですのでリロードしてしまえば元に戻ります。あとは右クリックのメニューとしては「 Edit as HTML 」というのがあります。もうちょっと上の方でやった方がいいですね。article で「 Edit as HTML 」。そうするともうフルにこのタグのグループを書き換えてしまうこともできます。これ閉じるときには Esc で結構です。 あともう1つ、今 Elements の中を選んだ状態ですけれでもCommand もしくは Ctrl F ですね。検索することができます。例えばここで「 main 」と入れますと「 1 of 1 」となってますから1個しかないんですけど複数あれば上向き矢印や下向き矢印で複数のこの「 main 」という文字を検索することができます。このレッスンでは Google Chrome を使ってHTML ドキュメントの DOM 要素をデベロッパーツールでどう操作するかということについてご説明しました。

JavaScript: DOMを活用しよう

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

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

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

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

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