JavaScript: DOMを活用しよう

カスタムデータ属性(data-)を調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カスタムデータ属性(data-)とその値の参照の仕方についてご説明します。
講師:
06:27

字幕

このレッスンでは HTML ドキュメントの要素にカスタムテータ属性を設定しその値を参照する方法についてご説明したいと思います。今 Dreamweaver CC でサンプルの練習用のHTML ドキュメントを開いています。ちょっとスクロールしましてこの最初の写真の人がやります。コードを見たいので「分割」ということで下の方でコードが現れました。HTML の要素の中に情報を加えてJavaScript に渡せると便利です。そういう時は属性を定まれれば簡単ですね。ということで試しにこの人のimg 要素に対してtask という属性を仕様の中にありませんけど勝手に加えています。値はテストですので「 test 」としておきます。そしてこれを HTML5 の仕様に則って間違っていないか適正かどうかとテストにしようかといった時にウエブサイトでそういったサービスを提供しているものがあります。それを使っても良いんですが Dreamweaver CCにはその機能が予め備えっているのでそれを使うことにしましょう。「ウィンドウ」の「結果」の「検証」です。そして検証開始のボタンがこれなんでけど「レポート」のボタンをクリックします。 そして W3C のサービスでチェックをするのでメニューを選ぶと送信しますが、いいですかとあります、OKをします。そうすると1つおかしい用といってきます。55行目個々ですね。今まさに追加したこの task という属性が現在の所認められていませんということです。ではここはもう結果を消してしまって閉じます。でももう1つ下の img 要素を見てみるとdata-task という属性があります。これも実は HTML5 の仕様そのものには載っていません。けれども data- を付ければ作っていいよと独自の属性として定めていいよとという使用になっているですね。では今加えた変更は復帰で元に戻してしまいます。MDN のサイトで data- という属性についてのページを開きました。カスタムデータ属性というんですけど、 HTML の方に属性でデータを定めてそれをスクリプトと使用という場合に使われると言うことです。data- を付ければ独自の設定をして構わないとそしてその値を取り出したいというときにはプロパティの dataset というのを要素に対して参照すると値を取り出せるということになっています。先程 Dreamweaver のサンプルページ復帰したものを Chrome で開いています。 ではデベロッパーツールを表示することにしましょう。デベロッパーツールで少しウィンドウはスクロールします。そしてこの人の img 要素を操作したいと思います。デベロッパーツールの左上のアイコンでこの人の写真を選択しています。img 要素の選択出来ました。そして「 data-task 」というプロパティがカスタムデータ属性で設定されています。この要素をまず取得しましょう。この要素は div 要素のクラス artistlist の中にあるようです。では変数に取れます。myNode としましょう。そして document.querySelectorAll のほうを使うことにします。そして artistlist ですね。の中の img 属性ということで取得をしています。正しく取れていればこれらの img 要素ですね、それが配列されています。そてし取りたいのは二番目のひとなのでこの人ですね。index は配列の中で01という風にスタートしますのでこの人のimg 要素を取りたいという場合にはmyNode の01、「 index[1] 」ということになりますね。正しく取れています。ではこの中の data-task の値を取りたいと思った場合どうしたらいいかというと今の履歴を辿って上向き矢印で myNode 角かっこ1を出しますけど先程見た通り dataset ですね。 のプロパティにアクセスし独自の要素が複数の場合もありますね。その中の名前で選択するですけどdata- は要りません。data- なしで task ということで見てみると「 speaker 」、確かに speaker という風に設定されています。この属性の値、カスタムデータ属性ですね、の値は設定をすることも可能です。また上向き矢印で履歴を出してイコールでspeaker となっていますが「 presenter 」としてみます。Enter キーを押すと data-task の値がpresenter に変わりました。このレッスンではカスタムデータ属性とその操作についてご紹介しました。カスタムデータ属性は data- で設定することができます。そしてそれにアクセスするにはプロパティdataset 後ドットでその独自のプロパティ名data- を除いたプロパティ属性の名前を設定すればいいということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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