getElementByClass がサポートされていない場合、JavaScript でクラスごとに要素を取得するにはどうすればよいですか?

JavaScript でクラスごとに要素を取得する

JavaScript では、一意の識別子で要素を取得するために getElementById メソッドがよく使用されます。ただし、一部のシナリオではクラス名に基づいて要素を取得する必要があり、JavaScript は getElementByClass をネイティブにサポートしていないため、別のアプローチが必要です。

Dustin Diaz メソッド:

クラスごとに要素を取得する方法の 1 つは、Dustin Diaz によって作成された関数です:

<code class="javascript">function getElementByClass(searchClass, node) {
  if (node == null) {
    node = document;
  }

  var classElements = [];
  var els = node.getElementsByTagName("*");
  var elsLen = els.length;
  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)", "i");
  var i;
  var j = 0;

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

  return classElements;
}</code>

使用法:

この関数は、トグル スクリプトと組み合わせて使用​​できます。質問で提供されている:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementByClass(className, document);
  var 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>

ネイティブ メソッド:

Firefox、Chrome、IE、Opera などの主要なブラウザの最近のバージョンでは、getElementsByClassName メソッドがサポートされています。ネイティブ的に。これにより、クラスごとに要素を取得するプロセスが簡素化されます:

<code class="javascript">function getElementsByClassName(className, node) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    // Use Dustin Diaz method as fallback
    return getElementByClass(className, node);
  }
}</code>

以上がgetElementByClass がサポートされていない場合、JavaScript でクラスごとに要素を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。