打印

BX9028: 各浏览器对使用 document.id 和 document.name 获取对象的支持存在差异

作者:武利剑

标准参考

无。

问题描述

各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异。

造成的影响

某些浏览器中通过 document.id 和 document.name 可能无法获取元素,导致脚本异常,功能不可用。

受影响的浏览器

所有浏览器  

问题分析

参考 W3C 规范中 HTML5 草案:3.1.1 Documents in the DOM

参考 W3C 规范中 HTML5 草案:3.1.4 DOM tree accessors

1. DOM 树的访问

1.1. DOM 树中的 Document 对象及 HTMLDocument 接口

浏览器中每一个 XML 和 HTML 文档都用一个 Document 对象来表示。

Document 继承了 HTMLDocument 接口。

HTMLDocument 接口定义了实现它的对象所拥有的方法和属性。其中包括资源元数据管理、DOM 树的访问、动态标记插入、用户交互和事件处理属性等。

1.2. 访问 DOM 树中节点的方法

W3C 在 HTML5 草案中规定了一系列 DOM 树节点的访问方式,并不包括 document.id 或 document.name。

访问 DOM 树中某个节点的方法,W3C 中推荐的是使用 document.getElementById(id),根据一个元素的 id 属性获取它的 DOM 节点对象。

还有很多其他的方式,也可以获取页面上的元素,但这些方式不是 W3C 标准中规定的,所以对这些方法的支持因浏览器而异。这其中,就有使用 document.id 或 document.name 获取元素的方式。

2. 使用document.id 和 document.name 访问 DOM 树中的节点

使用 document.id 和 document.name 访问 DOM 树中节点的方法,可以访问 IMG 元素、IFRAME 元素和 FORM 元素。

除了 Opera IE 同时支持用 document.id 和 document.name 访问这 3 种元素的节点对象外,而其它浏览器对用其 name 和 id 的支持有所不同。

分析以下代码:

<script>
    window.onload = function(){
        document.getElementById("info").innerHTML = "document.id :" + !!document.iframe_id+
                                                    "<br/>document.name : " + !!document.iframe_name;
    }
</script>
<iframe id="iframe_id" name="iframe_name"></iframe>
<div id="info"></div>
  • 以上测试用例中使用 document.id 和 document.name 的方法获取 DOM 树中的 IFRAME 元素引用,如果存在则返回 true,否则返回 false 。
  • 获取元素后的返回值将输出到 info 中

上面测试用例中,IE Opera 均全返回 true,Firefox 返回 false,而 Safari Chrome 中 document.id 是 false,document.name 是 true。

用其他元素替换 IFRAME 元素,可以测试其它元素的情况。 如下表:

获取方式 IE6 IE7 IE8 Firefox Chrome Safari Opera
Q S Q S Q S Q S Q S Q S Q S
document.div_id N N N N N N N N N N N N N N
document.div_name N N N N N N N N N N N N N N
document.span_id N N N N N N N N N N N N N N
document.span_name N N N N N N N N N N N N N N
document.select_id N N N N N N N N N N N N N N
document.select_name N N N N N N N N N N N N N N
document.a_id N N N N N N N N N N N N N N
document.a_name N N N N N N N N N N N N N N
document.input_id N N N N N N N N N N N N N N
document.input_name N N N N N N N N N N N N N N
document.img_id Y Y Y Y Y Y Y Y Y Y Y Y Y Y
document.img_name Y Y Y Y Y Y Y Y Y Y Y Y Y Y
document.form_id Y Y Y Y Y Y N N N N N N Y Y
document.form_name Y Y Y Y Y Y Y Y Y Y Y Y Y Y
document.iframe_id Y Y Y Y Y Y N N N N N N Y Y
document.iframe_name Y Y Y Y Y Y N N Y Y Y Y Y Y
document.object_id Y Y Y Y Y Y Y Y Y Y Y Y Y Y
document.object_name Y Y Y Y Y Y Y Y Y Y Y Y Y Y
document.embed_id Y Y Y Y Y Y Y Y N N N N Y Y
document.embed_name Y Y Y Y Y Y Y Y Y Y Y Y Y Y

说明:

  • 此汇总表中 Q 代表 Quirks Mode,S 代表 Standards Mode;
  • 以 document.element_id、document.element_name 表示获取方式,如 document.div_id 表示利用 id 属性获取 DIV 元素对象,而 document.span_name 表示使用 SPAN 元素的 name 属性来获取它的对象。

解决方案

使用 W3C 标准中的 document.getElementById(id) 方法获取对象。

参见

知识库

相关问题

测试环境

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

关键字

document.id document.name