getElementsByName と foms の違い（nameの要素番号指定）

document.forms[0].textname;
document.getElementsByName("textname");

の違いの話。

JavaScriptでHTML上のformにあるinputの値を取得する場合方法は

document.forms[0].textname;
document.getElementsByName("textname");

の２通り。ただし両者は当然違いがある。

たとえば・・・

<input type="text" name="textname" />
<input type="text" name="textname" />
<input type="text" name="textname" />

といった感じで、同じnameのinputが複数ある場合は

alert(document.forms[0].textname[0].value);
alert(document.getElementsByName("textname")[0].value);

といった形でelementのindexを指定してJavaScriptで値を取得する。

しかし・・・

<input type="text" name="textname" />

のように同じnameのinputが複数存在しない（１つだけ）の場合は

※この記述はエラーとなる

alert(document.forms[0].textname[0].value);

１つしか無い場合、elementのindex番号での指定ができない。

※こちらはエラーとならない

alert(document.forms[0].textname.value);
alert(document.getElementsByName("textname")[0].value);