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 <p><strong>更新された切り替えスクリプト:</strong></p>
<p>切り替えスクリプトで getElementsByClassName メソッドまたは Dustin Diaz フォールバックを利用します:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i <p><strong>使用法:</strong></p>
<p>HTML で、トグル リンクの onclick 属性を変更して、新しい toggle_visibility 関数を参照します:</p>
<pre class="brush:php;toolbar:false"><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 サイトの他の関連記事を参照してください。