IE表单输入元素未按照HTML5规范动态添加到Window对象

时间:2013-04-02 18:50:21

标签: html5 internet-explorer dom

根据HTML规范(http://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object),窗口对象应该动态地包含页面中“命名”的元素。在我的例子中,Window对象上应该存在一个与之关联的id属性的输入元素。

但是,根据下面的HTML(通过HTML5验证),IE不能通过它在窗口对象上的id识别输入元素,如果它位于表单元素下面。

以下HTML将在IE8和IE10中显示“对象”警报,然后显示“未定义”警报。为什么?在FireFox和Google Chrome中,它会显示“对象”的警报。有什么我想念的吗?

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 Standards mode</title>
    </head>
    <body>
        <input type="button" id="outerbutton" value="outer button">
        <form>
            <input type="button" id="innerbutton" value="inner button">
        </form>
        <script>
            window.onload = function(e)
            {
                alert(typeof outerbutton);
                alert(typeof innerbutton);
            };
        </script>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

outerbutton asnd innerbutton不会自动成为全局JavaScript变量,只是因为您添加了一些碰巧包含具有相同ID的元素的HTML。

您需要使用DOM方法来访问元素:document.getElementById('outerbutton')

另外,您的元素 NOT NAMED 。您正在使用ID。

如果你曾经使用过:

<input type="button" name="pinky" id="outerbutton" value="outer button">

您可以使用

alert(document.forms[0].pinky.value);

...但这需要元素是表单集合的成员。所以这将适用于&#34;内部按钮&#34;不是&#34;外部按钮&#34;。