jQuery対document.querySelectorAll

jQueryの最も強力な資産は、DOM内の要素をクエリおよび操作する方法であると何度も聞いたことがあります。CSSクエリを使用して、通常のJavaScriptでは非常に難しい複雑なクエリを作成できます。ただし、私が知る限り、Internet Explorer 8以降でサポートされているdocument.querySelectorまたはでも同じ結果を得ることができますdocument.querySelectorAll。

それで問題はこれです：jQueryの最も強力な資産が純粋なJavaScriptで達成できるのに、なぜjQueryのオーバーヘッドに「リスク」があるのでしょうか？

jQueryには、CSSセレクター以上のものがあることを知っています。たとえば、クロスブラウザーAJAX、素敵なイベントアタッチなどです。しかし、そのクエリ部分は、jQueryの強みの非常に大きな部分です。

何かご意見は？

document.querySelectorAll() は、ブラウザ間でいくつかの不整合があり、古いブラウザではサポートされてい^ません。^{これにより、現在、問題が発生することはないでしょう}。それは非常に直感的でないスコープメカニズムと他のいくつかのそれほど良くない機能を持っています。また、JavaScriptを使用すると、これらのクエリの結果セットを操作するのが難しくなり、多くの場合、それを実行することができます。：jQueryのは次のようにそれらの作業に機能を提供しfilter()、find()、children()、parent()、map()、not()およびいくつかのより多くの。疑似クラスセレクターで動作するjQuery機能は言うまでもありません。

ただし、私はこれらのものをjQueryの最強の機能とは見なしませんが、クロスブラウザー互換の方法またはajaxインターフェースでのdom（イベント、スタイリング、アニメーション、および操作）の「動作」のような他のもの。

あなただけの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倍のコード行になります。また、ネイティブコードの重大な速度の利点（信頼性以外）を損なうブラウザー間の問題を考慮する必要があります。

IE8以降でページを最適化する場合は、jqueryが必要かどうかを本当に検討する必要があります。最新のブラウザーには、jqueryが提供する多くの資産がネイティブに備わっています。

パフォーマンスを重視する場合は、信じられないほどのパフォーマンス上の利点（2-10高速）を得ることができますネイティブのjavascriptを使用しを。http： //jsperf.com/jquery-vs-native-selector-and-element-style/2

div-tagcloudをjqueryからネイティブのjavascript（IE8 +互換）。その結果は印象的です。わずかなオーバーヘッドで4倍速くなります。

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

Jqueryが必要とするかもしれないJqueryは、非常に優れた概要を提供します。どのネイティブバージョンがどのブラウザバージョンに置き換わりますか。

http://youmightnotneedjquery.com/

付録：ネイティブメソッドがjqueryと競合する方法のさらなる速度比較

• 配列：$ .inArray対Array.indexOf：Jquery 24％遅い

• DOM：$ .empty vs Node.innerHtml：Jquery 97％遅い

• DOM：$ .on vs Node.addEventListener：Jquery 90％遅い

• DOM：$ .find vs Node.queryselectorall：Jquery 90％遅い

• 配列：$ .grep対Array.filter：ネイティブ70％遅い

• DOM：$ .show / hide vs display none：Jquery 85％遅い

• AJAX：$ .ajax vs XMLHttpRequest：Jquery 89％遅い

• 高さ：$ .outerHeight vs offsetHeight：jquery 87％遅い

• Attr：$ .attr vs setAttribute：Jquery 86％遅い

jQueryが非常に人気がある理由を理解するには、どこから来たのかを理解することが重要です。

10年ほど前、トップのブラウザーはIE6、Netscape 8、Firefox 1.5でした。当時、DOMから要素を選択するためのブラウザ以外の方法はほとんどありませんでしたDocument.getElementById()。

