标准参考
无。
问题描述
各浏览器使用 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) 方法获取对象。