[解決済み] ページ上のすべての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>
の子供たちです。
関連
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] オブジェクトをメンバーとして、プレーンなJavaScriptオブジェクトをループさせる方法
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] JavaScript で DOM ノードのすべての子要素を削除する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
JavaScriptの配列共通メソッド解説
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
JavaScriptのStringに関する共通メソッド
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方