[JavaScript] DOCTYPE で JavaScript が動かなくなる件

この記事は3年以上前に書かれた記事です。情報が古い可能性があります。

HTML の先頭に DOCTYPE を記述すると JavaScript が動かなくなることがあったので、その解決方法をメモ。

テキストの入力フォームとして

<input type="text" name="inputA" value="">

を設けて、この value を JavaScript で

var instr = document.inputA.value;

という感じで取得できていたのだけど、その HTML の先頭に

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

と記述していると、上記のスクリプトでは値が取れなくなる。どうやら DOCTYPE を指定していないときは name を id としても解釈してくれていたところ、DOCTYPE を指定すると要素の扱いが厳密になって、id が指定されていない要素とか知らんわみたいになるらしい。

この場合どうすれば良いかというと、input タグには

<input type="text" id="inputA" value="">

という感じで id を指定してやれば良い。大抵これだけで大丈夫だが、ブラウザ(JavaScript エンジン)によって上手く取れないこともあるようなので、

var elm = document.getElementById('inputA');
var instr = elm.value;

みたいになおせば、より確実。

ちなみに、同じHTML内において、複数の要素に同じ name をつけることはできるが、id は同じ HTML 内でユニークでなければならない。上記の場合、

var elm = document.getElementsByName('inputA');
var instr = elm.value;

とすれば、name 指定でも要素を取得できることはできるが、複数の要素が取得される可能性がある。一方で id 指定であればユニークであるはずなので、必ず1つの要素が取得されることになる(仮に、複数の要素に同じ id がつけられている場合、どの要素が取得されるかは未定義となっている)。その意味でも、JavaScript で単一の要素を特定するときは id 指定の方が良い。

タイトルとURLをコピーしました