JavaScriptプログラミング入門講座

ノード属性の操作

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptを使って、特定の要素に設定された属性を取得する方法、および変更する方法について解説致します。
講師:
08:06

字幕

このレッスンでは JavaScript で HTML 文書に書かれている html タグの属性に JavaScript からアクセスし 参照 / 設定するための方法について 解説いたします まずは ダウンロードしてきた ファイルの中にある attribute という名前の付いた html と css そして JavaScript のファイルを エディタで開いてください そしてこれが それらのファイルを開いた状態です このファイルは 外部化された JavaScript ファイルと css ファイル それらをこの HTML ファイルが 読み込んでいる状態です それでは 早速レッスンを始めていきましょう まず最初に一点 注意しておきたいのが この HTML ファイルで JavaScript ファイル― 外部化したものですね それを読み込んでいる場所ですが こちらの の直前にあります これは要素の属性にアクセスするためには その JavaScript のファイルが 読み込まれる前に これらの HTML ファイルが 先に読み込まれておく必要があるためです この点は注意しておきましょう さて 属性とは このように HTML タグの中に 書かれるような内容のものですね たとえば class ですとか あとは name だとか title 属性というものもありますし リンクですと href 属性とかもありますね それらの属性に対して JavaScript でアクセスする 方法を今回はご紹介します それでは早速やっていきたいと思います まず JavaScript のファイルを開いてください そして今回ご紹介するのは まず 属性を取得する方法 そして 属性を設定する方法です それではまず 属性を取得する方法についてやっていきます それでは今回 属性を取得するタグを HTML ファイルから探します 今回はこちらの id="red" の p タグの この class の textbox というのを 取得してみましょう それでは JavaScript ファイルに戻りまして 早速書いていきます それではまず先ほどの id="red" の p タグを取得します 変数 target を作って ここに document.getElementById( ); そして この中にダブルクオーテーションで ”red" と書きます これで id="red" の属性 p の要素が こちらの target という変数に入りました それではこの p タグに設定された 属性値の class ですね こちらを取得してみたいと思います 取得の仕方は まず変数を作って 変数の名前をここでは cls としておきましょうか そして = 要素が入った変数 target そしてドット そして getAttribute( ); そしてこの getAttribute の引数に 取得したい属性を書きます 今回は class ですので ここにダブルクオーテーションで "class" と書きます それではこの変数 cls を ブラウザで出力してみたいと思います 今回は window.alert( ); アラートダイアログの中に 出力する形でやってみましょう そしてこの中は変数なので cls とします この状態でファイルを保存して この HTML タグをブラウザで開くと このような形になります textbox と ちゃんと出てきましたね それでは OK ボタンを押します それでは次に この id="red" の p タグの class 今は textbox となっていますが これを別のものに変えてみたいと思います 今回はこの textbox と書いてあるところを purple というクラスに 差し替えてみたいと思います その purple というクラスですが css ファイルで デザインを定義しています ですので もし この class="textbox" というのを class="purple" に変えると この赤枠で囲まれた部分の 見栄えが変わるようになっています それでは実際に試してみましょう エディタに戻ります では 属性の設定をやっていきます まず こちらの window.alert のところは 消しておきましょう そして先ほどの target という変数ですね id="red" という要素が入った この変数 target そのまま使い回せるので そのまま使います target ドット 先ほど属性を取得するためには getAttribute というのを使いましたが 今度は属性を設定するので setAttribute というのを使います そして (); そしてこの setAttribute 引数に2つの値を伴います まず1つ目です 1つ目はセットしたい属性の名前です 今回は class の値を変えたいので class と書きます そして その後の第2引数のところを 変更したい値を書きます 今回は purple というクラスを 設定したいので ここに purple と書きます これで属性値の設定は完了です この状態でファイルを保存して ブラウザで確認してみましょう こちらの HTML ファイルを ブラウザで開きます するとこのように 中の文字色が紫になりましたね これできちんと purple という class が 適用されました それではエディタに戻ります このように HTML タグに紐付いた 属性の値を取得する場合には getAttribute そして属性を設定する場合には setAttribute この2つの方法がありますので しっかりと覚えておいてください 以上でレッスンは終了です 今回は JavaScript スクリプトで HTML 文書に書かれている HTML タグの属性に JavaScript からアクセスし 参照 そして設定するための方法について 解説いたしました これをマスターすると 今回のように動的に classなどを差し替えて デザインを変更することなどが できるようになってきます ぜひともマスターしておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

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

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

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