1. ホーム
  2. javascript

[解決済み] jQueryとdocument.querySelectorAllの比較

2022-03-05 14:38:25

質問

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倍の行数になってしまうでしょう。また、クロスブラウザの問題を考慮する必要があり、そのために スピードの優位性 (信頼性に加えて)ネイティブコードの