各浏览器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) 方法获取对象。