JavaScript

getElementsByTagNameでタグ名で要素を取得【JavaScript】

この記事ではgetElementsByTagNameを使ってタグ名で要素を取得します。

getElementsByTagName

使い方

getElementsByTagName('タグ名')を指定すると、該当する全てを配列で返します。

<div id="block">
  <p>議題1</p>
  <ul id="list1">
    <li id="about_a">Aについて</li>
    <li id="about_b">Bについて</li>
  </ul>
  <p>議題2</p>
  <ul id="list2">
    <li id="about_c">Cについて</li>
    <li id="about_d">Dについて</li>
  </ul>
</div>
var list = document.getElementsByTagName("li");
console.log(list);
// => [li#about_a, li#about_b, li#about_c, li#about_d]

上記のように、<li>タグをgetElementsByTagNameで指定すると、全てのliタグを返します。

デモ

getElementsByTagNameを使ってデモを作ってみます。

リスト名をクリックすると、説明文が表示されるというプログラムです。

サンプルコード

getElementsByTagNameで返ってくるのは配列なので、

var list = document.getElementsByTagName("li");
list[i]

のような形で使うことができます。

<div id="block">
  <p>議題1</p>
  <ul id="list1">
    <li id="about_a">
      <strong>Aについて</strong>
      <p>Aの説明文Aの説明文Aの説明文</p>
     </li>
    <li id="about_b">
      <strong>Bについて</strong>
      <p>Bの説明文Bの説明文Bの説明文</p>
    </li>
    <li id="about_c">
      <strong>Cについて</strong>
      <p>Cの説明文Cの説明文Cの説明文</p>  
    </li>
  </ul>
</div>
#block li strong {
  cursor: pointer;
}
#block li p {
  display: none;
}
var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++) {
	list[i].onclick = function() {
		this.lastElementChild.style.display = 'block';
	}
}

getElementsByTagName('リスト名')で取得した要素全てにループを回します。

取得したリスト名をクリックすると、lastElementChilddisplay:block;に変更され、表示されます。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5