HTMLタグを取得するdocument.getElementsByTagName('');

[説明]

全てのHTML文章にid属性がつけていては煩雑である。
そこで<p>とか<li>などのHTMLタグにアクセスする手段がdocument.getElementsByTagName('');である。
一方、<p>とか<li>は文章中、複数箇所に登場するものであるから、文章中上から数えて何番目のものにアクセスするのかを指定してやる必要がある。
何番目かを指定するには、document.getElementsByTagName('').item( i ); であり、
そのタグについている属性を指定する場合はdocument.getElementsByTagName('').name; とか
document.getElementsByTagName('').title; とか
document.getElementsByTagName('').innerHTML; である。
またその数を調べるには、document.getElementsByTagName('').length; である。

[サンプル]

• レベル1
• レベル2
• レベル3

[実行結果]

<ul>
	<li title="lev1">レベル1</li>
	<li title="lev2">レベル2</li>
	<li title="lev3">レベル3</li>
</ul>
<input type="button" id="button" value="TagName取得" />

<script type="text/JavaScript">
var getTagName = document.getElementById('button');
var result = document.getElementById('koko');

getTagName.onclick = function(){
	var nodelist = document.getElementsByTagName('li'); // HTMLタグの<li>を取得
	result.innerHTML = nodelist.item(2).title;
	console.log(nodelist.length);// <li>の数を出力
	
	for(var i = 0 ; i < nodelist.length ; i++){
		console.log(nodelist.item(i)); // <li>を全部出力
		console.log(nodelist.item(i).title; // <li title=" ">を全部出力
		console.log(nodelist.item(i).innerHTML); // <li>のHTMLを全部出力
	}
}

</script>

childNodes と比較

インデックスにもどる