2022/11/03

HTMLの属性の操作

JavaScript

属性確認

attributes

html

<input type="checkbox" id="hoge" foo="fuga">

javascript

const result = document.querySelector('input').attributes;
console.log(result); // NamedNodeMap {0:type,1:id,2:foo}
console.log(result[1]); // id="hoge"
console.log(result.foo); // foo="fuga"

属性の注意点

1. 値は文字列として認識される
2. 属性のキーは大文字と小文字の区別はされない

値は文字列として認識される

html

<input type="checkbox" id="34">

javascript

const result = document.querySelector('input').attributes;
console.log(result.id.value); // "32"←文字列

属性のキーは大文字と小文字の区別はされない

html

<input type="checkbox" FOO="fuga">

javascript

const result = document.querySelector('input').attributes;
console.log(result[1]); // foo="fuga"←小文字になっている

属性の操作

1. getAttribute
2. setAttribute
3. hasAttribute
4. deleteAttribute

html

<input type="checkbox" id="hoge" foo="fuga">

getAttribute(キーを指定して属性値を取得)

const result = document.querySelector('input').getAttribute('id');
console.log(result); // hoge

setAttribute(キーとバリューを指定して新しい属性をセット)

document.querySelector('input').setAttribute('newattr', 'newVal');
console.log(result.newattr); // newVal

hasAttribute(キーを指定して属性の有無を確認)

const result = document.querySelector('input').hasAttribute('id');
console.log(result); // true

const result = document.querySelector('input').hasAttribute('gogo');
console.log(result); // false

removeAttribute(キーを指定して属性を削除)

document.querySelector('input').removeAttribute('id');
const result = document.querySelector('input').attribute;
console.log(result); // {0:type,1:foo}←idが消える

独自の属性をつける方法

前提

HTMLのタグには自由に属性値をつけることができる。↓

<p myattr="hoge"></p>

が、自由につけた属性が将来的に意味を持つものに変わる可能性は0ではない

ので、そうならないために用意されているのがdata-である

data-は今後意味を持つ属性になる可能性は0としてくれている

data-を使って属性値を設定する

<p data-myattr="hoge"></p>

datasetを使って属性値を取得する

result = document.querySelector('p').dataset;
console.log(result); // {myattr: 'hoge'}←data-を除いた値をキーにして返してくれる

getAttributeとdataset

自分で独自に定めた属性はdatasetで取得した方がコードとしては分かりやすい

• Tweet