~絵や興味ある事について書いてます~
header image

JavaScriptのgetElementsByTagNameはgetElementByIdの様に取得できない

普段、idやclassの属性ばかりでタグの要素(DOM又はオブジェクト)を取得していて忘れてしまい、つまずいてしまったので戒めとしてメモ。

getElementsByTagNameは、
getElementByIdやgetElementsByClassNameの様にはhtml内の指定したタグの要素を取得出来ない。

・id属性は、<div id="hoge1"> の様にhoge1はhtml内で一つのタグでしか使う事が出来ない事もあり、getElementByIdで指定したid属性は一つだけしか戻って来ない。

・class属性も、<div class="hoge2"> の様にhoge2はhtml内で同じ名称のclassを複数のタグで使用出来るが、hoge2の様に指定した名称でのclass属性は全て同一なので、一つだけしか戻って来ない。

これらはひとつだけの要素が返って来るのでそれをそのまま取得し使用出来る。

・しかしgetElementsByTagNameはhtml内にある一つの(言い換えると一種類の)タグを指定すると単一の要素を返すのでなく、1〜複数個あるであろう同じ種類のタグの数の分だけ、順序のある複数の変数の塊つまり配列のオブジェクトにタグを一個一個個別に分けて格納して返してくるので、他のgetElement(s)の様に取得して指定してもその配列のオブジェクト全体を指定しているだけなので使用する事は出来ず配列の順番を指定して個別に指定しないと使えない。

例えば、

・html文書内のpタグを取得する(引数は小文字に)

var z = document.getElementsByTagName('p');

・pタグのi番目のCSSのフォントサイズを新たに代入する(iは0から数え始めて、取得したい任意の順番の数字を)

z[i].style.fontSize = "13px";

・返ってきたオブジェクトのプロパティのlengthでpタグの数を取得して

var x = z.length;

・取得したタグの数だけつまり全てのpタグに繰り返し同じ処理をする。

for(var i=0;i<x;i++){
z[i].style.fontSize = "13px";
}

※カテゴリ別一覧より関連記事もございますのでどうぞ↓