打印

BT9009: 只有 IE 和 Opera 支持 FORM.item() 方法

作者:段立新

标准参考

关于 HTMLFormElement 接口的标准说明请参考: http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-40002357

关于 HTMLCollection 接口的标准说明请参考: http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-75708506

问题描述

得到 FORM 标记的 DOM 引用后,使用 item 方法获取表单内元素存在兼容性问题。

造成的影响

在 Chrome Safari Firefox 浏览器中,调用 FORM 元素的 item 方法会导致脚本错误。

受影响的浏览器

IE6 IE7 IE8 Opera  

问题分析

根据 W3C DOM 规范,FORM 标记的 DOM 引用接口类型是 HTMLFormElement ,它没有定义 item 方法。

分析以下代码:

  <form id="formid">
      <input type="text" value="text0" name="txt0" />
      <input type="text" value="text1" id="txt1" />
  </form>

  <script language="javascript">
  var oForm= document.getElementById("formid");
  oForm.item
  ? alert("HTMLFormElement 的 item 方法被支持。")
  : alert("HTMLFormElement 的 item 方法没有发现。");
  oForm.elements.item
  ? alert("HTMLFormElement.elements 的 item 方法被支持。")
  : alert("HTMLFormElement.elements 的 item 方法没有发现。");
  </script>

以上代码说明在 IE Opera 浏览器中,HTMLFormElement 接口类型中存在 item 方法 ,其他浏览器中则不支持。

而通过 HTMLFormElement.elements 方法返回 HTMLCollection 接口类型后,再调用规范声明中 HTMLCollection 的 item 方法在所有浏览器中都支持。

解决方案

当使用 item 方法遍历 HTMLCollection 时,只有在IE Opera 浏览器下可以直接获取 HTMLFormElement 元素内所有标记引用,其他浏览器并不支持这种方法。

推荐使用 HTMLFormElement.elements 方法得到 HTMLCollection 后再使用 item 方法获取表单内元素。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 4.0.302.3 dev
Safari 4.0.4
Opera 10.51
测试页面: HTMLFormElement_item_method.html
本文更新时间: 2010-07-18

关键字

FORM item 表单元素 集合 HTMLFormElement elements HTMLCollection