JavaScript でクラス名によって HTML 要素を選択する方法

JavaScript で getElementByClass を取得するには?

質問:

可視性を切り替えることを目的としています。 JavaScript スニペットを使用して、クラスに基づいて DIV 要素を抽出します。ただし、現在のスクリプトは getElementById に依存していますが、DIV 名は XSLT を使用して動的に生成されるため、これは適切ではありません。

回答:

getElementsByClassName メソッド:

最新のブラウザは、getElementsByClassName メソッドをネイティブにサポートしています。利用可能かどうかを確認し、サポートされている場合は使用できます。

Dustin Diaz メソッド (古いブラウザの場合):

古いブラウザの場合は、Dustin Diaz メソッドを使用します:

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

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

更新された切り替えスクリプト:

切り替えスクリプトで getElementsByClassName メソッドまたは Dustin Diaz フォールバックを利用します:

<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';
     }
  }
}

使用法:

HTML で、トグル リンクの onclick 属性を変更して、新しい toggle_visibility 関数を参照します:

<code class="html"><a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a></code>

以上がJavaScript でクラス名によって HTML 要素を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。