JavaScript: DOMを活用しよう

attributesプロパティを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
attributesプロパティで、要素の属性を調べてみます。
講師:
03:01

字幕

このレッスンでは attributes というプロパティを使って要素の属性を調べてみます。Chrome でサンプルの練習用の HTMLドキュメントを開いていますけど、デベロッパーツールを開きましょう。そして少しスクロールをしてこの最初の写真の参照を取りたいのでデベロッパーツールの左上のアイコンでクリックします。この img の要素を取って来ます。変数に出ましょう。変数は myNode として「 document.querySelector 」です。そしてこれは artistlist のクラスの下にありますのでその中の img ということで要素の参照を得ます。確認しましょう。myNode 確かにこの人ですね。では attributes のプロパティを調べたいと思います。「 myNode.attributes 」複数形です。ですので結果としては配列ではないですけど配列の様に index がされています。中のこの三角をクリックしてまてみますと0番1番というはありましてsrc と alt 2つの属性が設定されていますということですね。確かにこちらをみても src と alt2つがあります。ではこれらにアクセスをするときは一回クリアをしてmyNode の先程みた0番1番というindex でアクセスすることが出来ます。 attributes の0番が先程ソースでしたね、 srcなので src のパスが取得出来ました。このプロパティ attributes というのは配列のように index でアクセスすることができるんですけど実際のところはオブジェクトです。ですからオブジェクトのようにドットでアクセスすることが出来ます。では上向き矢印で履歴を遡って0と「 [0] 」を打つ代わりに src とプロパティの名前をそのまま入れてしまいます。これでも同じ結果を得ることが出来ます。このレッスンではノードオブジェクトのプロパティの1つattributes についてご説明しました。attributes プロパティの返すオブジェクトというのは配列のように index でアクセスすることが出来ますしドットでプロパティを指定して参照することも出来ました。ただ1つ注意して頂きたいのはアクセスすることは読み込み専用です。設定は出来ませんのでそれだけご注意下さい。

JavaScript: DOMを活用しよう

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

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

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

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

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