JavaScript: DOMを活用しよう

ノードの要素を取り出す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DOMのノードツリーから要素を取り出すプロパティをご紹介します。
講師:
03:59

字幕

このレッスンでは DOM のツリーから要素を取り出すプロパティについてご紹介します。今練習用のサンプルを Chrome で開いています。ではデベロッパーツールを開いて、そしてウィンドウをスクロールしてこの値の li 要素で練習してみることにします。まずはこのアイコンで div のクラスartist リストの中に ul 要素があってli 要素が沢山あるということが分かります。ではこの ul 要素をとることにしましょう。変数に入れます。myNode としましょう。そして「 document.querySelector 」のメソッドを使ってクラスドットですね。「 artistlist 」の中の ul 要素ということで取り出します。myNode を確かめてみると確かにul 要素が取れました。ではちょっとクリアをしてmyNode でこのノードをみたいという場合にはchildNodes というプロパティを使えます。但しこのプロパティはノード全てということになりますので要素 li 要素のノードだじゃなくて、空白の改行であるとかタブであるとかそういうテキストのノードも含まれてしまいます。こういった要素の全てを使いたい場合にはchildNodes で良いですけれども要素だけをエレメントだけを使いたいという場合には別のプロパティがあります。 「 myNode 」で「 children 」ノードじゃなくて children ですね。子供達ということで取り出してみると要素だけが取り出さります。先頭がこの人で順番に取り出されていますね。では今度は一個だけを取り出したいという時にmyNode で一番最初の子供ですとfirstChild というプロパティがあります。但しこれはやはりテキストのノードを含んだ形で最初のノードということになりますのでテキストが出てしまいます。そこでちょっと変えまして「 firstElementChild 」要素の最初の子供ということにしますと今度は要素を調べて一番最初の要素ですからこの人が取り出されるということになります。同様に最後の要素の子供ですね。子供の要素ということですと「 lastElementChild 」first に対して last という風に変えただけですけれども ElementChild という風にすればこの人が last らしいですけど、スクロールしてみると確かに last ですね。ということで要素を対象にして取り出すことができるということです。このレッスンでは DOM のノードツリーを要素に限定して取り出すというプロパティについてご紹介をしました。 その場合に子供達の要素という場合にはchildren 。それから最初の要素・最後の要素というのはfirstElementChild lastElementChildというプロパティを使うことでご説明を致しました。

JavaScript: DOMを活用しよう

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

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

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

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

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