JavaScriptで属性を操作する方法まとめ
JavaScriptで属性を操作する方法まとめました。
要素の属性を操作する
DOMではいくつかの値以外は、属性と同じプロパティが用意されています。
たとえば、下の例では、alt属性を指定するために、JavaScriptでもaltとして、そのまま使えています。
MDNのCSS プロパティリファレンスで詳しく何が使えるかを確認できます。
'use strict';
{
//Attribute
const logo = document.querySelector('.nav__logo');
console.log(logo.alt);//alt属性が返ってくる
logo.alt = 'カエルの写真';//とすると
console.log(logo.alt);//カエルの写真が返ってくる
}
getAttibute()
console.log(logo.getAttribute('alt'));//カエルの写真
getAttibute()で属性を指定するとその値が返されます。
console.log(logo.src);//画像のURLが絶対パスでてくる(相対パスで指定していても絶対パスで返される)
console.log(logo.getAttribute('src'));//src='相対パス'で指定している相対パスが返される。
また、このように、src属性の登録したままの値を取得したい場合は、getAttribute()を使います。
setAttribute()
const button = document.querySelector('#inc');
console.log(button.setAttribute('color', 'green')); //属性とその値をセットする
console.log(button); //<button id="inc" color="green">ボタン</button>
console.log(button.getAttribute('color')); //green
setAttribute()で属性を挿入することができます。第一引数が属性、第二引数にその値を記述します。
また上の例のようにカスタムで作った属性でもgetAttribute()は値を返します。
クラスを変更するときは、一般的にはclassListを使います。
カスタムデータ属性を操作する
datasetとキャメルケース
htmlでは、data-から始まっていれば、オリジナルの属性を作ることができます。
以下のh2見出しを英訳したいとしましょう。
data-englishという名前のカスタム属性をつくったとしましょう。
その場合、カスタム属性は他と同じように、
eventNode.textContent = eventNode.data-englishとして操作することはできません。
カスタムデータ属性の場合は、dataset.englishという形になります。
次の例をみてみましょう。
<h2
id="event"
data-version-number="7.0"
data-english="Handle Custom Data Arrtibutes"
>カスタムデータ属性を扱う</h2>
<button>クリック</button>
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.textContent = eventNode.dataset.english;
});
//キャメルケースで記述する
console.log(logo.dataset.versionNumber);// 7.0
}「data-version-number="7.0″」とハイフンケースでつなげているときは、JavaScirptで指定するときにキャメルケースにする必要があります。