JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでページ内のすべてのDOM要素をループ処理してコンソールに出力する方法

Webページ上のすべてのDOM要素を取得してループ処理したい場合、document.getElementsByTagName('*') を使うのが最もシンプルな方法です。ワイルドカード「*」を指定することで、ページ内のすべてのタグ要素を一括で取得できます。あとは取得したHTMLCollectionの長さ（length）分だけfor文で繰り返し処理を行い、各要素を console.log() で出力すればOKです。

基本的なコード

var tags = document.getElementsByTagName("*");
for (var i = 0, max = tags.length; i < max; i++) {
    console.log(tags[i]);
}

このコードでは、まず getElementsByTagName("*") ですべての要素を取得し、変数 tags に格納しています。続くforループで、要素の総数（tags.length）だけ繰り返し、1つずつコンソールへ出力していきます。

実行例

以下は、実際のHTMLページに組み込んだ完全なサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Demo</h1>
<label>
名前を入力してください：
<input type="text" id="txtName">
</label>
<button type="submit">保存</button>
<script>
    var tags = document.getElementsByTagName("*");
    for (var i = 0, max = tags.length; i < max; i++) {
        console.log(tags[i]);
    }
</script>
</body>
</html>

プログラムの実行方法

上記のコードを「index.html」などのファイル名で保存します。その後、VS Codeエディタで該当ファイルを右クリックし、「Open with Live Server（Live Serverで開く）」を選択してブラウザで表示してください。

実行結果

このプログラムを実行すると、ブラウザの開発者ツール（デベロッパーツール）のコンソール画面に、<html>、<head>、<meta>、<title>、<body>、<h1>、<label>、<input>、<button>、<script> など、ページ内に存在するすべてのDOM要素が順番に出力されます。各要素をクリックすれば、Elementsパネルと連動して該当箇所を確認することも可能です。

補足：querySelectorAllを使う方法

より現代的な書き方として、document.querySelectorAll('*') を使う方法もあります。こちらはNodeListを返すため、forEach() メソッドで簡潔にループ処理を記述できます。

document.querySelectorAll("*").forEach(function(el) {
    console.log(el);
});

用途やコードスタイルに合わせて、使いやすい方法を選択するとよいでしょう。

  1. JavaScriptでオブジェクトを含む「配列の配列」をループ処理する方法

    JavaScriptでオブジェクトを含む多次元配列をループするには？JavaScriptでは、オブジェクトを含む配列の配列（入れ子構造の配列）をループ処理する際、forEach()メソッドをネストして使用し、さらにfor...inループで各オブジェクトのプロパティにアクセスするのが一般的な方法です。以下に、具体的な実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device

  2. JavaScriptでgetElementsByClassName()を正しくループ処理する方法

    JavaScriptで要素を正しく反復処理（ループ処理）するには、document.getElementsByClassName() を使用します。getElementsByClassName() はDocumentインターフェースのメソッドの一つで、指定したクラス名を持つすべての要素をHTMLCollectionとして返します。getElementsByClassName()の基本的な使い方戻り値は配列に似たコレクション（HTMLCollection）であるため、通常のfor文を使って各要素に順番にアクセスできます。以下は、同じクラス名を持つ複数のdiv要素を反復処理して、それぞれの内容をコ