[JavaScript] タグ名からオブジェクトを取得する

投稿日：2016年10月1日更新日：2018年5月3日

タグ名からオブジェクトを取得するには、 document.getElementsByTagNameを使用します。

サンプルソース

例）pタグを全て取得して、pタグ内の文字を表示する

function test(){
  //pタグをすべて取得する
  var elements = document.getElementsByTagName("p");

  //pタグのテキストを表示する
  for(var i=0;i<elements.length;i++){
    document.write(elements[i].innerText);
  }
}

function test(){

//pタグをすべて取得する

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

//pタグのテキストを表示する

for(var i=0;i<elements.length;i++){

document.write(elements[i].innerText);

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <p>犬</p>
  <div>猫</div>
  <p>熊</p>
  <input type="button" value="ボタン" onclick="test();" />
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

（結果）: 犬熊

※猫はdivタグに囲まれているので対象外となります。

解説

document.getElementsByTagNameは、ページ内にある指定したタグ全てのオブジェクトを取得します。
戻り値はHTMLCollection型です。
指定したタグが存在しない場合は、ゼロ件のコレクションが返ります。
（nullではありません）

執筆者：とら