(cache)IE7でのgetElementByIdの問題の回避方法

ちょっと前に見つけた記事なのですが、今更IE7という感もありますが、、JavaScriptの罠的な要素を含みますので、特にJavaScriptを勉強中やこれから勉強を始めようとする人には良い情報だと思いますので、紹介します。

1.input要素のname属性とID属性の値は同じにすべき

フォームのinput要素にはname属性とID属性の両方を指定します。getElementByIdの問題を回避するためには、name属性とID属性の値は同じにしなければなりません。

良い例：

<input type="text" name="address" id="address" value="5th Avenue" />

悪い例：

<input type="text" name="full_address" id="address" value="5th Avenue" />

これはIEの問題の一つで、getElementByIdを使用してノードを取得しようとするとブラウザはID属性に加えてページのある要素のname属性を捜すからです。

これは、JavaScriptの問題だけというわけでは無く、HTMLとCSSの書籍にも「input要素のname属性とID属性の値は同じにすべき」と書かれていますので、基本的な部分でもあります。

これは、上記で述べた問題とほぼ同じです。

name属性は、XHTML Strictでは非推奨です。name属性は、より古いサイトのフォーム要素に加えられたので、ある継承したコード上のIE7の中のgetElementById問題をデバッグしようとしていれば、この事実が生じているかもしれません。

良い例：

<form id="contact_form">

悪い例：

<form name="conact_form" id="contact_form">

これは、少しの奇妙なことですが、ID属性でノードを取得しようとするとname属性がその問題を引き起こします。

そのページのある要素にID属性の値に「description」を設定していれば、同じページのmeta要素と衝突するかもれません。

下記のような場合：

<meta name="description" content="website description" />  

...  

<textarea id="description" rows="10" cols="25">comments here</textarea>

その場合は下記のようにするべきです。

良い例：

<textarea id="comments_description" rows="10" cols="25">comments here</textarea>

悪い例：

<textarea id="description" rows="10" cols="25">comments here</textarea>