DOM

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

更新日：2020/07/09

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

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

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

 

data属性の取得

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

html


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

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

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

JavaScript


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

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

指定した属性が存在しない場合は、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 ); // 属性１

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

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

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

JavaScript


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

const dataAttr = div.dataset.attrTest;

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

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": "属性１" }

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="属性１"></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>

更新日：2020/07/09

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

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

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

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

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

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

 

このサイトは、リンクフリーです。大歓迎です。