DOM操作の基本とパフォーマンスの良い書き方

DOMとは？基本をおさらい

DOM（Document Object Model）は、HTMLやXML文書をJavaScriptから操作するためのインターフェースです。HTMLドキュメントは、ツリー構造を持つDOMとしてブラウザに解釈され、JavaScriptから要素の取得・追加・削除・変更などが可能になります。

例えば、以下のようなHTMLがあるとします：

<ul id="fruits">
  <li>Apple</li>
  <li>Banana</li>
</ul>

このul要素を取得するには次のように書きます：

const list = document.getElementById('fruits');

その他の取得方法：

document.querySelector('#fruits'); // CSSセレクタ形式

よく使うDOM操作の基本

要素の取得

const elem = document.querySelector('.item');

要素の作成・追加

const li = document.createElement('li');
li.textContent = 'Orange';
document.querySelector('#fruits').appendChild(li);

要素の削除

const target = document.querySelector('#fruits li');
target.remove();

属性の操作

const img = document.querySelector('img');
img.setAttribute('alt', '説明文');

パフォーマンスを意識したDOM操作のポイント

1. DOMアクセスの回数を減らす

DOM操作はコストが高いため、同じ要素に複数回アクセスしないようにします。

NG例：

for (let i = 0; i < 100; i++) {
  document.querySelector('#list').innerHTML += `<li>Item ${i}</li>`;
}

改善：

const list = document.querySelector('#list');
let html = '';
for (let i = 0; i < 100; i++) {
  html += `<li>Item ${i}</li>`;
}
list.innerHTML = html;

2. フラグメントを使ってまとめて操作

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.querySelector('#list').appendChild(fragment);

3. 再描画の抑制（Reflow/Repaintの最小化）

スタイル変更やDOMの挿入・削除は、レイアウトの再計算を引き起こすため、なるべくまとめて行いましょう。

NG例：

const box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

改善：

const box = document.querySelector('.box');
box.style.cssText = 'width: 100px; height: 100px; background-color: red;';

ライブラリの活用とその利点

jQueryやReactのようなライブラリ・フレームワークは、DOM操作の煩雑さやパフォーマンス問題をうまく抽象化してくれます。特にReactでは仮想DOM（Virtual DOM）を用いて、最小限の差分のみを更新することで高速な描画が実現されています。

ただし、ライブラリを使う場合でも基本的なDOMの仕組みを理解しておくことは重要です。

まとめ：パフォーマンスと可読性を両立するために

DOM操作はWeb開発に欠かせない基本技術ですが、何気ない書き方がパフォーマンスに悪影響を及ぼす可能性もあります。

• DOMアクセスは変数に一度格納して使いまわす
• innerHTMLの多用は避けて、必要ならテンプレート文字列でまとめて処理
• DocumentFragmentで挿入をまとめる
• スタイル変更はまとめて適用

このようなポイントを意識して、読みやすく、高速に動作するコードを書くことを心がけましょう。