JavaScript: DOMを活用しよう

DOMのノードを調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DOMのノードツリーを上下、あるいは前後に調べるやり方をご紹介します。
講師:
06:03

字幕

このレッスンでは DOM のノードのツリーを上下あるいは前後に調べるやり方についてご紹介します。Chrome で今練習用サンプルページを開いていますけども、デベロッパーツールを表示しましょう。「表示」で「開発/管理」で「デベロッパーツール」です。ウィンドウを少しスクロールして兄弟を調べるということなのでこの辺兄弟要素ですね、li 要素で出来ています。ちょっと確認しておきましょう。デベロッパーツールの左上のアイコンをクリックしてこの辺りを選んでおきましょう。div 要素、クラス artist という設定がされていて、その中にul 要素があって、 li 要素が兄弟は沢山いるということですね。ではまずこの li 要素の最初のこの人ですね。これを querySelector のメソッドで取っておくことにしましょう。変数に入れます。myNode しておきますけども、そこで「 document.querySelector 」そしてクラスが artist ですね、artistlist の中のli 要素ということで li 要素の最初のものが myNode に入ります。myNode を確認してみましょう。 li 要素でポインターすると最初のli 要素がハイライトします。li 要素の中には img の要素が入っていますね。ちょっと myNode の JavaScript コンソールでの表示の仕方を変えてましょう。一回クリアをして、 dir という形で myNodeを表示しています。そうするとオブジェクトとして表示されますので開けてみると今度は中にあるプロパティを表示します。例えば「 childNodes 」childNode の集まりですね。リストになっています。配列です。それからここで Ctrl もしくは Command Fで検索バーをだして「 parentN 」ぐらいを打ってみるとparentNode というのはありますね。このでは JavaScript のコードで出してましょう。一回クリアして、 myNode のparent を打ってましょう。parentNode とするとこの li 要素の親ですね。親というのは ul 要素がここにありますのでこれが出てくるはずです。Enter キーを押しますと確かに ul のクラス「 group 」「 group 」というクラスが合っていますからこれが選ばれたということが分かります。 さて今度はこの parentNode 。今は入力したものを遡れますけど上向き矢印でparentNode に対して子供がいますので childNodes複数形ですね。子供のリスト li 要素だけじゃないですね。テキストもう子供ですのでテキストノードやli 要素が配列で表示されています。ではここで入力を続けますけれども、遡って表示しといて、childNodes となっていますがこれを消していて。最初の子供 firstChild というプロパティがあります。そうするとこの中に li 要素だけじゃなく、テキスト、テキストっていうのは空白行とかそれからホワイトスペースですね。そういったものを表されていると思うですけども、li 要素じゃないので firstChild で見てみると確かにテキスト、これです、きっと。同じ様にまた履歴を遡ってfisrt じゃなくてその反対ですね。last と見てみると予想してみると最後のこのテキストでよね。なので Enter キーを押すとまた text が出てくるということになってしまいます。ではまた上向き矢印で履歴を遡ってfirstChild ですね。そうするとテキストになってしまったですがこの人を取りたいと。 この人はテキストの後にいる人ですから兄弟、次の兄弟ということで「 nextSibling 」と打ってあげるとテキストの次の子供の要素ですね。li と出てきました。狙った通りこの最初の人が出てきましたね。もっとも li 要素だけを取り出して調べたいという場合であればいったん消してしまいますけど、最初に入力したところですね。ここですけれども、querySelector じゃなくて、querySelectorAll としてあげればクラス artist の中にある li 要素だけをすべてを取り出してくれますのでli 要素だれを操作したいという場合にはこちらの方が便利です。このレッスンでは DOM のノードのツリーを親や子、兄弟という風に上下・前後に調べるやり方についてご紹介しました。使うプロパティとしては parentNodechildNodesfirstChild lastChild それから nextSiblingというプロパティでした。

JavaScript: DOMを活用しよう

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

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

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

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

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