したがって、jQuery が2006年にリリースされたとき、それはかなり革新的でした。その当時、jQueryはHTML要素を簡単に選択/変更し、イベントをトリガーする方法の標準を設定しました。これは、jQueryの柔軟性とブラウザーサポートがかつてないほどだったためです。

10年以上が経過した今、jQueryを非常に人気にした多くの機能がjavaScript標準に含まれています。

• jQueryの代わりに、$()今すぐ使用できますDocument.querySelectorAll()
• jQueryの代わりに、$el.on()今使用できますEventTarget.addEventListener()
• jQueryの代わりに、$el.toggleClass()今使用できますElement.classList.toggle()
• ...

これらは、2005年には一般に利用できませんでした。現在、これらが今日であるという事実は、なぜjQueryを使用する必要があるのか​​という疑問を明らかにします。実際、jQueryを使用するべきかどうかという疑問がますます高まっています。

したがって、jQueryなしで十分にJavaScriptを理解していると思われる場合は、ぜひ実行してください！多くの人がjQueryを使用しているからといって、jQueryを使用することを強いられないでください。

それはjQueryが以外にもできるからですquerySelectorAll。

まず、jQuery（特にSizzle）は、CSS2.1-3セレクターをサポートしていないIE7-8などの古いブラウザーで動作します。

さらに、Sizzle（jQueryの背後にあるセレクターエンジン）は、:selected疑似クラス、高度な:not()セレクター、in $("> .children")などのより複雑な構文など、より高度なセレクターインストゥルメントを多数提供します。

また、ブラウザ間で問題なく、jQueryが提供できるすべての機能（プラグインとAPI）を提供します。

はい、単純なクラスおよびIDセレクターに依存できると思う場合、jQueryは多すぎるため、誇張した見返りを支払うことになります。しかし、そうでなく、すべてのjQueryの良さを活用したい場合は、それを使用してください。

jQueryのSizzleセレクタエンジンは、利用querySelectorAll可能な場合に使用できます。また、ブラウザ間の不整合を解消して、均一な結果を実現します。jQueryのすべてを使用したくない場合は、Sizzleを個別に使用できます。これは発明するためのかなり基本的なホイールです。

jQuery（w / Sizzle）があなたのために選別する種類のことを示すソースからのいくつかのチェリーピッキングがあります：

Safari癖モード：

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

そのガードが失敗した場合に使用するのは、で拡張されていないSizzleのバージョンですquerySelectorAll。さらに下には、IE、Opera、およびBlackberryブラウザーの不整合に対する特定のハンドルがあります。

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

そして、他のすべてが失敗した場合、それはの結果を返しoldSizzle(query, context, extra, seed)ます。

コードの保守性に関しては、広く使用されているライブラリを使用する理由がいくつかあります。

主なものの1つは、それらが十分に文書化されており、ライブラリーに関するヘルプが見つかる...言う... stackexchangeなどのコミュニティーがあることです。カスタムのコード化されたライブラリを使用すると、コーダーがコードの記述よりも多くの時間を費やしてコードを作成するよりも、ソースコードと、場合によってはハウツードキュメントを入手できます。

以下のために独自のライブラリのかもしれない作品を書くあなたが、次の机に座っインターンは、jQueryのようなもので速度まで取得簡単に時間を持つことができます。

必要に応じて、ネットワーク効果と呼びます。これは、コードがjQueryで優れていると言っているのではありません。コードの簡潔な性質により、すべてのスキルレベルのプログラマーの全体的な構造を把握しやすくなります。これは、表示しているファイルに一度に機能的なコードが表示されるためです。この意味で、5行のコードは10行より優れています。

要約すると、jQueryの主な利点は、簡潔なコードであり、ユビキタスであると考えています。

同じ属性を適用する場合の比較を次に示します。たとえば、クラス「my-class」のすべての要素を非表示にします。これがjQueryを使用する理由の1つです。

jQuery：

$('.my-class').hide();

JavaScript：

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

