【中学生でもわかる】JavaScriptのattributes入門

programming
最短転職

こんにちは、フローです。

今回は、Web開発を学んでいると、

様々なHTML要素とその属性について学ぶことになります。

それらの属性にプログラムからアクセスしたい場合はどうすればいいでしょう？

今回は、そのような場合に使えるJavaScriptの

attributesプロパティについて学びましょう。

1. attributesとは

まずは、attributesが何であるかから始めます。

JavaScriptにおけるHTML要素のプロパティで、

その要素が持つすべての属性情報を名前と値のペアとして保持します。

たとえば、

次のようなHTML要素があった場合、

<div id="myDiv" class="myClass" style="color: red;"></div>

この要素のattributesプロパティは以下の3つの属性を持ちます：id、class、style。

2. どんな時に使うのか

attributesは、要素の属性にアクセスしたり操作したりするときに使います。

例えば、

ある要素のすべての属性をリストアップしたい、

または特定の属性の値を変更したい、などの場合です。

3. パターン3つ

それでは、

具体的な使い方を3つのパターンで見ていきましょう。

全ての属性をリストする

ある要素のすべての属性をリストアップしたい場合、

attributesプロパティを使って以下のように書けます

let element = document.querySelector('.myClass');
let attrs = element.attributes;

for(let i = 0; i < attrs.length; i++) {
    console.log(`属性名: ${attrs[i].name}, 属性値: ${attrs[i].value}`);
}

このコードは、

myClassというクラスを持つ最初の要素を選択し、

その要素のすべての属性を取得します。

その後、各属性の名前と値をコンソールに表示します。

特定の属性値を取得する

次に、特定の属性の値を取得する方法です

let element = document.querySelector('#myId');
let attr = element.attributes.getNamedItem('data-my-attribute').value;

console.log(attr);

このコードは、

myIdというIDを持つ要素からdata-my-attributeという名前の属性を取得し、

その値をコンソールに表示します。

属性値を変更する

また、既存の属性の値を変更することも可能です

let element = document.querySelector('#myId');
let attr = element.attributes.getNamedItem('data-my-attribute');

attr.value = '新しい値';

このコードでは、myIdというIDを持つ要素のdata-my-attributeという属性の値を'新しい値'に変更しています。

4. attributesの注意点

attributesはすべての属性にアクセスするのに便利ですが、それぞれの属性専用のメソッドやプロパティが存在する場合には、それらを利用することが推奨されます。例えば、class属性にアクセスするにはclassNameまたはclassListプロパティが、style属性にアクセスするにはstyleプロパティが専用に用意されています。

これら専用のメソッドやプロパティを利用することで、より簡潔に、また直感的にコードを書くことができます。ただし、全ての属性に専用のメソッドやプロパティがあるわけではないので、そういった場合はattributesを利用します。

悪い例

let element = document.querySelector('#myId');
let className = element.attributes.getNamedItem('class').value;

上記のコードでは、

attributesを使用してclass属性を取得していますが、

classNameやclassListを使用すべきです。

良い例

let element = document.querySelector('#myId');
let className = element.className;

このコードでは、

classNameプロパティを使用してclass属性を取得しています。

これは前述の例よりも簡潔で直感的です。

5. まとめ

今回はJavaScriptのattributesプロパティについて学びました。

これはHTML要素のすべての属性にアクセスするためのプロパティで、

全ての属性をリストアップしたり、

特定の属性の値を取得・変更するのに使用します。

ただし、属性ごとに専用のメソッドやプロパティが提供されている場合は、それらを使用するのが一般的です。

JavaScriptの学習は、一歩一歩進めていくことが大切です。

一度にすべてを理解しようとせず、

少しずつ新しい概念を身につけていきましょう。

今回学んだattributesも、その一歩となるはずです。

どんな道でも一歩から。JavaScriptの旅路を一緒に歩んでいきましょう。

レッツチャレンジ！