fieldset要素はelements配列で取得される

JavaScript

入力フォームが設置された古いWebページの改修をやっていて引っかかる。


元のHTMLでは、form要素内に、inputやtextareaなどの操作する要素しか設置されていなくて、
それらをJavaScriptで以下のように取得していた。

for(var i = 0; i < form.elements.length; i++) {
	form.elements[i]....(do something)
}


で、このHTMLはtableレイアウトで組まれていたので、
XHTML+CSSで組み直したときに、
fieldset要素とかを使ってがんばってマークアップしたんだけど、
同じJavaScriptを適用したところ、ループのところでエラーが出るようになった。
例えば、こんな感じのHTML:

<form method="post" name="form1" action="#">

	<fieldset>
		<legend>フォームテスト</legend>
		
		<label for="input01">input01</label><input type="text" name="input01" />
		<input type="checkbox" name="check01" /><label for="check01">check01</label>
	
	</fieldset>

	<input type="submit" name="btn_submit" value="submit" />

</form>

該当箇所はtype属性を取得していたところで、

form.elements[i].type is undefined

などと、Firebugで表示される。

alert(form.elements[i].type);

とすると、
undefined
text
checkbox
submit
と出てくる。

alert(form.elements[i]);

とすると、
object HTMLFieldSetElement
object HTMLInputElement
object HTMLInputElement
object HTMLInputElement
と出てくる。


というわけで、
fieldset要素は、elements配列で取得される、ということが確認できた。
legend要素は取得されていない。


fieldset要素にtype属性は指定していないから、
undefined
になる。


fieldset要素についてはこちらを参照：

Forms in HTML documents

type属性はない。


ここで、

alert(form.elements[i].getAttribute("type"));

としてみると、
null
text
checkbox
submit
となる。


なので、

for(var i = 0; i < form.elements.length; i++) {
	if(form.elements[i].getAttribute("type") != null){
		if(form.elements[i].getAttribute("type") == text) {
			(do something)
		}
	}
}

という感じで条件をつけると、とりあえずエラーは回避できる。