HTMLタグ名や属性値からの参照をマスターしよう：DOMの基本を学ぼう（2）（3/3 ページ）

DOMでは、さまざまな要素参照方法を規定している。今回はHTML内のタグ要素の参照方法や、タグの属性値の取り出し方を押さえよう。

LINE

Hatena

id属性値の大文字・小文字

　HTMLにおいて、getElementByIdメソッドは、引数に与えるid属性値の大文字・小文字を区別しますので注意してください。これはDOMの仕様によるものというよりは、HTMLの仕様に沿った挙動です。HTML4やXHTMLの規定では、id属性値の大文字・小文字は区別されます。それにDOMが従っているだけです。

　ここまでの話を聞けば、みなさんは当然、どのブラウザでも大文字・小文字を区別すると思うでしょうが、実は、Internet Explorer 6、7はいずれも区別しません。しかし、Internet Explorerが区別しないからといって、それに頼ることがないよう注意してください。大文字を使うか小文字を使うかはあらかじめ決めておくようにしましょう。

id属性とname属性にまつわるブラウザのバグ

　getElementByIdメソッドには、もうひとつ注意すべき点があります。Internet ExplorerとOperaで、ある状況下においては正しく動作しないというバグが潜んでいます。次の例をごらんください。

<form>
  <input type="text" name="link" />
</form>
<script type="text/javascript">
  /* id属性値が"link"となっている要素を取り出す*/
   var link = document.getElementById('link');
   /* 要素を取り出せたかを評価*/
   if(link) {
     alert('バグです。');
   } else {
     alert('正常なブラウザです。');
   }
</script>

　このサンプルには、name属性に"link"がセットされたINPUTタグが1つだけあります。JavaScriptでは、getElementByIdメソッドを使って「id属性」の値が"link"となっている要素を取り出そうとしています。id属性の値が"link"になっているタグは1つもないわけですから、当然、getElementByIdメソッドの結果はnullになるはずです。ところが、Internet Explorer6、7とOpera 9では、この状況下において「INPUTタグ要素のオブジェクト」を抜き出してしまうのです。この点を十分考慮したHTML/JavaScriptコーディングを心がけてください。HTMLでは、id属性で使った名前を別のタグのname属性値に使わないことが、混乱を避ける最善の方法といえるでしょう。

name属性値から要素を参照する

　DOMでは、name属性名から要素を参照するインタフェースを提供しています。getElementsByNameメソッドは、引数にname属性名を指定すると、該当の要素を抜き出します。ただしこのメソッドは、documentオブジェクトに対してのみ有効です。要素ノードオブジェクトに対してこのメソッドを使おうとするとエラーになるので、注意してください。

　name属性はid属性とは違い、重複の可能性があります。したがって、NodeList型のオブジェクトとして返します。getElementsByNameメソッドによって取り出したNodeList型のオブジェクトの扱い方は、先ほどのgetElementsByTagNameメソッドの場合と同じです。

<form action="#" method="get">
  <input type="checkbox" name="w3c" value="DOM" /> DOM<br />
  <input type="checkbox" name="w3c" value="XML" /> XML<br />
  <input type="checkbox" name="w3c" value="CSS" /> CSS<br />
</form>
<script type="text/javascript">
  /* （1）name属性値が"w3c"となっている要素を取り出す*/
   var elms = document.getElementsByName('w3c');
   /* メッセージを初期化*/
   var msg = '';
   /* （2）要素ごとに繰り返し処理*/
   for(var i=0; i<elms.length; i++) {
     /* value属性値をメッセージに追加する*/
     msg = msg + elms[i].value + "\n";
   }
   /* メッセージをアラートウィンドウにポップアップ表示*/
   alert(msg);
</script>

　サンプルでは、name属性値に"w3c"がセットされたチェックボックスが3つ並んでいます。JavaScriptでは、（1）で、getElementsByNameメソッドに'w3c'を引数に与え、NodeList型のオブジェクトを変数elmsに格納しています。これを、for文を使って、取り出したすべての要素ごとに処理を繰り返します。このサンプルでは、value属性値をメッセージとして格納し、最後にアラートウィンドウに表示します。

getElementsByNameメソッドのバグ

　getElementsByNameメソッドには、getElementByIdメソッドと同様に、InternetExplorerとOperaで、ある状況下においては正しく動作しないというバグが潜んでいます。次の例をごらんください。

<a href="http://www.w3.org/DOM/" id="link">DOM</a>
<script type="text/javascript">
  /* name属性値が"link"となっている要素を取り出す*/
   var links = document.getElementsByName('link');
   /* 要素を取り出せたかを評価*/
   if(links.length > 0) {
     alert('バグです。');
   } else {
     alert('正常なブラウザです。');
   }
</script>

　このサンプルでは、id属性に"link"がセットされたAタグが1つだけあります。JavaScriptではgetElementsByNameメソッドを使って、name属性の値が"link"となっている要素を取り出そうとしています。name属性の値が"link"になっているタグは1つもないわけですから、当然、getElementsByNameメソッドから得られるNodeList型オブジェクトのlengthプロパティの結果は0になるはずです。ところが、Internet Explorer6、7とOpera9では、この状況下において、Aタグ要素のオブジェクトを抜き出してしまうのです。この点を十分に考慮したHTML/JavaScriptコーディングを心がけてください。