JavaScript/DOM/Attribute

基本概念

Attribute（属性）はHTML要素の追加情報を定義する名前と値のペアです。DOMではElement.getAttribute()とElement.setAttribute()メソッドで操作できます。

主なメソッド

// 取得
element.getAttribute("class");

// 設定
element.setAttribute("class", "new-class");

// 削除
element.removeAttribute("class");

// 存在確認
element.hasAttribute("class"); // true/false

データ属性

カスタムデータを要素に保存するためのdata-*属性：

// HTML: <div data-user-id="123">
element.dataset.userId; // "123"
element.setAttribute("data-user-id", "456");

属性とプロパティの違い

// 属性はHTML文字列として保持
element.getAttribute("value"); // HTML属性値

// プロパティはJavaScriptオブジェクトとして保持
element.value; // 現在の値

ブール属性

checked、disabled等の真偽値を表す属性：

// 存在するだけで true
// <input type="checkbox" checked>

// JavaScript での操作
element.checked = true;
element.setAttribute("checked", ""); // 属性を設定

名前空間付き属性

XMLで使用される名前空間付き属性の操作：

element.setAttributeNS(namespace, "xml:lang", "ja");
element.getAttributeNS(namespace, "lang");