JavaScript で「getElementById」ではなく「getElementsByClassName」を選択する理由

クラスによる要素の取得: JavaScript での getElementById の代替手段

Web 開発の領域では、getElementById メソッドが最も重要なメソッドとして君臨します。 HTML ドキュメント内の特定の要素にアクセスします。ただし、getElementByClass を活用する方が適切であることが判明する場合もあります。

Firefox や Chrome などの最新ブラウザの登場により、getElementByClass はネイティブにサポートされる機能として浮上しました。ただし、Internet Explorer などのブラウザの場合、その機能をエミュレートするには回避策が必要です。

カスタム getElementsByClass 関数の作成

有名な JavaScript 専門家である Dustin Diaz が考案しました。ネイティブの getElementByClass サポートの欠如に対処するための独創的なソリューション。彼のアプローチには、その動作を模倣するカスタム関数の作成が含まれます。

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    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);
  }
}</code>

関数とトグル スクリプトの統合

このカスタム関数を提供されたトグルとシームレスに統合するにはスクリプトでは、次のように getElementById 呼び出しを getElementsByClassName に置き換えるだけです。以下:

<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>

結論

このカスタム getElementsByClass 関数を実装すると、getElementByClass がネイティブ サポートされている場合でも、class 属性を利用して要素の表示/非表示を切り替えることができます。が欠けています。このソリューションにより、開発者はクラスベースの要素識別の利点を活用し、異なるブラウザ間で一貫した動作を保証できるようになります。

以上がJavaScript で「getElementById」ではなく「getElementsByClassName」を選択する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。