JavaScriptでHTML要素（DOM）を指定するときの解法。ここ数年はjQueryのフレームワークに依存せず、VanillaJSでコーディングするのが定石となっています（バニラと言っても高収入じゃないよ）。jQueryでHTML要素を指定すると要素はjQueryオブジェクトとして扱われるので、他のJavaScriptとの相性が悪くパフォーマンスも低下します。逆にVanillaJSで指定すると、そのままDOMとして認識されるので汎用的かつ他のJavaScriptと相性も良く開発の工数も軽減できます。

今回はVanillaJSでDOMを指定するとき、パフォーマンスや互換を考えた使い分けをメモしていきます。

JavaScriptでDOMを取得する

HTMLタグ名で要素を取得

const elms = document.getElementsByTagName('p');
Array.from(elms).forEach(elm => {
 //処理
 elm.style.color = 'red';
});

ID属性の要素を取得

id属性の要素を取得するときは素直にgetElementByIdを使う。内部的にはこちらの方が速いはず。

const elm = document.getElementById('#elm');

class属性の要素取得

class属性の要素を取得するときはgetElementsByClassNameを使い、ループ処理でぶん回す。

const elms = document.getElementsByClassName('elm');
Array.from(elms).forEach(elm => {
 //処理
 elm.style.color = 'red';
});

複雑なセレクタで要素取得

getElementByIdやgetElementsByClassName等、様々な処理を組み合わせるよりquerySelectorを使ったほうが可読性も上がりデバッグも楽。

これはjQueryのセレクタライクな書き方ができるのでわかりやすいですね、ってか逆輸入したやつだよね 知らんけど。

const elm = document.querySelector('#elm > .elm i');

複雑なセレクタで要素を複数処理

querySelectorではなく、querySelectorAllで取得後ループで処理。

const elms = document.querySelectorAll('#elm > .elm i');
elms.forEach(elm => {
 //処理
 elm.style.color = 'red';
});

余談　ちなみに古いEdge（旧ブラウザエンジン）とかIE11とかだと、forEachがうごかないのでfor文を使った記述をしていました。まぁレガシーな記述ではありますが、ぶっちゃけ1番確実だと思います。

const elms = document.querySelectorAll('#elm > .elm i');
for (let i = 0; i < elms.length; i++) {
 elms[i].style.color = 'red';
}

すべてquerySelectorで統一しても楽なのですが、パフォーマンスを最適化させる場合は状況によって使い分けたほうがいいです。標準的なWebサイトの構築であればそこまで問題にはなりませんが、大きなWebアプリの構築となると処理にも差が出てきます。

にゃん。

余談

ここ数年はECMAScript（ES）による標準化や、Vue.js・ReactなどといったモダンJavaScriptフレームワークの躍進。IEのサポートが不要になったことで、後方互換を得意としたjQueryから脱却する動きが活発になっています。しかし一般的なWeb制作においては、学習のしやすさ・ドキュメントの多さ・プラグインの充実性などでjQueryを活用するケースはまだまだあります。WordPressやMovable Typeなどもフロントエンド面ではjQueryが動いていますしね。

要はメリットとデメリットを把握した上で、使い分けようってことですね。

おしまい♥