そんなわけで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タグを取得した変数を配列に渡すという仕組み。
そして下のものが実行サンプル。元に戻すにはリロードしてください。
実行