jQueryの膨満感を失います

コアポイント

• nodeList.jsは、jQueryのDOM操作の代替として、同様の機能を提供しますが、（圧縮後4K）、ネイティブブラウザーAPIの改善を利用します。

• jQueryとは異なり、nodelist.jsはノードアレイを単一ノードとして扱い、クリーナーコードを有効にし、ノーデリストオブジェクト操作を容易にします。

• nodeList.jsには、属性を設定および取得し、要素固有の方法を呼び出し、ノデリストのノードへのアクセスを含む特別な方法が含まれています。 prevObject owner

nodeList.jsは、特定のバージョン（Firefox 6、Safari 5.0.5、Chrome 6、IE 9、Opera 11.6）の後に主流のブラウザと互換性があり、ブラウザーによって追加された新しいメソッド/プロパティが含まれるように自動的に更新されます。

• p.tip { バックグラウンドカラー：RGBA（128,128,128,0.05）; Border-Top-Right-Radius：5px; 国境圏 - 右とradius：5px; パディング：15px 20px; 国境左：10pxソリッドRGBA（128,128,128,075）; }

近年、jQueryはWeb上の事実上のJavaScriptライブラリになりました。多くのクロスブラウザーの矛盾を削除し、クライアントスクリプトに人気のある構文砂糖の層を追加します。抽象化処理の主な問題の1つはDOM操作ですが、jQueryの出現以来、ネイティブブラウザーAPIが大幅に改善されており、「おそらくJqueryを必要としない」という概念が人気がありました。

理由は次のとおりです

jQueryには、必要または使用していない多くの機能が含まれています（したがって、巨大であることは不要です）。

jQueryは、あまりにも多くの人々のためにあまりにも多くの機能を担当します。一般に、小さなライブラリはいくつかのタスクをより良く実行できます。
dom操作の観点から、ブラウザAPIはjQueryのほとんどの関数を実行できるようになりました。
ブラウザAPIは、たとえば
3. の代わりに
を使用するなど、より同期しています。
4. addEventListener attachEvent問題は何ですか？

問題は、domにネイティブ（または純粋な）javaScriptを使用することは、jqueryと比較して面倒である可能性があることです。これは、より冗長なコードを作成し、ブラウザの役に立たないノデリストを処理する必要があるためです。

まず、MDNのノデリストの定義を見てみましょう：

NodeListオブジェクトは、ノードのコレクションであり、

メソッドおよび

メソッドによって返されるものです。

Node.childNodesダイナミクスノデリストが時々あります（混乱する可能性があります）：document.querySelectorAll

場合によっては、NodeListは動的なコレクションです。つまり、DOMの変更がコレクションに反映されています。たとえば、

は動的です。

これは、動的で静的なものがわからないため、問題になる可能性があります。 NodeListから各ノードを削除し、ノデリストが空であるかどうかを確認しない限り。空の場合、動的なノデリストがあります（それはただの悪い考えです）。 Node.childNodesさらに、ブラウザは、これらのノデリストオブジェクトを操作するための有用な方法を提供しません。

たとえば、残念ながら、

を使用してノードをループすることはできません。

したがって、forEach次のことを行う必要があります

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

または「ハック」のみを使用することさえあります：

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

ブラウザのネイティブノデリストには、1つの方法しかありません。 Indexを介してNodeListからノードを返します。アレイを使用するようにノードにアクセスできる場合（

を使用）、それは完全に役に立たない：

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

これは、nodelist.jsが登場する場所です。JQUERYを使用してブラウザネイティブAPIを使用してDOMを簡単に操作できますが、4K圧縮サイズのみが必要です。 item array[index]

solution

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true</code>

Nodelist.jsを作成しました。なぜなら、ネイティブDom APIを使用しているが、それらをより簡潔にしたいので、コードを作成するときに多くの冗長性を減らします（ループなど）。

nodeList.jsは、単一のノードであるかのようにノードの配列（つまり、ノデリスト）を操作できるネイティブDom APIのラッパーです。これにより、ブラウザのネイティブNodeListオブジェクトよりも多くの機能が得られます。

これが良いと思われる場合は、公式のGithubリポジトリからnodelist.jsのコピーを入手し、このチュートリアルの残りの部分を読み続けてください。

使用法：

domノードの選択は簡単です：

//ノデリストに戻ります

この方法は、バックグラウンドで使用されています

。 $$(selector); しかし、jqueryと比較してどうですか？

