【JavaScript】document.all が非推奨の理由と代替手法完全ガイド｜getElementById・querySelector・querySelectorAll への移行まで

2024.05.10

業務で古いコードを触っていると、document.all という見慣れないコードに遭遇することがあります。document.all は Internet Explorer 時代に広く使われた非標準の API で、現代の Web 開発では使用禁止です。

この記事では、document.all が非推奨な理由・特殊な挙動・モダンな代替手法への移行パターンを解説します。古いコードのリファクタリングに役立ててください。

この記事でわかること

  • document.all とは何か（IE時代の経緯）
  • document.all が非推奨・使用禁止な理由
  • document.all の特殊な挙動（falsy だがオブジェクト）
  • 代替手法: getElementById / querySelector / querySelectorAll
  • よく使われるパターンの移行例（before / after）
  • レガシーコードに document.all があるかチェックする方法
スポンサーリンク

document.all とは

document.all は、HTML 文書内の すべての要素をコレクションとして取得 するプロパティです。Internet Explorer 4 で導入され、IE 時代には広く使われていました。

// IE 時代の書き方
var allElements = document.all;

// インデックスでアクセス
var first = document.all[0];

// name または id でアクセス
var elem = document.all["elementId"];

// タグ名でフィルタ
var inputs = document.all.tags("input");
document.all は W3C 非標準
HTML 仕様には document.all に関する特別な扱いが定義されており、一部のブラウザは後方互換のために実装しています。しかし 新規コードでの使用は絶対に禁止です。

なぜ非推奨・使用禁止なのか

問題 詳細
W3C 非標準 HTML 仕様に本来存在しない。ブラウザが後方互換のため実装しているだけ
特殊な真偽値の挙動 if (document.all) が false になる（後述）でバグの元
IE 依存コードの典型 IE 固有コードを書いていた証拠。モダンブラウザではなくても動くが意図しない動作のリスク
可読性・保守性が低い querySelector に比べて機能が限定的で、CSS セレクタも使えない

document.all の特殊な挙動（バグの元）

document.all は オブジェクトなのに条件式で false になるという特殊な挙動を持ちます。これは HTML 仕様に意図的に定義されたレガシー挙動です。

// document.all はオブジェクト
console.log(typeof document.all);    // "undefined"（特殊！）
console.log(document.all == false);  // true（特殊！）
console.log(document.all == null);   // true（特殊！）

// IE 判定によく使われていたパターン
if (document.all) {
    // IE 用の処理
} else {
    // 非IE の処理
}
// → 現代のブラウザでは「else」側が実行される
typeof document.all は “undefined” を返す
仕様上、typeof document.all は "undefined" を返しますが、document.all 自体は実際に使用可能なオブジェクトです。これは IE 判定のための意図的な特殊挙動です。このような紛らわしい挙動がバグを生む原因になります。

代替手法1：getElementById（ID で1要素取得）

最もシンプルな代替です。ID で特定の要素を取得します。

// document.all["elementId"] の代替
const elem = document.getElementById("elementId");

// null チェックを忘れずに
if (elem) {
    elem.style.color = "red";
}

代替手法2：querySelector（CSSセレクタで1要素取得・推奨）

CSS セレクタで最初にマッチした要素を取得します。最も柔軟で現代的な方法です。

// ID で取得
const elem = document.querySelector("#elementId");

// クラス名で取得
const first = document.querySelector(".className");

// タグ名で取得
const input = document.querySelector("input[type=text]");

// 子孫セレクタ
const btn = document.querySelector(".container button.primary");

代替手法3：querySelectorAll（複数要素取得・推奨）

マッチするすべての要素を NodeList で返します。document.all の全要素取得に最も近い代替です。

// document.all の代替（全要素取得）
const allElements = document.querySelectorAll("*");

// 特定タグの全要素
const inputs = document.querySelectorAll("input");

// forEach で処理
inputs.forEach(input => {
    console.log(input.value);
});

// クラスを持つすべての要素
const items = document.querySelectorAll(".item");

代替手法4：getElementsByTagName / getElementsByClassName

// タグ名でフィルタ（document.all.tags("input") の代替）
const inputs = document.getElementsByTagName("input");

// クラス名でフィルタ
const items = document.getElementsByClassName("item");

// HTMLCollection は Array.from で配列に変換
Array.from(inputs).forEach(input => {
    console.log(input.name);
});

document.all からの移行パターン一覧

document.all（旧） 代替手法（新） 備考
document.all["id"] document.getElementById("id") ID取得はこちら
document.all.tags("input") document.querySelectorAll("input") タグ名でフィルタ
document.all[0] document.querySelector("*") 最初の要素
if (document.all) 不要（IE判定は廃止） IE対応コードは削除

レガシーコードの document.all をチェックする方法

プロジェクトに document.all が残っていないか検索する方法です。

// ブラウザコンソールで確認（単純な文字列検索は文書中のスクリプトには使えないため注意）

// grep でファイル検索（ターミナルで）
// grep -r "document\.all" ./src/
移行のポイント

  • document.all["id"] → getElementById または querySelector("#id")
  • document.all.tags("タグ") → querySelectorAll("タグ")
  • if (document.all)（IE判定）→ 現代では不要なので削除
  • IE 固有のコードは全体的に見直し、モダンブラウザ対応に書き換える

よくある質問

Q. document.all は現代のブラウザで使えますか？
A. Chrome・Firefox・Edge などのモダンブラウザは後方互換のために document.all を実装していますが、W3C 非標準です。将来的にサポートが廃止される可能性があり、新規コードでの使用は禁止です。既存コードは querySelector 系に移行してください。
Q. querySelectorAll と getElementsByTagName の違いは？
A. querySelectorAll は CSS セレクタに対応した静的な NodeList を返します。getElementsByTagName は動的な HTMLCollection を返し（DOM が変化すると自動更新）、セレクタはタグ名のみです。現代では querySelectorAll の使用が推奨されています。
Q. querySelector と getElementById、どちらが速いですか？
A. getElementById の方が若干高速です（ハッシュテーブルで直接アクセス）。ただし現代のブラウザでは差はごくわずかで、実用上は気にする必要はありません。ID での取得には getElementById、その他のケースには querySelector を使うのが一般的です。
Q. document.all を使っているコードをまとめて修正する方法は？
A. VSCode のグローバル検索（Ctrl+Shift+F）で document.all を検索して一覧表示し、1件ずつ確認しながら修正してください。一括置換は文脈によって異なる代替が必要なため、自動置換は危険です。
Q. document.all ではなく document.getElementById(null) のようなコードもあります。
A. null を渡すと JavaScript は "null"（文字列）として解釈し、id が “null” の要素を探します。IE 時代のバグのあるコードです。正しい引数（文字列の ID）を渡すように修正してください。

まとめ

document.all からの移行まとめ

  • document.all は IE 時代の W3C 非標準 API → 新規コードでは絶対使用禁止
  • if (document.all) による IE 判定コードは現代では不要 → 削除
  • ID 取得: getElementById または querySelector(“#id”)
  • CSS セレクタで1つ取得: querySelector
  • CSS セレクタで複数取得: querySelectorAll
  • タグ名でフィルタ: querySelectorAll(“タグ名”)

あわせて読みたい