JavaScript で指定された要素に指定されたクラスがあるかどうかを確認するにはどうすればよいですか?

王林
リリース: 2023-09-08 08:49:02
転載
704 人が閲覧しました

###############概要###

最初に特定のタスクを実行するには、クラスまたは ID によってその特定の要素にアクセスする必要があるため、その要素にアクセスする前に、その特定の要素にクラスが存在するかどうかを確認します。 classList オブジェクトには、JavaScript の組み込みメソッド classList.contains() が含まれています。このメソッドは、指定された要素が指定されたクラスに属するかどうかを判断します。最初に getElementById()、getElementsByClassName()、またはその他のメソッドを通じて要素にアクセスする必要があるため、プロセス全体が実行されます。アクセスした後、classList.contains() メソッドを使用してクラスをチェックする必要があります。 如何在 JavaScript 中检查给定元素是否具有指定的类? ###文法###

この質問で使用される構文は -

です リーリー

classList

- これは、特定の要素に含まれるクラスの配列を受け取る JavaScript のオブジェクトです。

  • contains

    - これは、指定されたクラスが指定された要素に存在するかどうかを確認する classList オブジェクトのメソッドです。

  • className

    - これは、指定された要素内で検索する必要がある指定された名前です。

    ###アルゴリズム###
  • ステップ 1 - body タグ内にいくつかの HTML 要素を作成します。各要素に何らかのクラスを割り当てます。

ステップ 2
    - HTML ボタンで onclick() イベント メソッドを指定します。
  • ステップ 3
  • - JavaScript アロー関数を作成します。任意の HTML にアクセスし、それを変数に保存します。
  • ステップ 4
  • - classList オブジェクトの contains() メソッドを使用します。変数を引数として contains() メソッドに渡します。
  • ステップ 5
  • - true を返す場合は、特定のクラスが HTML 要素に存在します。そうでない場合、false を返す場合、特定のクラスは要素に存在しません。
  • 例1:要素に指定したクラスが含まれる場合

  • body タグで「
  • 」タグを使用しました。このタグにはクラス名が含まれています: class = "my-para first lorems"。したがって、これらはクラス名です。私たちのタスクは、要素をチェックして、指定された要素が含まれているかどうかを確認することです。これを行うには、classList オブジェクトのメソッドである contains() メソッドを使用します。したがって、チェックしたいクラスは、クラスの確実性をチェックする「contains()」メソッドにパラメータとして渡されます。

    リーリー 上記の例の出力は、「要素には指定されたクラスが含まれています」という出力が true であるためです。

    例2:要素に指定したクラスが含まれない場合
次の画像は、「要素に指定されたクラスが含まれていません」を示しています。これは、classList.contains() がチェックされたときに false を返したはずであることを意味します。したがって、エラー状態は終了しました。

リーリー ######結論は############

classList の戻り値の型は DOMTokenList であり、配列型です。これには、その特定の要素に存在するクラスのリストが含まれます。 DOMTokenList は、for ループまたはマップを使用して反復することで表示できます。

リーリー

「contains()」メソッドは、true または false のブール値の結果を返します。 classList オブジェクトにはクラスの配列が含まれています。そのため、contains() メソッドが指定されたクラスをチェックするとき、DOMTokenList をチェックして、それに代わって決定を行い、true または false を返します。

以上がJavaScript で指定された要素に指定されたクラスがあるかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!