Javascriptのクラスセレクタメソッドの詳細な説明-jsチュートリアル-php.cn

Javascriptのクラスセレクタメソッドの詳細な説明

藏色散人

リリース： 2022-08-06 14:37:41

転載

4664 人が閲覧しました

この記事では Javascript のクラスセレクターメソッドを紹介します。困っている友人の役に立てば幸いです。

JavaScript クラスセレクターメソッド

エコシステムおよびプラットフォームとして、ブラウザーは、プログラミング言語によって呼び出しおよび制御できる一連の関数メソッドを提供します。ブラウジングの場合ブラウザの場合はJavaScript言語でブラウザの組み込みメソッドを呼び出すのが自然ですが、オペレーティングシステムの場合はほとんどの言語でAPIを呼び出すことができます。

CSS では、ID セレクターまたはクラスセレクターを通じて HTML 要素にスタイルを追加できます。CSS と同様、ブラウザプラットフォームでも、JavaScript 言語で呼び出すことができる ID セレクターとクラスセレクターメソッドが提供されます。ID セレクターメソッドの前に使用されます。は getElementById() であり、この記事で説明するクラスセレクターメソッドは getElementsByClassName() です。名前を見れば何を表現したいのかがわかります。これらの標準は、単なる気まぐれな名前ではなく、その名前が示すとおりの名前を維持するよう最善を尽くしています。もちろん、これは英語用です。

ID の特徴は、1 つを選択し、クラスの特性を一括で選択することです。たとえば、Javascript を通じて一部の要素にスタイル属性を一括で動的に追加するには、getElementsByClassName()という方法が主に使われます。 [関連する推奨事項: JavaScript ビデオチュートリアル ]

ケース

すでに記述された HTML および CSS ファイルに基づいて JavaScript コードを追加します。ユーザーはバッチ処理を実行できます。 Web ページ上の要素のスタイルをカスタマイズします。

48   <body style="background-color: #777777">
49   <!--自定义颜色功能按钮-->
50   <button style="background-color: #00aaff" id="button1" onclick="fun1()"></button>
51   <button style="background-color: #1abc9c" id="button2" onclick="fun2()"></button>
52   <!--Web应用界面命令-->
53   <div class="command">
54       <!--注释空格-->
55       <div class="bottom padding radius left-radius div">圆弧</div><!--
56       --><div class="bottom padding div">直线</div><!--
57       --><div class="bottom padding div">矩形</div><!--
58       --><div class="bottom padding div">曲线</div><!--
59       --><div class="padding right-radius div">倒角</div>
60   </div>
61   <script>
62   //    批量选中类属性名为div的所有元素，返回所有元素对象组成的数组
63       let arr = document.getElementsByClassName("div");
64   //    定义两个更改颜色的函数fun1和fun2
65       function fun1() {
66   //        遍历所有元素对象
67           for(let i = 0; i<arr.length;i++){
68   //            更改背景颜色
69               arr[i].style.backgroundColor="#00aaff";
70           }
71       }
72       function fun2() {
73           for(let i = 0; i<arr.length;i++){
74               arr[i].style.backgroundColor="#1abc9c";
75           }
76       }
77   </script>
78   </body>

ログイン後にコピー

コード分析

コードの 53 行目から 60 行目は、アプリケーションインターフェイスの一連のコマンドボタンを定義しています。コードの 50 行目と 51 行目は 2 つのカスタムボタンを定義しています。要素スタイルのファンクションボタン関数ボタンのいずれかをクリックすると、script タグ内の関数 fun1() または fun2() が呼び出されます。たとえば、fun1 関数の実行後、コードの 53 行目から 60 行目に定義されている要素が呼び出されます。背景要素の色は、グレーから #00aaff の色にバッチで変更されます。

コードの 63 行目は、クラスセレクターメソッドを使用して、クラス属性名が「div」であるすべての要素を選択します。 getElementsByClassName()getElementById() メソッドによって返されるオブジェクトは要素自体です。 getElementsByClassName()このメソッドは、すべての要素オブジェクトで構成される配列を返します。これは、要素の属性値を変更する場合は、配列添字を使用して要素にアクセスすることを意味します。たとえば、arr[0] は、コードの 55 行目で定義された div 要素を表します。 arr.style.backgroundColor="#00aaff"; を直接記述する場合、arr 内のすべての要素の背景色を変更することはできません。arr は配列であり、.style スタイル属性を持ちません。 arr [i].style.backgroundColor="#00aaffこのフォームは要素の背景色をリセットします。

変更する要素はたくさんあり、その色は変更する要素も同じなので、 for を使用できます。ループ構造プログラムを完成させるには、コードの 67 行目から 70 行目の機能は、配列 arr 内のすべての div 要素を走査し、それらの背景色を変更することです。

65 行目と 72 行目でそれぞれ関数 fun1 と fun2 を定義しています。fun1 と fun2 はマウスクリックイベントを通じて呼び出すことができます。fun1 の機能は、要素の背景色をバッチで #00aaff に変更することです。fun1 の機能は、要素の背景色を変更することです。 #1abc9c に要素の背景色を一括で設定

<strong>getElementsByTagName()</strong>

getElementsByTagName() メソッドが使用可能getElementsByClassName() メソッドのようにバッチで要素を選択します。返される結果は、データ型の観点からはすべて配列オブジェクトです。違いは、getElementsByTagName() メソッドがタグ名によって要素を選択することです。 CSSに対応する知識ポイントは要素セレクター getElementsByTagName()メソッド名の英語のタグはラベルの意味です

Application

いくつか学びました要素の選択方法とそれぞれの特徴を知るためのアプリケーションだけでなく、実際のアプリケーションでの getElementById() の選択方法、getElementsByClassName() および getElementsByTagName() については CSS を参照してください。CSS では一般的にクラスセレクターが使用されます。と id セレクターが時々使用され、要素のタグ名が要素の選択に使用されます。完全なページ内に多くの場所がある場合、すべてに特定の要素が必要で、これらの要素には異なる背景色が必要です。たとえば、 getElementsByTagName() メソッドを使用すると、誤って破損してしまいます getElementsByClassName() の利点は、選択したいクラス属性名を直接貼り付けることができることです 1 つの要素に複数のクラス名を付けることができます実際のプロジェクトでは、コードを再利用できますコードの再利用は実際には分類です。たとえば、Web サイトには多くの場合、テーマの背景色があり、Web サイト上の何万ものページはすべて特定の色です。カラークラススタイルを定義して、このクラスを導入するだけで済みます。各ページに名前が記載されています。

要約

この記事では、getElementsByClassName() メソッドの説明だけでなく、CSS の要素セレクター、ID セレクター、クラスセレクターに相当する、JavaScript で要素を比較選択する 3 つの方法についても説明します。セレクター (DOM メソッド) を使用して、学習の記憶負担を軽減し、システムの観点から技術を学習し、標準委員会開発者の観点から技術標準を理解します。

以上がJavascriptのクラスセレクタメソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。