JavaScript: DOMを活用しよう

HTML属性の値を変更する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素のHTML属性を調べたり、値を変えてみます。
講師:
07:30

字幕

このレッスンではドキュメントの中の要素のHTML 属性を調べたり値を変えたりしています。Google Chrome で練習用の HTML ドキュメントサンプルを開いていますけれどもちょっとページを変えて register というページに移ります。ではデベロッパーツールを表示しましょう。そして少しスクロールします。この画像について操作をしたいので画像を取り出すことにしましょう。まずツールの左上のアイコンで、これはことに入っているのかということでクリックするとdiv 要素、クラスはpixgrid のなかにあるようです。そこには ul 要素があって、 li 要素がいっぱいあります。その先頭の人はこと人ですね。img があるようです。ではこれを取り出すことにしましょう。JavaScript コンソールで変数を設定します。myNode とそして「 document.querySelector 」ですね。querySelector で今調べた通りクラス pixgrid ですね。この中の img 要素ということで取り出してみます。myNode を確認しましょう。確かにこの写真が取れたようです。ちょっとクリアをしてそれからこの img の要素はsrc と alt の2つの属性があるようです。 では src の属性の値を調べたいという時にはsrc という風にそのままタイプして頂ければ文字列で実際のパスが取れます。この src というプロパティなんですが上向き矢印で履歴を遡ってまただしましたけど設定も出来ます。では変えようかといことでこの中のちょっと必要な所までパスをコピーします。そして「ペースト」ですね。この名前の所なんですが、身近い人に変えてしまいます。ちょっと読み方が分からないですけどね。これで大丈夫ですしょうか。閉じクオテーションですね。先頭の方のこの画像に注目して下さい。Enter キーを押しますとこの少し下の方にいるですね。この人です。この人の写真がまた入ってしまったといことで上の方へ見てみるとちゃんとパスが変わっていますね。ではまたクリアをしましてこの要素には例えば id はありません。id を追加することができます。myNode でこれ id として文字列を設定します。「 selected 」、これは「選びました」ということで名前を付けます。Enter キーを押しますとちゃんと「 id='selected' 」が入りました。ではクラスを設定したいという気がしてきますね。 けどクラスについてはちゃんと特別にプロパティが用意されています。「 className 」です。上から二番目ですね。ですからクラスで設定したらダメです。className で名前をここは無精して 「 myClass 」にしますけどEnter キーを押しますとちゃんとクラスmyClass が設定されましたね。では画面を少し左の方にスクロールしてこのラベルについて操作をしたいと思いますのでまたデベロッパーツールを上の方のアイコンでこのラベルを選択しています。そうすると要素がこれだということが分かりますね。属性として for が設定されています。では myNode の値を変えましょう。myNode でdocument.querySelector をまた使います。「 label 」と。先頭のラベルだってわかっていますのでこれを実際見てみると確かにこの要素が捕らえました。ちゃんとクリアをしますけれども。for の相手が myName となっています。myName はこの下のボックスですから当然なんですがでは相手はこのcompanyname ですね、こちらの方に設定するとしましょう。myNode これも for ではダメで、htmlFor という特別なプロパティが用意されています。 ここで companyname としてあげるとfor の内容が companyname の方に変わりました。もう一つぐらいまたこのツールのアイコンでこちらがラジオボタンを選択します。ではデフォルトでは「いる」という方にチェックがついていますけどもですから「いらない」の方にチェックがありませんね。この input 要素ラジオになっていますけどそれには id が設定されています。こういうときは id を使ったほうが良いですね、また myNode の内容を変えます。そして「 document.getElementById 」そこで「 notsubscribe 」タイプミスをしてなければ取れたはずです。取れましたね。ではこちらの「いる」のほうがチェックがついているかっていうと「 checked 」というプロパティchecked という属性ですね。これが設定されているかなんですけどそれを動的に変えることができます。では myNode に「いらない」のほうのノードが取れましたのでmyNode で checked 。これは true false の設定になっていますので選ぶという場合にはtrue ということで選択が出来ます。 但しこれは要素の属性を書き換えるのではありません。動的に選択を変えるということですのでここで checked という属性が加わるということがありません。このレッスンではドキュメントの中の要素のHTML 属性を調べたり値を変えてみるという方法についてご説明をしました。

JavaScript: DOMを活用しよう

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

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

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

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

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