DOM
属性の操作

備考

属性の取得

一部の属性は、要素のプロパティとして直接アクセスできます（ alt 、 href 、 id 、 title 、 value ）。

var a = document.querySelector("a"),
   url = a.href;

データ属性を含む他の属性には、次のようにアクセスできます。

var a = document.querySelector("a"),
   tooltip = a.getAttribute("aria-label");

データ属性は、 dataset （最新のブラウザー）を使用してアクセスすることもできます。

// <a href="#" data-tracking-number="ABC-123">Widget</a>
var a = document.querySelector("a"),
  tracker = a.dataset.trackingNumber;

属性の設定

一部の属性は、要素のプロパティとして直接アクセスできます（alt、href、id、title、valueなど）。

document.querySelector("a").href = "#top";

データ属性を含む他の属性は、次のように設定できます。

document.querySelector("a").setAttribute("aria-label", "I like turtles");

データ属性は、データセット（現代のブラウザ）を使用して設定することもできます。

var a = document.querySelector("a");
a.dataset.test = "123";
a.dataset['test-2'] = "456";

結果は

<a href="#" data-test="123" data-test-2="456">Widget</a>

属性の削除

直接アクセス可能なプロパティを含む属性を削除するには

document.querySelector("a").removeAttribute("title");

データ属性は次のように削除することもできます（現代のブラウザ）。

// remove "data-foo" attribute
delete document.querySelector("a").dataset.foo;