getElementById を使用せずに JavaScript でクラスごとに要素を取得する方法

getElementById を使用せずに JavaScript でクラスごとに要素を取得する

JavaScript では、一意の ID で要素を取得するために getElementById メソッドがよく使用されます。ただし、動的に生成された要素、または同じ ID を共有する要素を操作する場合は、クラス属性によって要素を検索する必要があります。 getElementByClass は最新のブラウザでネイティブにサポートされていますが、Internet Explorer などのすべての主要なブラウザではまだサポートされていません。

関数を使用してクラスごとに要素を取得する

JavaScript には、クラスごとに要素を取得するための組み込みメソッドが提供されていません。ただし、クラス属性に基づいて要素を検索する関数を使用することで、この制限を克服できます。よく使用される実装の 1 つは、Dustin Diaz メソッドです。

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // native implementation available
    return node.getElementsByClassName(classname);
  } else {
    var classElements = [],
        els = node.getElementsByTagName("*"),
        elsLen = els.length,
        pattern = new RegExp("(^|\s)"+classname+"(\s|$)", "i");

    for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
      }
    }
    return classElements;
  }
}</code>

この関数は、ノード (通常はドキュメント オブジェクト) とクラス名を入力として受け取り、指定されたクラスに一致する要素の配列を返します。まずネイティブの getElementsByClassName メソッドが存在するかどうかを確認し、存在する場合はそれを使用します。それ以外の場合は、ノード内のすべての要素を反復処理し、そのクラス属性に指定されたクラス名が含まれているかどうかを確認します。

Toggle スクリプトとの統合

関数を作成したらクラスごとに要素を取得するには、可視性の切り替えスクリプトを変更してそれを使用できます。

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementsByClassName(document, className),
      n = elements.length;
  for (var i = 0; i < n; i++) {
    var e = elements[i];
    if(e.style.display == 'block') {
      e.style.display = 'none';
    } else {
      e.style.display = 'block';
    }
  }
}</code>

getElementById 関数を getElementsByClassName 関数で呼び出すと、スクリプトでクラス属性に基づいて要素の表示/非表示を切り替えることができるようになりました。これにより、一意の ID に依存せずに、動的に生成された要素の可視性を制御できるようになります。

以上がgetElementById を使用せずに JavaScript でクラスごとに要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。