DOMオブジェクトのHTML属性とプロパティ

《初回公開：2022/08/21 , 最終更新：未》

DOM要素に独自の属性やプロパティを定義してそれを利用する事ができる。

属性とプロパティ

【　目次　】

DOMオブジェクトのHTML属性とプロパティ

DOM要素

html要素へのアクセス（１）-DOMによるアクセス - 愚鈍人

HTMLページのタグ要素はJavaScriptのオブジェクトとして取得・操作する事ができる。
例えば、次のようなDIVタグは

<div id="msg" xxx="aaa" yyy="bbb"></div>

以下のようなコードを使ってJavaScriptのオブジェクトとして取得可能。

let element = document.getElementById("msg");

HTML属性とDOMプロパティ

取得したDOM要素はHTMLの要素であるとともにJavaScriptのオブジェクトでもある。

プログラミングではほとんどの場合、属性とプロパティは同じ意味で用いられるが、DOM要素の場合はHTML属性とDOMプロパティとして区別される。
例えば、上記のdiv要素の場合「id」とか「xxx」,「yyy」とかhtmlタグに記述されたものはHTML属性である。

これに対してDOMのプロパティというのは、
DOMオブジェクトはJavaScriptのオブジェクト(連想配列)でもあり、JavaScriptのオブジェクトとしてアクセスするものを指す。

element.foo = 123;
element.hogi = "aaa";

または連想配列の要素として記述すると

element["foo"] = 123;
element["hogi"] = "aaa";

console.log(element.foo)    // 123
console.log(element.hogi)   // aaa

JavaScriptのオブジェクトなのでメソッドも追加できて

element.func = function () {
    return "何か"
};
console.log(element.func());    // 何か

プロパティを列挙すると

for (const [key, value] of Object.entries(element)) {
    console.log(`${key}: ${value}`);
}

foo: 123
hogi: aaa
func: function(){
    return "何か"
}

DOMオブジェクト(HTML要素)のHTML属性を列挙するにはAttributeなんちゃらというDOMのAPIが用意されていて、
HTML属性を列挙すると

const attrs = element.attributes;
for(let i = 0;i<attrs.length; i++) {
    console.log(attrs[i].name + "->" + attrs[i].value);
}

id->msg
xxx->aaa
yyy->bbb

HTML属性とDOMプロパティは別のものとして扱われるのだが...

標準のHTML属性はプロパティとしてもアクセス可能

HTMLタグには標準のHTML属性が定められていて、
ややこしい事に、ほとんどの標準のHTML属性はDOM オブジェクトのプロパティとしてもアクセスする事ができるようになっていて。
例えば、上記のdivタグの場合のid属性について言えば。

id属性の取得はDOMのAPIであるgetAttributeを使っても

console.log(element.getAttribute('id'));

DOMプロパティのようにアクセスする事もできる。

console.log(element.id);    // msg

通常のプロパティは大文字と小文字を区別しないといけないのだが、
HTMLタグの属性は大文字と小文字を区別しないので、以下のコードでもかまわない。

console.log(element.ID);
console.log(element.getAttribute('ID'));

独自(非標準)のDOM属性の利用

上記divタグのxxx属性やyyy属性は独自の非標準のDOM属性であるので、これを標準のHTML属性のようにDOMプロパティのようにアクセスする事はできない。
AttributeなんちゃらとかのDOMのAPIを使ってのみアクセスすることになる。

【JavaScriptの基本】要素の属性の取得・設定・削除 | ワードプレステーマTCD

HTML属性のAPIはElementオブジェクトのメソッドやプロパティであって

Elementオブジェクト

サンプルコードを以下に示す。

// getAttribute: 特定の属性の取得
console.log(element.xxx);   // undefined
console.log(element.getAttribute('xxx'));   // aaa

// プロパティを変更
element.xxx = "XXX";
console.log(element.xxx);   // XXX
console.log(element.getAttribute('xxx'));   // aaa

// hasAttribute: 属性が存在するかの確認
console.log(element.hasAttribute("xxx"));   // true
// 属性を変更
element.setAttribute("xxx", "XXX");
console.log(element.getAttribute('xxx'));   // XXX

// 属性の削除
element.removeAttribute("xxx");
console.log(element.xxx);   // XXX
console.log(element.getAttribute('xxx'));   // null

// attributes: すべての属性名と属性値を取得
const attrs = element.attributes;
for (let i = 0; i < attrs.length; i++) {
    console.log(attrs[i].name + "->" + attrs[i].value);
}

// getAttributeNames: すべての属性名を取得
const attr_names = element.getAttributeNames();
for (let i = 0; i < attr_names.length; i++) {
    console.log(attr_names[i] + "->" + element.getAttribute(attr_names[i]));
}

attributesはプロパティでgetAttributeNamesはメソッド。
どうも一貫性がないような。