getElemtnByIdで楽しくなる

以前はJavaScriptが好きではありませんでした。覚えたての頃は入力チェックを作って欲しいと言われて

if (document.fooForm.fooInput.value == "") {
alert("Fooが入力されていません。");
}

というようなものをフォームの項目数書いていたりしました。とても面倒だったと記憶していますし、今でも同じことを書けと言われるとうんざりすると思います。
JavaScriptが楽しくなったきっかけは、HTMLが全てエレメントとして参照されることを知ったときでした。つまり、HTML上に記述されたものはどこでも変化させることが可能ということに気づいた訳です。
タグ名でも取れますし、配列として取得してタグを子階層に進むことも出来ますが、IDで取得するのがお好みです。例えばフォームに

<input type="button" id="fooId" name="fooName" value="FOO">

というようにIDを付与しておくと、ボタンの表示テキストを変化させるには

document.getElementById("fooId").value = "HOGE";

また、使用できないようにするには

document.getElementById("fooId").disabled = "true";

というようになります。
動的にHTMLを追加したりも出来て

<div id="fooId"></div>

というような名前空間だけ作っておいて

document.getElementById("fooId").innerHTML = "<img src='./foo.gif'>";

とすれば画像を挿入できます。直接タグを記述せずにJavaScript上で生成することもできて

var imgElement = document.createElement("img");
imgElement.setAttribute("src","./img.gif");
document.getElementById("fooId").appendChild(imgElement);

というようになります。
今時風にprototype.jsを使用するなら、getElementByIdのショートカットとして$()があるので

$("fooId").innerHTML = "FOO";

というように簡単に参照できます。
知っている人には当然すぎる内容ですが、結構無理したJavaScriptのコードはよく見るので、知っている人と知らない人の差が激しく出る言語だなと思います。
話のつながりはありませんが、キャンペーンには参加しておくということで。
近藤本と梅田本欲しい！

コメントする