js でクラスセレクターと名前属性セレクターを実装する手順の例

js でクラスセレクターと名前属性セレクターを実装する手順の例

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)

著者: 小淮

出典: http://tnnyang.cnblogs.com

上記は、js でクラスセレクターと名前属性セレクターを実装するための例の手順の詳細です。js でクラスセレクターと名前属性セレクターを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • js は円形メニューセレクターを実装します
  • JS 論理判断セレクターに関する一般的な議論 || &&
  • JavaScript のセレクターを理解する
  • Vue.js で iView 日付ピッカーを使用して開始時間と終了時間の検証機能を設定する
  • Vue2.0.js マルチレベルリンクセレクタ実装方法
  • JS の一般的なセレクタ、属性、メソッド呼び出しについての簡単な説明
  • Javascript カプセル化 ID、クラス、要素セレクター メソッドの例
  • JSはJQueryセレクター機能を模倣する
  • js でセレクターとして $(#ID) を使用する方法について簡単に説明します (id が繰り返される場合)
  • jsは秒単位の正確な日付ピッカーの完全な例を実装します

<<:  MySQL 外部キー制約の無効化と有効化コマンド

>>:  Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介

推薦する

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

Docker マイクロサービス用の ETCD クラスターの構築に関する詳細なチュートリアル

目次etcdの機能etcdが独自の高可用性クラスタを構築するには、主に3つの形式があります。今回構築...

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

Nodejs での WeChat アプレット メッセージ プッシュの実装

サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...

VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル

VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...

時間のかかるDockerエラーのトラブルシューティングプロセス記録

目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

高速でクールな揺れアニメーション効果を実現するCSS

1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...

Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...

mysql5.7.18.zip インストール不要版設定チュートリアル(Windows)

これは私が以前使用した mysql5.7.18.zip のインストール チュートリアルです。まずこれ...

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...

Firefox の CSS を使用してデータを盗む

0x00 はじめに数か月前、Firefox に脆弱性 (CVE-2019-17016) があること...

WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法

私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...

HTMLテーブルで、各セルに異なる色と幅を設定します

設定が有効にならない場合が多いため、幅や高さなどをテーブル内で直接設定しないことをお勧めします。スタ...