概要: このチュートリアルでは、HTML属性とDOMオブジェクトのプロパティ間の関係について学びます。
WebブラウザがHTMLページを読み込むとき、ドキュメントのDOMノードに基づいて対応するDOMオブジェクトを生成します。
たとえば、ページに次のinput要素が含まれている場合
<input type="text" id="username">Code language: JavaScript (javascript)WebブラウザはHTMLInputElementオブジェクトを生成します。
input要素には2つの属性があります
- 値が
textのtype属性。 - 値が
usernameのid属性。
生成されたHTMLInputElementオブジェクトには、対応するプロパティがあります
- 値が
textのinput.type。 - 値が
usernameのinput.id。
言い換えれば、WebブラウザはHTML要素の属性をDOMオブジェクトのプロパティに自動的に変換します。
ただし、Webブラウザは*標準*属性のみをDOMオブジェクトのプロパティに変換します。要素の標準属性は、要素の仕様にリストされています。
属性とプロパティのマッピングは、必ずしも1対1ではありません。例えば
<input type="text" id="username" secured="true">Code language: JavaScript (javascript)この例では、securedは非標準属性です。
let input = document.querySelector('#username');
console.log(input.secured); // undefinedCode language: JavaScript (javascript)属性メソッド
標準属性と非標準属性の両方にアクセスするには、次のメソッドを使用します
element.getAttribute(name)– 属性の値を取得するelement.setAttribute(name, value)– 属性に値を設定するelement.hasAttribute(name)– 属性の存在を確認するelement.removeAttribute(name)– 属性を削除する
element.attributes
element.attributesプロパティは、特定の要素で使用可能な属性のライブコレクションを提供します。例えば
let input = document.querySelector('#username');
for(let attr of input.attributes) {
console.log(`${attr.name} = ${attr.value}` )
}Code language: JavaScript (javascript)出力
type = text
id = username
secure = trueCode language: JavaScript (javascript)element.attributesはNamedNodeMapであり、配列ではないため、配列のメソッドはありません。
属性とプロパティの同期
標準属性が変更されると、いくつかの例外を除き、対応するプロパティが自動的に更新されます。またその逆も同様です。
次のinput要素があるとします
<input type="text" id="username" tabindex="1">Code language: JavaScript (javascript)次の例は、tabindex属性の変更がtabIndexプロパティに伝播され、その逆も同様であることを示しています
let input = document.querySelector('#username');
// attribute -> property
input.setAttribute('tabindex', 2);
console.log(input.tabIndex); // 2
// property -> attribute
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3Code language: JavaScript (javascript)次の例は、value属性が変更されると、valueプロパティに反映されますが、その逆は反映されないことを示しています
let input = document.querySelector('#username');
// attribute -> property: OK
input.setAttribute('value','guest');
console.log(input.value); // guest
// property -> attribute: doesn't change
input.value = 'admin';
console.log(input.getAttribute('value')); // guestCode language: JavaScript (javascript)DOMプロパティは型付き
属性の値は常に文字列です。ただし、属性がDOMオブジェクトのプロパティに変換されると、プロパティの値は文字列、ブール値、オブジェクトなどになります。
次のcheckbox要素には、checked属性があります。checked属性がプロパティに変換されると、ブール値になります
<input type="checkbox" id="chkAccept" checked> Accept
let checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // trueCode language: JavaScript (javascript)次に、style属性を持つinput要素を示します
<input type="password" id="password" style="color:red;with:100%">Code language: JavaScript (javascript)style属性は文字列ですが、styleプロパティはオブジェクトです
let input = document.querySelector('#password');
let styleAttr = input.getAttribute('style');
console.log(styleAttr);
console.dir(input.style);Code language: JavaScript (javascript)出力
[object CSSStyleDeclaration]Code language: JavaScript (javascript)data-*属性
カスタム属性を要素に追加する場合は、data-を先頭に追加する必要があります（例：data-secured）。これは、data-で始まるすべての属性が開発者による使用のために予約されているためです。
data-*属性にアクセスするには、datasetプロパティを使用できます。たとえば、カスタム属性を持つ次のdiv要素があるとします
<div id="main" data-progress="pending" data-value="10%"></div>Code language: JavaScript (javascript)次に、datasetプロパティを使用してdata-*属性にアクセスする方法を示します
let bar = document.querySelector('#main');
console.log(bar.dataset);Code language: JavaScript (javascript)出力
[object DOMStringMap] {
progress: "pending",
value: "10%"
}Code language: JavaScript (javascript)概要
- 属性はHTML要素で指定されます。
- プロパティはDOMオブジェクトで指定されます。
- 属性はそれぞれプロパティに変換されます。
- 要素の標準およびカスタム属性にアクセスするには、
element.attributesプロパティを使用します。 data-*属性にアクセスするには、element.datasetプロパティを使用します。