この質問をしてくれてうれしいです。ネイティブJS、jQuery、およびnodelist.jsを比較しましょう。 querySelectorAll(selector)

3つのボタンがあるとします：

各ボタンのテキストを「私をクリックする」に変更しましょう。

ネイティブjs：

jquery：

<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}</code>

nodelist.js：

<code class="language-javascript">$('button').text('Click Me');</code>

ここでは、nodeList.jsがノデリストを単一のノードとして効果的に扱うことができることがわかります。つまり、ノデリストを参照して、

プロパティを「クリックして」に設定します。 NodeList.jsは、NodeListの各ノードに対してこれを実行します。とても賢いですよね？

メソッドチェーン（jQueryと同様）が必要な場合は、次のことを行います。これは、ノデリストへの参照を返します。

<code class="language-javascript">$$('button').textContent = 'Click Me';</code>

さあ、各ボタンにクリックイベントリスナーを追加しましょう：textContent

ネイティブjs：

<code class="language-javascript">$$('button').set('textContent', 'Click Me');</code>

jquery：

nodelist.js：

<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.add('clicked');
  });
}</code>

さて、jqueryの

<code class="language-javascript">$('button').on('click', function() {
  $(this).addClass('click');
  // 或将 jQuery 与原生混合使用 `classList`：
  this.classList.add('clicked');
});</code>

方法はかなり良いです。私のライブラリはブラウザのネイティブDOM API（したがって

）を使用していますが、それは私たちがこの方法のエイリアスを作成することを妨げません：

<code class="language-javascript">$$('button').addEventListener('click', function() {
  this.classList.add('clicked');
});</code>

悪くない！これは、独自の方法を追加する方法を示しています

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

nodeList.jsアレイメソッドのサポート

nodeList.jsはArray.prototypeから継承しますが、直接ではありません。いくつかの方法が変更されているため、ノデリスト（ノードの配列）でそれらを使用することは理にかなっています。

pushおよびunshift

たとえば、

およびpushメソッドはパラメーターとしてノードのみをとることができます。そうしないと、エラーがスローされます。 unshift

したがって、ノデリストを返してメソッドチェーンを許可します。つまり、JavaScriptのネイティブ

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

またはメソッドとは異なります。 NodeListの長さが必要な場合は、プロパティを使用する必要があります。

これら2つのメソッドは、JavaScriptのネイティブ配列メソッドのように、ノデリストを変更します。 push unshift Array#pushArray#unshift length

メソッドは、パラメーターとして以下を受け入れます。

は再帰的な方法なので、これらの配列は私たちが望むほど深く、平らになる可能性があります。ただし、通過した配列の要素がノード、ノデリスト、またはhtmlCollectionでない場合、エラーが発生します。 concat

javascriptのconcatメソッドと同様に、新しいノデリストを返します。

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

、concat、

、

、concat、Array#concat、

popおよびshiftメソッドの両方がオプションのパラメーターを使用して、ノードリストからポップまたはシフトするノードの数を示します。 JavaScriptのネイティブmapまたはsliceとは異なり、後者は常にパラメーターとして渡されるものに関係なく、常に配列内の要素をポップアップ表示またはシフトします。 filter

マッピングされた各値がノードである場合、メソッドはノーデリストを返します。

popshiftおよびArray#popメソッドは、実際の配列で行うのと同じことを行いますが、ノデリストを返します。 Array#shift

nodeList.jsは

から直接継承しないため、nodeList.jsをロードするときにmapにメソッドを追加すると、継承されません。

ここで、Nodelist.jsの残りの配列メソッドを表示できます。 slice filter特別な方法

nodeList.jsには、4つの一意の方法と、Array.prototypeと呼ばれるプロパティがあります。 Array.prototype

および

メソッド：

ownerいくつかの要素には、そのタイプの要素に固有の属性があります（たとえば、アンカータグのprevObject属性）。これが、

が定義されていない理由です。これは、ノデリストのすべての要素に継承されたプロパティではないためです。これは、これらのプロパティにアクセスするために

メソッドを使用する方法です。

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

setメソッドを使用して、各要素のこれらのプロパティを設定できます。

また、

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

ノデリストを返して、メソッドチェーンを許可します。 setなどで使用できます（両方とも同等）：textContent

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

1回の呼び出しに複数のプロパティを設定することもできます。

上記のすべての操作は、任意の属性を使用して実行できます。

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true</code>

style

メソッド

<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}</code>

