JavaScriptにおけるタグ属性のプロパティとしての扱い
それでは、タグの属性を取得する方法を学びましょう。 ここでは次のルールが適用されます： 各タグ属性は、DOM要素の同名のプロパティに対応します。
例を見てみましょう。次のようなタグがあるとします：
html<input id="elem" type="text">
変数に要素への参照を取得しましょう：
javascriptlet elem = document.querySelector('#elem');
必要な属性の値を出力してみましょう：
javascriptconsole.log(elem.id); // 'elem' と出力されます
console.log(elem.type); // 'text' と出力されます
次に、例として属性の値を変更してみましょう：
javascriptelem.type = 'submit';
次の入力フィールドがあります：
html<input id="elem" type="email">
ボタンもあります。ボタンをクリックすると、
上記の入力フィールドの type 属性の内容を
画面に表示してください。
次の入力フィールドがあります：
html<input id="elem" type="email">
ボタンもあります。ボタンをクリックすると、
type 属性に値 submit を
設定してください。
リンクが a タグとして、
ボタンと段落があるとします。ボタンをクリックすると、
リンクの href 属性の内容を段落に
出力してください。
リンクとボタンがあるとします。ボタンが
クリックされると、リンクのテキストの末尾に
その href 属性の内容を丸括弧で囲んで
追加してください。
画像があるとします。img タグを使って
ページに配置してください。また、ボタンと段落もあります。
ボタンをクリックすると、画像の src 属性から
画像へのパスが段落に書き込まれるようにしてください。
img タグ内の画像とボタンがあります。
ボタンをクリックすると、width
属性に値 300 を設定してください。
img タグ内の画像とボタンがあります。
width 属性に何らかの幅が設定されているとします。
ボタンをクリックすると画像の幅が 2 倍に
なるようなボタンを作成してください。
2枚の画像があるとします。ページ上に
img タグと2つのボタンを作成してください。
最初のボタンをクリックすると、1枚目の画像へのパスを
src 属性に設定し、2番目のボタンをクリックすると
2枚目の画像へのパスを設定するようにしてください。