JavaScript: DOMを活用しよう

JavaScriptの命令をコンソールで試す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google ChromeのJavaScriptコンソールにより、DOM要素をJavaScriptで操作します。
講師:
08:02

字幕

このレッスンでは Google Chrome のJavaScript コンソールを使ってHTML ドキュメントの DOM 要素を操作してみます。まずは JavaScript コンソールを出します。「表示」メニューから「開発/管理」で「 JavaScript コンソール」です。あと Elements の方も表示しておきましょう。ちょっと縦が狭いので Doc の位置をこの右のメニューですね。ここで右側にセットします。Elements が上に見えてコンソールが下にあります。Elements を見てみると html の中にhead がありましてbody があって header があってと nav があってというこんな感じになっていますね。これをコンソールの方で操作してみたいと思います。まずこの HTML のドキュメントをオブジェクトとしてここで入力ができるんですけれどもクリックをした上で document と。doc と打ち始めたところでdocument じゃないですかという風にサジェストしてくれます。これでよければ右向きの矢印を押してしまうと一番最後にカーソルが行きます。ここで Enter を押せばこの内容が表示されます。 doocument ですかと。doocument はちょっと大きいので中を見ると大変ですからもうちょっと狭めましょうか。Console を一旦クリアします。この駐車禁止のようなアイコンです。では document からさらに. で範囲を少し狭めます。body ですね。そうすると body 要素の内容が表示されます。いちいち開けてみません。これも結構まだ大きいですからね。クリアしてもうちょっとくらい試しましょう。document の右向き矢印. で head です。head はまあ少し小さめですね、開けてみるとこんな感じでElements の方で見ても同じような内容が見られます。情報としては基本的には変わりません。表示の仕方がちょっと違いますけれどもね。ではクリアしてもう少し狭めてみましょう。document 右向き矢印 .body でさらに狭めて childNodesという風にしますとその中の子どもを表示してくれます。Nodes 複数形になっていますね。ですから配列の形で表示されるんですけれでもhead があって article 。上の Elements で見てもいいですね。footer があると。 間にテキスト入れたハッシュマークのtext となっていますがこれは例えばタグの間に改行が入っているとかそういうスペースなども text ということで表示されます。ですから本当にほしいのはこういった headerとか article footer ということでね。この中の例えば header がほしいとしましょう。配列の中では2番目になっていますが配列のナンバー、通し番号は0からスタートしますので0番1番となります。ですから1番が header ですね。ではもう一度 document.body.childNodesということでさらに1番目という風にしたいんですがキーボードが上下の矢印、上向き矢印で今まで入力したものを遡ることができます。先ほど childNodes 入れましたね。その前に入力したのが head です。body という風に今上向き矢印を順番に押しています。じゃあ下に戻りましょう。下向き矢印で head childNodes 、ここで1番目がほしいなと思ったら角括弧の1ということで1番目が取り出されます。つまり header ですね。このように操作することができます。また消しましょう。 あとよく使う使い方です。例えば id が決まっているとかclass で取り出したいと探したいという場合がありますね。そのときにはやはり document でスタートするんですけれどもここで GetElementById 。id で Element を探しましょうということになります。そして文字クオテーションの中にclass を入れます。ただしこれは CSS とは違いますからハッシュマークはいりません。main というのがここにありますね。main が article にありますんでmain を探しましょう。main と入力して Enter キーを押すとarticle が取り出されました。では CSS のように探したいという場合ですね。document のこの場合にはメソッド命令がquerySelector という風に言います。CSS の Selector の形で入れれば結構です。ですから先ほどの main をここで使うこともできます。この場合には CSS の入れ方ですからハッシュマークの後に main です。これで同じ結果が得られます。クリアして上向き矢印で今入力したものをもう1回表示します。 id の場合には GetElemtnById の方がid というの文書の中に1つしかありませんから使う場合にはそちらの方がいいと思います。ただ querySelector でも使えないことはないよということなんでこちらの querySelector の場合にはclass ですね。class として group というのがこの辺にありますね。これを取り出したいと思います。group ということで Enter キーを押すとnav class group が取り出されました。さらにこれ CSS と同じと言いましたんで要素を指定することができます。また上向き矢印で今さっき入力した group取り出しますが今度は class じゃなくて要素で header ですね。header の中に nav があるでしょうと。そこには ol 要素があってということは li要素もありますよねという風にしてあげて。こうすると li 要素実は複数あるんですが先頭の li 要素。これ nav というのは上でメニューですからその一番先頭というのは HOME を得ることができます。3つメニュー項目ありますね。では3つ全部出したいという場合にはまたクリックして上向き矢印でちょっと命令が変わります。 selectorAll 全部くださいなと。こうすると全部出しますんでEnter キーですが配列の形になっています。HOME が先頭ですね。そして2番目が ARTISTS 。じゃあ2番目がほしいなと思ったらこれ配列の形ですからまた上向き矢印で今入力したものを表示してARTISTS は0番1番ということになりますから1と入力するとこれで Artists の入った li 要素を得ることができます。このレッスンでは Google Chrome のJavaScript コンソールを使ってHTML ドキュメントの DOM 要素を操作する方法についてご説明しました。JavaScript コンソールは「表示」から「開発/管理」で JavaScript コンソールを選択します。そしてこのコンソールにdocument などですね、の JavaScript の命令を入れればその内容を確認することができるということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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