MENU

JavaScriptDOM

【JavaScript】 data属性を取得・設定・追加・列挙する

更新日:2020/07/09

 

 

htmlはdata属性がサポートされています。

 

この属性は、タグごとに任意のデータをセットできて、とても便利です。

 

そこでここでは、JavaScript上でhtmlのdata属性を操作する方法をお伝えします。

 

data属性の取得

 

data属性の取得方法は、2種類あります。
ここでは次のhtmlタグを例にして、data属性の値を取得してみます。

 

html

 


<div id="div1" data-attr-test="属性1"></div>

 

方法1:getAttribute()を使用する

 

getAttribute()を使用すると、htmlタグ上の属性名をそのまま使用してdata属性値を取得できます。

 

JavaScript

 


const div = document.getElementById( "div1" );
const dataAttr = div.getAttribute( "data-attr-test" );

console.log( dataAttr ); // 属性1

 

指定した属性が存在しない場合は、nullか空文字("")を返します。
これはブラウザによって異なるようです。

 

仮に空文字が返ってきた場合、属性の値が空なのか、属性が存在しないのかを判断することができません。

 

そのため、まずはhasAttribute() を使用して属性が存在するか確認します。

 

下の例は、属性が存在しないときnullに正規化しています。

 

JavaScript

 


const div = document.getElementById( "div1" );

const dataAttr = ( div.hasAttribute( "data-attr-test" ) ) ?
                               div.getAttribute( "data-attr-test" ) : null;

console.log( dataAttr ); // 属性1

 

方法2:datasetプロパティを使用する

 

DOMの解析時にdatasetという名前のdata属性用プロパティが作成されます。

 

このプロパティ参照することで、data属性を取得できます。

 

JavaScript

 


const div = document.getElementById( "div1" );

const dataAttr = div.dataset.attrTest;

console.log( dataAttr ); // 属性1

 

datasetプロパティは、属性名の data- 以降の文字列をプロパティとして持つオブジェクトです。

 

なおそれ以降に - が含まれる場合camelCaseとなり、 - が削除され、続く文字が大文字に変換されます。

 

なお参照したいdata属性が存在しない場合、値はundefinedになります。

 

JavaScript

 


const div = document.getElementById( "div1" );

const dataAttr = div.dataset.abcde;

console.log( dataAttr ); // undefined

 

 

 

data属性を一覧で取得

 

前項で紹介したdatasetプロパティを参照することで、data属性の一覧を取得できますが、このプロパティは古いブラウザでは利用できません。

 

またcamelCaseに変換されてしまうため、使いにくい場面もあります。

 

そこで独自に、data属性を抜き出してみます。

 

JavaScript

 


const getDataAttributes = id =>{
    const elm = document.getElementById( id );
    const result={};
    if (elm.hasAttributes()) {
        const attrs = elm.attributes;
        for(let i = 0 ; i < attrs.length; i++) {
            const attr = attrs[i];
            if( attr.name.indexOf( "data-" ) === 0 ){

                result[attr.name] = attr.value; // (1)

            }
        }
    }
    return result;
};

console.log( getDataAttributes("div1") );

// 結果
// Object { "data-attr-test": "属性1" }

 

attributesプロパティには、idやhrefを含む属性がセットされています。
このプロパティのメンバから、先頭が"data-"で始まるものを抜き出しています。

 

なお上のコードの(1)を次のコードに変更すると、属性名をcamaelCaseに変換できます。

 

JavaScript

 


                const camelCase = attr.name.substring("data-".length)
                                  .replace(/-(.)/g,e=>e[1].toUpperCase());
                result[camelCase] = attr.value;

data属性の変更・設定

 

次は、data属性の変更や設定をしてみます。
基本的には、data属性の取得と逆のことをおこないます。

 

ここでは次のhtmlタグを例にして、data属性の値を取得してみます。

 

html

 


<div id="div1" data-attr-test="属性1"></div>

 

方法1:setAttribute()を使用する

 

setAttribute()を使用すると、data属性を変更できます。

 

JavaScript

 


const div = document.getElementById( "div1" );
div.setAttribute( "data-attr-test" ,"属性変更" );
div.setAttribute( "data-attr-test2" ,"属性追加" );

 

存在しない属性は新規で追加されます。
上のコードを実行すると、htmlが次のように変更されます。

 

html

 


<div id="div1" data-attr-test="属性変更" data-attr-test2="属性追加"></div>

 

次のdatasetプロパティよりもsetAttribute()の方は遅いという情報があります。

 

しかし数回程度のセットなら、ほとんど差はありません。

 

気にせずに、好きなほうを使うべきです。

 

方法2:datasetプロパティを使用する

 

datasetプロパティの値を変更すると、html上の値を変更することができます。

 

JavaScript

 


const div = document.getElementById( "div1" );
div.dataset.attrTest = "属性変更";
div.dataset.attrTest2 = "属性追加";

 

存在しないプロパティを追加しても、次のhtmlのように反映されます。

 

html

 


<div id="div1" data-attr-test="属性変更" data-attr-test2="属性追加"></div>

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php