この記事では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('リスト名')で取得した要素全てにループを回します。
取得したリスト名をクリックすると、lastElementChildがdisplay:block;に変更され、表示されます。
