FirefoxではHTMLCollection#namedItem()の戻り値は（該当する要素が複数あっても）1つの要素

JavaScript

Greasemonkeyスクリプトを作成しているときにつまずいた。

  • XPCNativeWrapper - MDC (XPCNativeWrapper の制限事項)
    HTMLCollection に設定された XPCNativeWrapper では、名前による要素のアクセスが動作しません。 この場合は、コードとして namedItem() メソッドを使用する必要があります。 なお namedItem は、(例えばラジオボタンのように) フォームの中に同じ名前の要素が複数あったとしても、その名前に該当する最初の入力要素だけを戻すことに注意してください。

テスト

<form action="#" id="enquete" name="enquete">
  <ul>
    <li><input type="checkbox" name="season" value="spring">春
    <li><input type="checkbox" name="season" value="summer">夏
    <li><input type="checkbox" name="season" value="autumn">秋
    <li><input type="checkbox" name="season" value="winter">冬
  </ul>
</form>

<script type="text/javascript">
  var form1 = document.forms['enquete'];
  var form2 = document.forms.namedItem('enquete');
  var checkboxs1 = form1.elements['season'];
  var checkboxs2 = form1.elements.namedItem('season');
</script>
ブラウザ form1 form2 checkboxs1 checkboxs2
Firefox 3.5 HTMLFormElement HTMLFormElement NodeList HTMLInputElement (spring)
Chrome 4 HTMLFormElement HTMLFormElement NodeList NodeList
Opera 10 HTMLFormElement HTMLFormElement HTMLCollection HTMLCollection
IE8 HTMLFormElement HTMLFormElement HTMLCollection HTMLCollection
  • 該当する要素が1つの場合、どのブラウザでも、[]とnamedItem()はその要素1つを返す。
  • 該当する要素が複数ある場合
    • Firefox
      • []は該当する全ての要素の配列を返す
      • namedItem()は該当する初めの要素を返す。
    • Firefox以外
      • []とnamedItem()は該当する全ての要素の配列を返す。

参考リンク