[解決済み] jQueryとdocument.querySelectorAllの比較
質問
jQueryの最大の強みは、DOM内の要素への問い合わせと操作の方法だと何度か聞いたことがあります。
しかし、私の知る限りでは、同じ結果を
document.querySelector
または
document.querySelectorAll
Internet Explorer 8 以上でサポートされています。
つまり、jQueryの最大の強みは純粋なJavaScriptで実現できるのに、なぜそのオーバーヘッドを「危険にさらす」のか、ということです。
jQueryにはCSSセレクタ以外にも、例えばクロスブラウザAJAXや素敵なイベントアタッチメントなどがあることは知っています。しかし、そのクエリの部分は、jQueryの強さの非常に大きな部分です。
何かご意見はありますか?
解決方法は?
document.querySelectorAll()
<ストライク
はブラウザによっていくつかの不一致があり、古いブラウザではサポートされていません。
これはおそらく、現在ではもう何の問題も起こさないでしょう
. これは、非常に直感的でない
スコーピングメカニズム
と、その他いくつかの
あまり良くない機能
. また、javascriptでは、これらのクエリの結果セットを扱うのが難しいのですが、多くの場合、これを行いたいかもしれません。
filter()
,
find()
,
children()
,
parent()
,
map()
,
not()
などなど。もちろん、jQueryが擬似クラスセレクタを扱うことができるのは言うまでもありません。
しかし、私はこれらをjQueryの最強の機能とは考えず、他のもの、例えば、dom上での作業(イベント、スタイリング、アニメーション、操作)などを クロスブラウザ対応 やajaxインターフェースなどです。
jQueryのセレクタエンジンだけが必要な場合は、jQuery自身が使用しているものを使用することができます。 シズル こうすることで、jQuerysのセレクタエンジンのパワーを、厄介なオーバーヘッドなしで手に入れることができます。
編集部 念のためお伝えしておきますが、私はバニラJavaScriptの大ファンです。しかし、1行のjQueryで済むところを10行のJavaScriptが必要になることがあるのは事実です。
もちろん、こんな風にjQueryを書かないように、自分を律しなければなりません。
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();
これは非常に読みにくいですが、後者はかなり明確です。
$('ul.first')
.find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
これに相当するJavaScriptは、上の擬似コードで示されるように、はるかに複雑なものになる。
1) 要素を探す。すべての要素を取るか、最初の要素だけを取るかを検討する。
// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");
2) 子ノードの配列に対して、いくつかの(ネストされた、あるいは再帰的な)ループを介して反復処理を行い、クラスをチェックする(クラスリストはすべてのブラウザで利用できるわけではありません!)。
//.find('.foo')
for (var i = 0;i<e.length;i++){
// older browser don't have element.classList -> even more complex
e[i].children.classList.contains('foo');
// do some more magic stuff here
}
3) cssのスタイルを適用する
// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"
このコードは、jQueryで書くコードの少なくとも2倍の行数になってしまうでしょう。また、クロスブラウザの問題を考慮する必要があり、そのために スピードの優位性 (信頼性に加えて)ネイティブコードの
関連
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]