そんなわけで getElementById で HTML を操作できるわけだけども、これじゃあひとつのオブジェクトしか操作できない。
そこでどうやら getElementsByTagName というのがある。
getElementsByTagName は引数にタグを渡すことで文書中のすべてのたタグを操作できる関数。
例えば document.getElementsByTagName("p"); とすると文書中の全ての p タグの操作が可能になる。
ところが p タグというのは大概文書中に複数あるもので(また複数あるからこそ TagName で取得するする わけだけども)、この関数で取得して、直にタグの操作できるとかえって面倒な事になる。
そのため、この関数で取得してもすぐには操作できないようになっている。
要するに document.getElementsByTagName("p").style.background = ""; ではエラーになる。
じゃあどうやって操作するのかというと、 document.getElementsByTagName で取得した情報は 配列として処理しなければならない。
だからはじめに var pTags = document.getElementsByTagName("p"); といった感じで取得したタグを変数に入れといて、 pTags[0].style.background = ""; というふうにすると操作可能になる。
また、もちろん全部のpタグを一度に操作することも可能。
その場合はfor文を使用して全てのタグの数を取得して、その取得したものを変数に入れて、その変数を配列としてpTagsに渡すといった手順が必要になる。 pTags[配列の番号].style.background; といった感じに。
すべての p タグを取得する for 文は以下
for(i=0;i<pTags.length;i++)
length を使用して全てのpタグを取得するまで処理を繰り返し、それを変数にいれ、全ての p タグを取得した変数を配列に渡すという仕組み。
そして下のものが実行サンプル。元に戻すにはリロードしてください。