何でsetAttribute/getAttribute使うんですか？

getAttribute使う必要なくね？と思ってまとめた投稿ですが、「いやいや違うんだぜ坊や」とかあればコメントください。
(JavaScript触り始めて2ヶ月くらいなので何かが抜けてるのかも)

はじめに

年末くらいからjavaScriptの勉強を始めたのですが、WEB記事等を読んでいてふと疑問が湧きました。

JavaScriptでDOMを扱う系の記事を見ていると、getAttribute()/setAttribute()を使って属性を操作するサンプルをよく見かけると思います。

でも、属性って普通にドットアクセスでも取得・設定できますよね？

let testElement = document.getElementById('test');

// ドットアクセス
console.log(testElement.id);

// setAttribute/getAttribute
console.log(testElement.getAttribute('id'));

// ★どちらでも結果は同じ★

じゃあgetAttribute()/setAttribute()使う必要なくね？

と安直に思ったのですが、方々のWEB記事でgetAttribute()/setAttribute()を頻繁に見かけるので何か理由があるはずです。

なので、JavaScriptのDOMエレメントの属性の扱いについて掘り下げることで、getAttribute()/setAttribute()を使う理由を探っていきたいと思います。

DOMエレメントの属性にアクセスする方法３つ

まず、DOMエレメントの属性にアクセスする方法は大きく分けて以下の３つがあるようです。

３番目のattributesは、デバッグ用途以外の使い道が思いつかないので今回は省略します。


つまり、ドットアクセス VS setAttribute()/getAttribute()です。


ということで、まずはsetAttribute()/getAttribute()のドキュメントを見ていきたいと思います。

https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute
https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute

あれ、むしろsetAttributeって非推奨では…?

ドキュメントを読んでみたところ、setAttribute() / getAttribute()はむしろ非推奨ではないかと思われる記述がありました。

setAttribute() を使ってある属性、XUL や HTML の特別な値、および HTML の選択領域の変更は、属性がデフォルト値を特定している場合に一貫性の無い動作となります。現在の値にアクセスしたり、変更したりするにはプロパティを使用すべきです。具体例として、 elt .setAttribute(‘value’, val ) の代わりに elt .value を使用します。

https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute#notes

少なくとも現在の値を変更・参照する場合は、setAttribute/getAttributeよりもドットアクセスが推奨されているようです。

というか、現在の値以外にアクセスしたいケースってあるのでしょうか…？

現在の値以外にアクセスするのは凄くレアケースだと思うので、基本的にはドットアクセス推奨と考えて良さそうです。

私なりの結論

公式ドキュメント以外も日本語記事・英語記事ざっと見ましたが、setAttribute() / getAttribute()を積極的に使う理由は見つかりませんでした。
(確証バイアスかも)

DOMエレメントとかあまり理解していませんが、JavaScriptの世界に降りてきた時点でそれはJavaScriptオブジェクトなので、属性は普通にドットアクセスで使用すれば十分だと思います。

それに、入力の手間やコードの見易さを考慮しても明らかにドットアクセスが優れていると思います。
(プロパティ名を文字列で書きたくない…)

先ほどのサンプルコードを見ればその違いは一目瞭然ですね。

// ドットアクセス
console.log(testElement.id);

// setAttribute() / getAttribute()
console.log(testElement.getAttribute('id'));

ということで、私の結論としては、

DOMエレメントの属性を使用する際にgetAttribute/setAttributeを使う必要はありません。

…おかしいな、、この記事の終着点は、「〇〇という理由でgetAttribute/setAttributeを使うべきということがわかりました！」になるはずだったんだけどな。。。

※本当にど素人の調査・考察なので何かが抜けているかもしれません。
getAttribute/setAttributeを使用すべき理由・getAttribute/setAttributeでしか対応できないケースがあればコメントで教えてください。

参考

https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript
https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute
https://developer.mozilla.org/ja/docs/Web/API/Element/attributes