callメソッドでは、要素固有のメソッドを呼び出すことができます（たとえば、ビデオ要素で

）：

call pause

メソッド

<code class="language-javascript">$('button').text('Click Me');</code>

itemメソッドは、jQueryの

メソッドに相当します。インデックスを通過するノードのみを含むノデリストを返します：

item eq

属性

<code class="language-javascript">$$('button').textContent = 'Click Me';</code>

owner属性は、jqueryの

に相当します。

ownerprevObjectスタイルアレイを返し、

はマッピングされたノデリストを返します。

<code class="language-javascript">$$('button').set('textContent', 'Click Me');</code>

nodeList.js互換性btns.style owner私のライブラリは、以下に説明するように、すべての主要な新しいブラウザと互換性があります。 style

browser

バージョン firefox 6

safari 5.0.5 chrome 6 ie 9 opera 11.6 結論 これで、最終的に便利なノデリストオブジェクトを使用できます！ 約4Kの圧縮サイズの場合、上記のすべてを取得します。これについては、nodeList.jsのgithubリポジトリで学ぶことができます。 nodelist.jsは依存関係としてブラウザを使用するため、アップグレードは必要ありません。ブラウザが新しいメソッド/属性をDOM要素に追加するたびに、これらのメソッド/属性をnodeList.jsを介して自動的に使用できます。これはすべて、心配する必要がある唯一の非推測はブラウザ削除方法だけであることを意味します。これらは通常、Webを壊すことができないため、非常に低い使用方法です。 それで、あなたはどう思いますか？このライブラリを使用することを検討しますか？重要な機能はありませんか？以下のコメントであなたのコメントを聞いてみたいです。 nodeList.js を使用したDOM操作に関するよくある質問

ノデリストとHTMLCollectionの違いは何ですか？

ノデリストとhtmlCollectionはどちらもノードコレクションです。それらの主な違いは、ノデリストが任意のノードタイプを含めることができることですが、HTMLCollectionは要素ノードのコレクションです。 HTMLCollectionも動的です。つまり、ドキュメント構造が変更されると自動的に更新されます。一方、NodeListは静的であり、ドキュメントの変更を反映するために更新しません。

ノデリストを配列に変換する方法は？

メソッドまたは拡張演算子を使用して、ノデリストをアレイに変換できます。それを行う方法は次のとおりです

<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数</code>

jQueryセレクターは、通常の要素ではなくprevobjectを返すのはなぜですか？

JQueryのチェーンメカ​​ニズムは、変更を加える前に以前のオブジェクトを保存することにより機能します。これにより、.end()メソッドを使用して以前の状態に復元できます。実際のDOM要素を取得したい場合は、.get()メソッドまたは配列表記を使用できます。

ノデリストをループする方法は？

for loop、for ... of loop、またはforEach()メソッドを使用して、ノデリストをループすることができます。以下は、forループを使用した例です：

<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}</code>

jQueryでの.prev（）メソッドの使用は何ですか？

jQueryの.prev()メソッドは、前の兄弟のすぐ隣の選択した要素を選択するために使用されます。セレクターが提供されている場合、以前の兄弟要素は、セレクターが一致している場合にのみ取得されます。

jQueryは2022年にまだ関連していますか？

jQueryは発売時のゲームチェンジャーでしたが、最新のJavaScriptエコシステムは大幅に変化しました。 JQueryを人気にする機能の多くは、JavaScript自体に組み込まれています。ただし、JQueryは依然として広く使用され、維持されており、一部のプロジェクトには適した選択かもしれません。

ノデリストから特定のノードを選択する方法は？

配列表記またはitem()メソッドを使用して、NodeListから特定のノードを選択できます。それを行う方法は次のとおりです

<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});</code>

ノデリストのメソッドを使用、フィルター、および削減できますか？

ノデリストは配列ではないため、マップ、フィルター、削減などのメソッドはありません。ただし、ノデリストを配列に変換してから、これらのメソッドを使用できます。

QuerySelectorとQuerySelectorallの違いは何ですか？

指定されたCSSセレクターに一致するドキュメントの最初の要素を返し、querySelectorはCSSセレクターに一致するすべての要素のノデリストを返します。 querySelectorAll

ノデリストが空であるかどうかを確認するにはどうすればよいですか？

プロパティをチェックして、Nodelistが空であるかどうかを確認できます。長さが0の場合、ノデリストは空です。それを行う方法は次のとおりです length

以上がjQueryの膨満感を失いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。