指定したタグのHTML要素 (DOMオブジェクト) を取得する - JavaScript

JavaScriptを利用して指定したタグのHTML要素 (DOMオブジェクト) を取得するコードを紹介します。

概要

指定したタグのHTML要素(DOMオブジェクト)を取得する場合は documentオブジェクトの getElementsByTagName メソッドを利用します。
タグ指定するため、複数の要素が取得される場合があります。

書式

document.getElementsByTagName("[取得するタグの値]");

第一引数に与えたタグ要素の配列を戻り値として返します。複数の要素が取得される場合もあるため、戻り値は配列になります。
要素がない場合は null を返します。一般的には戻り値を変数に代入して利用します。

プログラム例

コード

下記のHTMLファイルを記述します。

SimpleDemo-GetElementsByTagName.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    .divelem{
      border:1px solid #ff6a00;
      width:240px;
      margin: 0.5rem 0 0 0;
    }
    -->
  </style>
  <script type="text/javascript">
    function onButtonClick() {
      var elems = document.getElementsByTagName("p");
      var outelem = document.getElementById("output");

      for (i = 0; i < elems.length; i++) {
        elems[i].style.borderColor = "#7700ca";
        outelem.innerHTML = outelem.innerHTML + "</br>" + elems[i].innerHTML;
      }
    }
  </script>
</head>
<body>
  <div class="divelem" id="elem1">これは要素1です (divタグ)</div>
  <p class="divelem" id="elem2">これは要素2です (pタグ)</p>
  <div class="divelem" id="elem3">これは要素3です (divタグ)</div>
  <p class="divelem" id="elem4">これは要素4です (pタグ)</p>
  <p class="divelem" id="elem5">これは要素5です (pタグ)</p>
  <div class="divelem" id="elem6">これは要素6です (divタグ)</div>
  <hr />
  <input type="button" onclick="onButtonClick();" value="Exec" />
  <hr />
  <div id="output"></div>
</body>
</html>

解説

[Exec]ボタンのクリックにより、次のJavaScriptが実行されます。

function onButtonClick() {
  var elems = document.getElementsByTagName("p");
  var outelem = document.getElementById("output");

  for (i = 0; i < elems.length; i++) {
    elems[i].style.borderColor = "#7700ca";
    outelem.innerHTML = outelem.innerHTML + "</br>" + elems[i].innerHTML;
  }
}

getElementsByTagName メソッドで指定したタグの要素を取得します。今回の例では"p"を与えていますので、ページ内のpタグの要素がすべて取得されます。取得した要素はelems配列に代入します。

  var elems = document.getElementsByTagName("p");

ループでelems配列の要素にアクセスし、elems要素のstyle.borderColor プロパティの色を変更します。また、"outelem"の要素(id="output"の要素)に、elems要素のinnerHTMLの値を表示します。

  for (i = 0; i < elems.length; i++) {
    elems[i].style.borderColor = "#7700ca";
    outelem.innerHTML = outelem.innerHTML + "</br>" + elems[i].innerHTML;
  }

上記の処理で、[Exec]ボタンをクリックすると、ページ内のpタグの要素のみ、枠の色が#7700caに変化し、pタグのテキストがページ下部のoutputの枠に表示されます。