JavaScript: DOMを活用しよう

HTML属性をメソッドで操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メソッドによりドキュメントの要素の属性を調べたり、変更してみます。
講師:
04:42

字幕

このレッスンではメソッドを使ってドキュメントの中の要素の属性を調べたり・変更したりしてみます。今 Chrome で開いている練習のサンプルページなんですがちょっと切り替えまして「 register 」の方にいます。そしてデベロッパーツールを表示します。操作の対象はこのラベルにしたいですが確認しておきましょう。デベロッパーツールの上の方の左上のアイコンで選択をするとlabel の要素ですね。ではこれを変数に取り出したいと思います。変数は「 var myNode 」としましょう。そして「 document.querySelector 」を使います。これは一番最初のラベルということがわかっているので「 label 」で選択してしまいます。確認しましょう、 myNode で確かに名前というラベルが選択されています。ではここで例えばこの「 for 」の値を変えたいと思った時にプロパティリストの myNode のfor ではなくて「 htmlFor 」ということでアクセス出来ます。調べられますし、値を変えることも出来ます。けれどもこういう特別な名前というのは中々覚えづらいですね。メソッドであればこのまんま属性の名前を使ってしまうことが出来ます。 同じことを「 myNode.getAttribute 」属性を取り出すというメソッドなんですけどそこで for という属性をまかま入れてしまいます。そうするとちゃんと myName を取り出される。では JavaScript コンソールの上向き矢印で履歴を取りますけど getがあるんですから set もある。set の場合には設定する値が必要なので引数は二つなります。コンマ区切りで今現在myName になっていますけどこちらは myCompany とではないですね。スクロールしていますけど、companyname ですね。companyname とあるのでこちらのほうに切り替えという風にしています。「 companyname 」とそして Enter を押すとこちらで for の値が切り替わったと分かります。companyname になっていますね。では for という属性を持っているか持っていないかという場合には「 hasAttribute 」というメソッドがあります。今、上向き矢印で履歴を遡ったんですがget を使ったのでここを利用して「 hasAttribute('for') 」という風にするともっているかどうか持っていますね。 みてもわかるんですけれども。ではまた履歴を遡って for はあるけどid はないですよね。id がありますかと聞いています。id Enter を押すと falseありませんということになります。ではさらにこの属性を削除してしまうというこも出来ます。その場合には for の所まで遡りましたけどfor は持っていますよね。けどここを削除の場合には「 remove 」になります。「 removeAttribute('for') 」としてEnter キーを押しますと見て分かる通り属性がなくなってしまいました。メソッドでも確認しましょうか。遡って先程は hasAttribute('for') ですね。これは true だったですけど、true になっていますがEnter キーを押してみるとfalse ということでなくなってしまったということが分かります。このレッスンでは要素の属性を調べたり書き換えたりするというメソッドをご紹介しました。まず setAttribute getAttribute で設定したり調べたりすることが出来ます。持っているかどうかは hasAttribute属性の削除は removeAttribute を使いました。

JavaScript: DOMを活用しよう

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

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

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

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

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