jQuery の登場により、DOM の操作効率が大幅に向上し、開発がより高いレベルに引き上げられました。たとえば、jQuery のセレクターは非常に強力な機能です。クラス セレクター、ID セレクター、属性セレクター、要素セレクター、レベル セレクター、コンテンツ フィルター セレクターなどが含まれます。非常に便利で高速であり、これらのセレクターは互換性も良好です。jq セレクターで DOM を操作するのは楽しいことであり、ずっと楽しいと言えるでしょう。しかし、Vue、React、Angularという3大フレームワークの登場により、JQueryの使用頻度は大幅に減少しました。JQueryには確かにDOM操作やデータバインディング時の一定のパフォーマンス上の問題やさまざまな落とし穴がありますが、それでもDOM操作におけるJQの強力な存在を消すことはできません。 JQuery の素晴らしさについてはここまで述べてきましたが、その内部原則の多くはどのように実装されているのでしょうか?今日は、jQuery に似たクラス セレクターと名前属性セレクターを実装するだけです。 クラスセレクター: 関数 getElementsByClass(クラス名) { var classArr = []; タグを document.getElementsByTagName("*"); (var i = 0; i < tags.length; i++) { タグ[i].nodeType == 1の場合{ tags[i].getAttribute("class") == classNameの場合{ クラスArr.push(タグ[i]); } } } クラスArrを返します。 } 実は、name 属性セレクターは class セレクターと同じですが、判定条件が少し異なります。 関数 getElementsByName(名前) { var nameArr = []; var 数値 = 0; タグを document.getElementsByTagName("*"); (var i = 0; i < tags.length; i++) { タグ[i].nodeType == 1の場合{ tags[i].getAttribute("name") == nameの場合{ nameArr.push(タグ[i]); } } } nameArr を返します。 } 名前属性セレクターは主にフォーム操作で使用されます。 上記のコードには nodeType 属性があり、これを使用してノードの種類を決定します。nodeType には 12 個の値があり、1 はノード要素、2 は属性、3 は要素または属性内のテキスト コンテンツを表します。これら 3 つの値はより頻繁に使用されますが、他の 9 つの値はあまり使用されません。詳細を知りたい場合は、API を参照してください。ここでは、要素ノードを取得する必要があるため、現在の要素の nodeType が 1 かどうかを判断します。 再帰を使用して要素のすべての子ノード (孫ノードを含む) を取得する別の方法を次に示します。 /** * すべての子ノードを再帰的に取得する * ノードは、すべての子ノードを取得する親ノード タイプ値を表します。 1 Element は要素を表します 2 Attr は属性を表します 3 Text は要素または属性内のテキスト コンテンツを表します 4 CDATASection はドキュメント内の CDATA セクション (パーサーによって解析されないテキスト) を表します 5 EntityReference はエンティティ参照を表します 6 Entity はエンティティを表します 7 ProcessingInstruction は処理命令を表します 8 Comment はコメントを表します 9 Document はドキュメント全体 (DOM ツリーのルート ノード) を表します 10 DocumentType は文書に定義されたエンティティへのインターフェースを提供します 11 DocumentFragment は文書の一部を保持できる軽量の Document オブジェクトを表します 12 Notation は DTD で宣言されたシンボルを表します */ var allChildNodes = 関数 (ノード、タイプ) { // 1. すべてのノードの配列を作成します。var allCN = []; // 2. 再帰的にすべてのノードを取得する var getAllChildNodes = function (node, type, allCN) { // 現在の要素のすべての子ノードを取得します var ノード = node.childNodes; // ノードの子ノードを取得します for (var i = 0; i < nodes.length; i++) { var 子 = ノード[i]; // 指定されたタイプのノードであるかどうかを判定します。if (child.nodeType == type) { allCN.push(子); } すべての子ノードを取得します(子、タイプ、すべてのCN)。 } } すべての子ノードを取得します(ノード、タイプ、すべてのCN)。 // 3. すべてのノードの配列を返します。 return allCN; } // 電話: // 本文内のすべてのノードを取得します。 allChildNodes(document.querySelector('body'), 1); // 本文内のすべてのプレーンテキストノードを取得します allChildNodes(document.querySelector('body'), 3)
上記は、js でクラスセレクターと名前属性セレクターを実装するための例の手順の詳細です。js でクラスセレクターと名前属性セレクターを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介
1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...
目次etcdの機能etcdが独自の高可用性クラスタを構築するには、主に3つの形式があります。今回構築...
1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...
サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...
VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...
目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...
Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...
現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....
1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...
Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...
これは私が以前使用した mysql5.7.18.zip のインストール チュートリアルです。まずこれ...
1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...
0x00 はじめに数か月前、Firefox に脆弱性 (CVE-2019-17016) があること...
私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...
設定が有効にならない場合が多いため、幅や高さなどをテーブル内で直接設定しないことをお勧めします。スタ...