jQueryはすでに非常に人気があるので、document.querySelector（）を$（）のように動作させる必要があります。代わりに、document.querySelector（）は最初に一致した要素のみを選択するため、途中までしか使用できません。

公式サイトが言うように：「jQuery：書き込みを減らし、より多くを行う、JavaScriptライブラリ」

ライブラリなしで次のjQueryコードを翻訳してみてください

$("p.neat").addClass("ohmy").show("slow");

本当の答えは、jQueryがquerySelector/querySelectorAllすべての主要なブラウザーで使用可能になるずっと前に開発されたということです。

jQueryの最初のリリースは2006年でした。実際、CSSセレクターを実装した最初のものは jQueryでさえありませんでした。

IEは、実装する最後のブラウザでしたquerySelector/querySelectorAll。その8番目のバージョンは2009年にリリースされました。

そのため、DOM要素セレクターはjQueryの最強点ではなくなりました。ただし、要素のcssおよびhtmlコンテンツを変更するショートカット、アニメーション、イベントバインディング、ajaxなど、多くの利点があります。

古い質問ですが、半年後、再検討する価値があります。ここでは、jQueryのセレクターの側面についてのみ説明します。

document.querySelector[All]IE8までの現在のすべてのブラウザーでサポートされているため、互換性は問題ではなくなりました。また、パフォーマンスの問題については何も見つかりませんでした（それはより遅いと思われていましたdocument.getElementByIdが、私自身のテストでは、少し速いことが示されています）。

したがって、要素を直接操作する場合は、jQueryよりも優先されます。

例えば：

var element=document.querySelector('h1');
element.innerHTML='Hello';

以下よりもはるかに優れています：

var $element=$('h1');
$element.html('hello');

何でもするために、jQueryは何百行ものコードを実行する必要があります（私はかつて上記のようなコードをたどって、jQueryが実際に何をしているかを確認しました）。これは明らかにみんなの時間の無駄です。

jQueryのもう1つの重要なコストは、新しいjQueryオブジェクト内にすべてをラップするという事実です。オブジェクトを再度アンラップする必要がある場合、またはオブジェクトメソッドの1つを使用して、元の要素で既に公開されているプロパティを処理する必要がある場合、このオーバーヘッドは特に無駄になります。

ただし、jQueryの利点は、コレクションの処理方法にあります。要件が複数の要素のプロパティを設定することである場合、jQueryにはeach次のようなことができる組み込みメソッドがあります。

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

バニラJavaScriptでこれを行うには、次のようなものが必要になります。

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

気が遠くなる人もいます。

jQueryセレクターも少し異なりますが、最新のブラウザー（IE8を除く）はあまりメリットがありません。

原則として、私は新しいプロジェクトにjQueryを使用しないように注意します。

• jQueryは、プロジェクトのオーバーヘッド、およびサードパーティへの依存度を高める外部ライブラリです。
• jQuery関数は、処理の面で非常に高価です。
• jQueryは、学習する必要があり、コードの他の側面と競合する可能性がある方法を課します。
• jQueryはJavaScriptで新機能を公開するのに時間がかかります。

上記のどれも重要でない場合は、必要なことを行います。ただし、最近のJavaScriptとCSSは以前よりもはるかに進歩しているため、jQueryはクロスプラットフォーム開発にとって以前ほど重要ではなくなりました。

jQueryの他の機能については触れていません。しかし、彼らももっとよく見る必要があると思います。

$（ "＃id"）対document.querySelectorAll（ "＃id"）

取り引きは、配列を作成してそれを分割する$（）関数ですが、document.querySelectorAll（）を使用すると、配列が作成され、分割する必要があります。

マテリアルデザインライトを使用しているときに、jqueryセレクターが何らかの理由でマテリアルデザインのプロパティを返しません。

ために：

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

これは機能します：

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

これはしません：

$('#myinputfield').parentNode.MaterialTextfield.change();