getElementsByClassNameメソッド サンプル - jsライブラリ - HTML5.JP

sub

sub blue

sub black

sub red

HTMLコード

<div id="box" class="content red">
  <p class="sub">sub</p>
  <p class="sub blue">sub blue</p>
  <p class="sub black">sub black</p>
  <p class="sub red">sub red</p>
</div>

JavaScriptコード

<script type="text/javascript" src="../html5jp/dom/getElementsByClassName.js"></script>
<script type="text/javascript">
window.onload = function() {
  document.getElementById("btn").onclick = function() {
    var names = ["sub", "red", "black sub"];
    for( var i=0; i<names.length; i++ ) {
      var classNames = names[i];
      var elms = document.getElementById("box").getElementsByClassName(classNames);
      var res = "";
      for( var j=0; j<elms.length; j++ ) {
        res += elms.item(j).nodeName + "：" + elms.item(j).className + "\n";
      }
      alert( "「" + classNames + "」の対象個数：" + elms.length + "個\n--------------\n" + res );
    }
  };
};
</script>

JavaScriptコードを実行する