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. コンセプト1. ホットバックアップとバックアップの違いホット バックアップは高可用性 (HA)...
この記事は、2018 年 9 月 19 日に Adobe Systems Inc で開催された ...
1 ダウンロードして準備するまず、公式ウェブサイトからTomcatをダウンロードする必要があります。...
一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...
この記事では、MySQL 8.0のインストールと設定方法を参考までに紹介します。具体的な内容は以下の...
誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...
mysqlインストーラコミュニティ8.0.16.0インストールグラフィックチュートリアル、参考までに...
目次クッキーの設定方法クッキーのデメリット: LocalStorage と SessionStora...
場合によっては、リモート マシンでいくつかのコマンドを実行する必要があることがあります。これが時々行...
この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...
目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...
ページ内にはjs、cssなどの外部ファイルが導入されており、外部ファイルのエンコードが現在のページフ...
効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...
タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...
1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...