【javascript】data属性とは？datasetで、取得、更新、追加する方法

投稿日 : 2022年02月17日 更新日 :

data属性とは

参考

【javascript】属性を設定(setAttribute)、取得(getAttribute)、確認(hasAttribute)する

取得

HTML

  <div class="el" data-value="true"></div> 

javascript

  const el = document.querySelector(".el");
  console.log(el.dataset.value);
  // 結果 : true

取得し、内容を書き換える

HTML

  <p>今日は晴れると思っていた。
    <span class="conjunction" data-value="しかし">(1)</span>
    、雨が降ってしまった。</p>

javascript

  document.querySelector(".conjunction").addEventListener("click", function(){
    this.textContent = this.dataset.value;
  });

getAttributeを使う

HTML

  <div class="el" data-value="true"></div> 

javascript

  const el = document.querySelector(".el");
  console.log(el.getAttribute("data-value"));
  // 結果 : true

更新

HTML

  <div class="el" data-value="true"></div> 

javascript

  const el = document.querySelector(".el");
  console.log(el.dataset.value = "false");

HTML

  <div class="el" data-value="false"></div> 

追加

HTML

  <div class="test"></div>

javascript

  document.querySelector(".test").dataset.name="name"
  document.querySelector(".test").dataset.userNameA="userNameA"
  document.querySelector(".test").dataset.userNameB="userNameB"
  document.querySelector(".test").dataset.value="value"

HTML

  <div 
    class="test" 
    data-name="name" 
    data-user-name-a="userNameA" 
    data-user-name-b="userNameB" 
    data-value="value">
  </div>

まとめ