特定のタグ名を持つオブジェクトにアクセスする

説明

特定のタグを取得するにはgetElementsByTagName()を使い、パラメータには取得したいタグ名を指定します。結果は配列として返され、それぞれHTML文書内での出現順に格納されます。配列に取得したタグ情報が入っているので、マウスイベント等を設定し各種処理を行わせることができます。サンプルではマウスオーバー、マウスアウト時にliタグの背景色を変えるようにしています。サンプルでのthisはliタグ自身を示すためthis.style.backgroundColorとすると、マウスイベントが発生したliタグを示すことになります。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>特定のタグ名を持つオブジェクトにアクセスする</h1>
<ul>
<li>オブジェクトとは？</li>
<li>メソッドとは？</li>
<li>プロパティとは？</li>
<li>イベントとは？</li>
</ul>
<ul>
<li>CSSとは？</li>
<li>XSLTとは？</li>
</ul>
</body>
</html>
window.onload = function(){
var liTag = document.getElementsByTagName("li");
for (var i=0; i<liTag.length; i++){
liTag[i].onmouseover = function(){
this.style.backgroundColor = "#faa";
}
liTag[i].onmouseout = function(){
this.style.backgroundColor = "#fff";
}
}
}