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

简介: 标准参考无。问题描述各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异。造成的影响某些浏览器中通过 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) 方法获取对象。

目录
相关文章
|
18天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但存在差异,如处理XML中节点间的空白和换行。IE不将这些视为文本节点,而其他浏览器则会。示例显示,一个包含CR/LF和空格的XML文件在IE中解析有4个子节点,而在其他浏览器中有9个。`loadXMLDoc()`加载XML后,`documentElement.childNodes.length`的值因浏览器而异。
|
2天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM标准,但在解析XML时存在关键差异,尤其体现在处理空白与换行上。如记事本编辑的XML,各浏览器表现不一:IE忽略空白节点,而其他浏览器则计入。示例代码展示此现象,`childNodes`数量在IE中为4,反映实际标签数;而在其他浏览器为9,包括了换行和空白文本节点。确保跨浏览器一致性的代码需考虑这些差异。
|
4天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
**XML DOM 在浏览器中的解析差异主要体现在对空白和换行的处理上。记事本等简单编辑器可能导致XML节点间含CR/LF和空格。IE不将这些视为文本节点,而其他浏览器会。例如,一段XML代码在不同浏览器中解析子节点数不同,IE计为4,而其他可能为9。**
|
6天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但处理XML节点间的空白和换行存在差异。IE不将这些视为文本节点,而其他浏览器则会。例如,一个包含CR/LF和空格的XML段,在IE中会有4个子节点,非IE浏览器则有9个。此差异影响DOM解析结果。
|
11天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但处理XML空白和换行存在差异。IE不将空格或换行视为文本节点,而其他浏览器则会。例如,一个包含CR/LF和空格的XML文档,在IE中根元素有4个子节点,其他浏览器则有9个。`document.write`显示了不同浏览器解析后的子节点数。
|
16天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但处理XML中空白和换行存在差异。IE不将这些视为文本节点,而其他浏览器则会。例如,含换行和空格的XML节点在IE中显示4个子节点,其他浏览器显示9个。`document.write`展示此差异。
|
21天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
**XML DOM 在浏览器间存在差异,尤其是处理空白和换行的方式。IE 不将空格或换行视为文本节点,而其他浏览器则会。例如,一个包含CR/LF和空格的XML文件在IE中显示4个子节点,但在其他浏览器中显示9个。示例代码通过加载XML并输出子节点数来体现这一差异。**
不同的浏览器创建的对象是不同的
不同的浏览器创建的对象是不同的
|
1月前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器虽支持W3C DOM,但在处理XML空白和换行时有差异。例如,IE不将这些视为文本节点,而其他浏览器会。
|
1月前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器虽均支持W3C DOM,但处理XML空白和换行有差异。IE不视为空白或换行为文本节点,其他浏览器则将其计入。例如,含CR/LF和空格的XML在IE中有4个子节点,其他浏览器则有9个。`document.write(&quot;Number of child nodes: &quot; + xmlDoc.documentElement.childNodes.length)`的输出因浏览器而异。