JavaScript: DOMを活用しよう

nodeTypeとnodeNameおよびnodeValueプロパティ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノードのnodeTypeとnodeNameおよびnodeValueプロパティについてご説明します。
講師:
08:15

字幕

このレッスンでは node のプロパティについてご説明します。今 Chrome でサンプルの練習用のページを開いています。では「デベロッパーツール」を開きましょう。そして querySelectorAll のメソッドでアクセスしますけれども。「 document 」の「 querySelectorAll 」リストの一番下ですね、選んで。nav の要素の li 要素のさらに a 要素ということで参照してみます。そうすると a 要素が一杯出てきましたけれどもこの中の最初のいくつかはnav ということですから上の方のメニューですね。そして後の方になってくるとこれは実はフッターの方にあるリンクになってきています。では戻りましてその中の一回クリアしましょうか。履歴を上向き矢印で辿ってその中の index 4 。ということは5番目ですね。何があるかというとここですね。「 REGISTER 」というリンクの部分です。これを使って node のプロパティを調べたいと思うのでここからあとは HTML ドキュメントの中でJavaScript コードを書いた方が分かりやすいのでこれは一旦コピーしておきましょう。 念のためクリアしておきましょうか。Dreamweaver で HTML ドキュメントを開きました。body 要素の閉じタグのすぐ上に script 要素JavaScript 要素を書く場所がありますので先ほどコピーしたものを変数に入れます。「 var myNode 」としてイコールのコピーしてあったものをペーストします。そしてセミコロンということですね。では node のプロパティをいくつかconsole.log で表示してみることにしましょう。「 console.log 」そして「 myNode 」のまず1つ目「 nodeType 」です。というプロパティがあります。次「 myNode 」の「 nodeName 」。名前ですね。もう1個「 myNode 」の「 attributes 」。これは属性のことですね。しかも「 s 」が付いていますから複数だろうということが想像つくかと思います。一旦保存しましょう。Chrome をリロードします。そうすると3つのプロパティの値が出てきました。まず「 nodeType 」なんですがこれは整数で示されます。1というのは標準的なエレメント要素です。それから「 nodeName 」。 A とありますがこれは文字通り a 要素です。a タグでしたから A と大文字で表示されます。それから「 attributes 」の方は属性がたくさんあればその分だけ0から始まる番号でいくつも表示されるんですがこの「 REGISTER 」の方は見てみると「 href 」の1個しか属性がありませんので0番だけしかありません。では今度はこの「 attributes 」の中の0番を取り出してまたこれも node なので node のプロパティを調べてみたいと思います。Dreamweaver に戻りましたので JavaScript のコードを書き加えます。「 attribute 」と。今度はこれで1個ですのでということなのでこれをコピーしまして持ってきます。そしてその中の0番しかなかったですね。0番を取り出してその attribute 属性を変数で入れます。そして同様に console.log で見ることにしましょう。こちらはコメントアウトにしましてここまでですね。attribute の attribute はちょっと意味がないのでここまでを「 myNode 」を「 attribute 」に置き換えます。 ここも同様にペーストします。そして保存をして確認してみましょう。Chrome をリロードします。そうすると今度は nodeType が2ということになりました。そして名前の方は nodeName ですね。「 href 」とまんまですね。この属性値がそのまま表示されています。じゃあ nodeType のこの番号。どんな番号があるかというのをちょっと確認しておきましょう。MDN で nodeType のページを開きました。nodeType は node のプロパティということでnode オブジェクトに定義されています。そして下の方に表があるんですけれども見てみますと1が「 ELEMENT_NODE 」2が attribute と言いましたよね。ですから「 ATTRIBUTE_NODE 」ということで。他に「 TEXT_NODE 」ですとかこのように12個のタイプが決まっています。Chrome の JavaScript コンソールで変数myNode に入れた値を確認してみましょう。a 要素でしたね。そしてその中には「 register 」というテキストが入っています。ということは「 myNode 」の「 firstChild 」ですね。 見てみると register という文字があります。この文字ですね。この文字を書き換えたいと思います。Dreamweaver に切り換えまして console はまたここもコメントアウトしましょう。// でコメントアウト。そして「 myNode 」の「 firstChild 」ですね。それを書き換えます。「 register 」でしたけれども「 registration 」にしてしまいましょう。「 registration 」大丈夫ですかね。保存をします。Chrome でリロードをします。ここの文字が変わるかというと変わらないです。なぜかといいますとコンソールでは単なる文字列テキストのように表示されていましたけれども実際にはあれも node なんですね。firstChild は node です。ということなんでオブジェクトですからきちんとプロパティでアクセスをしないといけないということになるんです。この場合のプロパティやはりnode のプロパティです。「 nodeValue 」と。ここにテキストが収められているのでこれを書き換えればいいということになります。では保存をして Chrome をリロードします。 「 registration 」に書き換わりました。このレッスンでは node の4つのプロパティをご紹介しました。「 nodeType 」種類ですね。「 nodeName 」名前。「 attributes 」属性の集まったもの。それから「 nodeValue 」ということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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