作者：段立新

标准参考

关于 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 方法获取表单内元素。

参见

知识库

• ...

相关问题

• ...