JavaScriptでGetElementByIdではなくgetElementByClassを取得する方法


91

各DIVのクラスに応じて、Webサイト上の特定のDIV要素の表示を切り替えようとしています。基本的なJavaScriptスニペットを使用して切り替えています。問題は、JavaScriptでサポートさgetElementByIdgetElementByClassていないため、スクリプトはのみを使用することです。残念ながら、DIVの名前には特定のカテゴリ名を使用してXSLTスタイルシートによって動的に生成されるため、DIVではなくidではなくclassを使用する必要があります。

特定のブラウザがをサポートするようになったことは知っていますgetElementByClassが、Internet Explorerがサポートしていないので、そのルートを使いたくありません。

クラスを使用して要素を取得する関数を使用するスクリプトを見つけました(このページの#8など:http : //www.dustindiaz.com/top-ten-javascript/)が、それらを統合する方法がわかりません私のトグルスクリプトで。

これがHTMLコードです。DIV自体は、XML / XSLTを使用したページの読み込み時に生成されるため、ありません。

主な質問:以下のトグルスクリプトを使用して、IDで要素を取得するのではなく、クラスで要素を取得するにはどうすればよいですか?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

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

</body>
</html>

3
なぜずっとjQueryを使用していないのですか?jQueryを使用するという@Jonathan Sampsonの提案を取り入れましたが、うまくいきます!(CMSの答えは、私が探していたと思っていたものの、それを機能させることができませんでした)各リンクにIDを指定しました。jQueryを使用すると、表示するクラスと非表示にするクラスを定義できます特定のリンク。すごい!このソリューションは、真実であるには余りにも良いようです。jQueryは本当であるにはあまりにも良さそうです。jQueryを使用する欠点は何ですか?初心者として、なぜjQueryの代わりにJavaScriptを使用するのですか?
アラン、

回答:


77

最新のブラウザはをサポートしていdocument.getElementsByClassNameます。caniuseでこの機能を提供しているベンダーの完全な内訳を確認できます。サポートを古いブラウザーに拡張する場合は、jQueryまたはポリフィルにあるようなセレクターエンジンを検討することをお勧めします。

古い回答

以下を許可するjQueryにチェックインする必要があります。

$(".classname").hide(); // hides everything with class 'classname'

GoogleはホストされたjQueryソースファイルを提供しているので、それを参照してすぐに稼働させることができます。あなたのページに以下を含めてください:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

1
GoogleがホストするjQueryは、最新のブラウザのほとんどでクロスサイトスクリプティングセキュリティが実装されているため、非常に簡単ですが、非常に簡単です。
Paulo Santos、

2
jQuery.comからソースファイルをダウンロードして、ローカルで参照することもできます。
サンプソン

21
@Paulo:クロスサイトスクリプティングは<script>タグには適用されません。GoogleがホストするjQueryは、(CDNとして)本番ウェブサイト用に特別に設計されています。サイトがhttpsの場合は、httpsバージョンを使用して、混合コンテンツの警告を回避してください。
Chetan S

3
実際、<script>タグインジェクションはクロスサイトJSONPリクエストの基礎です。
Chetan S

2
Paulo、<script>タグでjQueryをインクルードすると、クロスサイト制限はまったくないことに気づきましたか?
ダークファルコン

88

このgetElementsByClassNameメソッドは、Firefox、Safari、Chrome、IE、Operaの最新バージョンでネイティブにサポートされるようになりました。ネイティブ実装が利用可能かどうかをチェックする関数を作成できます。そうでない場合は、Dustin Diazメソッドを使用します。

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

使用法:

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

2
なぜ単純なコードの代わりにその内部関数を使用するのですか?
トマーシュZato -復活モニカ

画面上のすべての要素にブロック表示があると想定した場合の使用例は-1。toggle_visibilityでは、eが<span>の場合、「ブロック」ではなく「インライン」にする必要があります。.invisible {!ディスプレイ:なし重要}をはるかに強力なソリューションは、CSSクラスを定義することであると割り当てるためにはJavaScript(またはjQueryの)を使用して割り当てを解除、そのクラスの要素から
ジョン・メイヤー

6
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

実際には、getElementsByClassNameを使用して、複数のクラスの配列を返します。同じHTMLページ内の複数のインスタンスで同じクラス名を使用できるためです。配列要素のidを使用して、必要なクラスをターゲットにします。私の場合は、指定されたクラス名の最初のインスタンスです。したがって、[0]を使用しました



2

CMSの答えに加えて、これはtoggle_visibility私が今使ったばかりのより一般的なアプローチです:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

1

私の解決策:

まず、IDを使用して「<style>」タグを作成します。

<style id="YourID">
    .YourClass {background-color:red}
</style>

次に、JavaScriptで次のように関数を作成します。

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

私にとっては魅力のように働きました。


1
改行(<br>)は、スタイルタグ内では役に立たない/無効です
Chris Forrence 2013

-1

クラス宣言にIDを追加する

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.