1. ホーム
  2. javascript

[解決済み] ページ上のすべてのDOM要素をループするにはどうすればよいですか?

2022-04-22 02:32:32

質問

あるページ上のすべての要素をループさせようとしているので、このページ上に存在するすべての要素に特別なクラスがあるかどうかをチェックしたい。

では、「every element」をチェックするには、どうすればよいのでしょうか。

どのように解決するのですか?

を渡すことができます。 * から getElementsByTagName() で、ページ内の全要素を返すようにする。

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}

を使用することができることに注意してください。 querySelectorAll() があれば(IE9+、IE8ではCSS)、特定のクラスを持つ要素だけを検索することができます。

if (document.querySelectorAll)
    var clsElements = document.querySelectorAll(".mySpeshalClass");
else
    // loop through all elements instead

そうすれば、モダンブラウザでも確実に高速化されます。


ブラウザがサポートするようになった NodeListのforeach . これは、独自のforループを書く代わりに、要素を直接ループさせることができることを意味します。

document.querySelectorAll('*').forEach(function(node) {
    // Do whatever you want with the node object.
});

パフォーマンスノート - 特定のセレクタを使用して、探しているものをスコープするように最善を尽くしてください。普遍的なセレクタは、ページの複雑さに応じて多くのノードを返すことができます。また document.body.querySelectorAll の代わりに document.querySelectorAll を気にしない場合は <head> の子供たちです。