JavaScriptにおける属性操作の例外
属性を操作する際には例外が存在します
- それは属性 class です。
この単語はJavaScriptにおいて特別なキーワードであるため、
属性 class の値を読み取るために単に elem.class と書くことはできません。
代わりに、 elem.className と記述する必要があります。
例を見てみましょう。以下のような入力フィールドがあるとします:
<input id="elem" class="aaa bbb">
この入力フィールドの属性 class の値を出力してみましょう:
let elem = document.querySelector('#elem');
console.log(elem.className); // 'aaa bbb' と出力されます
他にも例外があります。例えば、
属性 for です。これにアクセスするには
htmlFor を使用します。
以下のdiv要素が与えられています:
<div id="elem" class="content no-gap"></div>
さらにボタンも与えられています。ボタンをクリックしたときに、
このdiv要素の class 属性の値を読み取り、画面に出力してください。
以下のdiv要素が与えられています:
<div id="elem"></div>
さらにボタンも与えられています。ボタンをクリックしたときに、
このdiv要素の class 属性に何らかのクラスを設定してください。
スペースで区切られた複数のCSSクラスを持つdiv要素が与えられています:
<div id="elem" class="aaa bbb ccc"></div>
さらにボタンも与えられています。ボタンをクリックしたときに、 このdiv要素のCSSクラスの配列を取得してください。