【JavaScript】data属性の取得・追加・変更する方法

const elem = document.getElementById('sample'); // ①
elem.dataset.name; // ②

<p id="name1" data-name="yamada">山田</p>

const name1 = document.getElementById("name1");
console.log(`data-name属性の値：${name1.dataset.name}`);

const elem = document.getElementById('sample'); // ①
elem.dataset.name = "値"; // ②

<p id="name2">鈴木</p>

const name2 = document.getElementById("name2");
name2.dataset.name = "suzuki";

const elem = document.getElementById('sample'); // ①
elem.dataset.name = "値"; // ②

<p id="name3" data-name="yamamoto">田中</p>

const name3 = document.getElementById("name3");
name3.dataset.name = "tanaka";