BX9010: 各浏览器中对直接以 id 或者 name 属性值获取元素存在差异

最新推荐文章于 2024-04-21 11:00:35 发布
最新推荐文章于 2024-04-21 11:00:35 发布
阅读量710 收藏
点赞数
分类专栏： 浏览器 文章标签： 浏览器 iframe firefox html button object
 

标准参考

根据 HTML4.01 规范中的描述，元素的 id 属性为元素指定了一个唯一标识符，在整个文档中这个标识符必须是唯一的。
而 HTML 属性属性表中则指明 id 属性可以用于除 BASE、HEAD、HTML、META、SCRIPT、STYLE、TITLE 之外的所有 HTML 元素。

元素的 name 属性仅存在于 BUTTON、TEXTAREA、APPLET、SELECT、FORM、FRAME、IFRAME、IMG、A、INPUT、OBJECT、MAP、PARAM、META 这些元素。而 name 属性在这些元素中也有不同的意义：

  • FORM：name 属性指定了表单的名称，以便可能被某些脚本引用。1
  • BUTTON、TEXTAREA、SELECT、INPUT、OBJECT：name 属性指定了控件名称（control name），FORM 元素内一个控件的 name 属性的作用域就是这个 FORM 元素。
  • FRAME、IFRAME：name 属性指定了当前框架的名称，这个名称可用于在脚本中引用这个元素，或者作为超链接的目标（target）。
  • IMG：name 属性指定了图像的名称，以便可能被某些脚本引用。1
  • A：name 属性指定了当前锚的名称，它可能指向另一个链接。这个属性的值必须具备唯一性，其作用域为当前文档。1
  • MAP：name 属性指定了 image map 的名称，与 IMG 元素的 usemap 属性相关联，创建图像与映射之间的联系。
  • PARAM：name 属性定义了插入对象的 run-time 参数。
  • META：name 属性提供了键/值对中的键（名称）。规范中未列举这个属性的合法取值。

注 1：这个属性的存在是为了向后兼容，目前应使用 id 属性来唯一标识一个元素。

关于 id 属性的更多信息，请参考 HTML4.01 规范 7.5.2 Element identifiers: the id and class attributes 中的内容。

关于 name 属性的更多信息，请参考 HTML4.01 规范如下章节中的内容：

问题描述

直接以 id 或 name 属性值获取元素不能保证在各浏览器中通用。

造成的影响

此问题可能造成在某些浏览器内通过此方法不能获取到元素对象。

受影响的浏览器

所有浏览器 

问题分析

对于直接以 id 属性值获取元素对象，除 Firefox(S) 外，其他各浏览器均可以获取到所有被测元素的对象。
对于直接以 name 属性值获取元素对象，所有浏览器均支持直接通过 name 属性值获取 IFRAME、FRAME 元素，并且获取到的对象均为子页面的 window 对象。而其他元素则出现较大差异。

下面分别通过两端测试代码检测各浏览器中直接以 id 或 name 属性值能否正确地获取到元素的对象，并且检测当出现重复的 id 或 name 属性的值时，获取到的对象类型。

  1. OK 代表可以获取到元素的对象，返回了对象的引用。
  2. Fail 代表无法获取到元素的对象。

其中 IFRAME、FRAME 元素还需要额外检测获取到的对象类型。

由于测试代码较多较长，这里不再全部贴出，具体代码请参见页面底部的“测试页面”部分的链接。

1. 通过 id 属性值

分析以下三段代码：

  1. id.html，检测 A ABBR ACRONYM ADDRESS AREA B BDO BIG BLOCKQUOTE BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DIR DIV DFN DL DT EM FIELDSET FONT FORM H1 H2 H3 H4 H5 H6 HR I IMG INPUT INS ISINDEX KBD LABEL LEGEND LI LINK MAP MENU META OBJECT OL OPTGROUP OPTION EMBED P PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR XMP 元素
  2. id_frame.html1，检测 FRAMESET FRAME 元素
  3. id_html.html2，检测 HTML HEAD STYLE SCRIPT BODY IFRAME 元素

注 1：由于 FRAMESET 与 FRAME 元素构成的框架页的特殊结构（此时页面不允许出现 BODY 元素），所以将这两个元素单独测试。
注 2：由于 HTML、HEAD、BODY 这类代表 HTML 文档结构的元素，以及 SCRIPT、STYLE 元素的特殊性，所以将这些元素与 IFRAME 一起单独测试。

列表总结如下：

idIE6 IE7 IE8 Chrome Safari OperaFirefox(Q)Firefox(S)
IFRAMEOK
[window]		OK
[HTMLIFrameElement]		Fail
FRAMEOK
[window]		OK
[HTMLFrameElement]		Fail
测试代码中的其他 HTML 元素1OK
[HTMLCollection]，若有重复，返回集合。		OK
[HTMLElement]，若有重复，返回第一个。		Fail

注 1：这些元素包括：A ABBR ACRONYM ADDRESS AREA B BDO BIG BLOCKQUOTE BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DIR DIV DFN DL DT EM FIELDSET FONT FORM H1 H2 H3 H4 H5 H6 HR I IMG INPUT INS ISINDEX KBD LABEL LEGEND LI LINK MAP MENU META OBJECT OL OPTGROUP OPTION EMBED P PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR XMP FRAMESET HTML HEAD STYLE SCRIPT BODY。

对于直接以 id 属性值获取元素对象，除 Firefox(S) 外，其他各浏览器均可以获取到所有被测元素的对象。

针对 IFRAME 及 FRAME 元素，Firefox(Q) 中获得的是元素对象自身；而 其他浏览器 中则是其内子页面的 window 对象。
针对其他元素，当出现 id 属性值重复的元素时，在 Firefox(Q) 返回的是符合这个 id 属性值的第一个元素对应的 DOM 对象；而 其他浏览器 中则是一个对象集合，集合内包含了所有符合这个 id 属性值的元素对象。


2. 通过 name 属性值

分析以下四段代码：

  1. name.html，检测 A ABBR ACRONYM ADDRESS AREA B BDO BIG BLOCKQUOTE BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DIR DIV DFN DL DT EM FIELDSET FONT FORM H1 H2 H3 H4 H5 H6 HR I IMG INPUT INS ISINDEX KBD LABEL LEGEND LI LINK MAP MENU META OBJECT OL OPTGROUP OPTION EMBED P PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR XMP 元素
  2. name_frame.html，检测 FRAMESET FRAME 元素
  3. name_html.html，检测 HTML HEAD STYLE SCRIPT BODY IFRAME 元素
  4. name_form.html1，检测 FORM 元素中的 INPUT SELECT TEXTAREA OBJECT BUTTON 元素

注 1：由于 FORM 元素对象在 DOM 中的特殊性，这里单独测试位于 FORM 元素内的各表单元素。

对于直接以 name 属性值获取元素对象，各浏览器出现较大的差异。

列表总结如下：

nameIE6 IE7 IE8Firefox(S)Firefox(Q) Chrome SafariOpera
AOK
[HTMLCollection]，若有重复，返回集合。		FailFailOK
[HTMLCollection]，若有重复，返回集合。
FRAMESETOKFailFailOK
FRAMEOK
[window]		OK
[window]		OK
[window]		OK
[window]
IFRAMEOK
[window]		OK
[window]		OK
[window]		OK
[window]
IMGOK
[HTMLCollection]，若有重复，返回集合。		FailOK
[HTMLCollection]，若有重复，返回集合。		OK
[HTMLCollection]，若有重复，返回集合。
MAPOK
[HTMLCollection]，若有重复，返回集合。		FailFailFail
METAOK
[HTMLCollection]，若有重复，返回集合。		FailFailFail
EMBEDOK
[HTMLCollection]，若有重复，返回集合。		FailOK
[HTMLCollection]，若有重复，返回集合。		Fail
FORMOK
[HTMLCollection]，若有重复，返回集合。		FailOK
[HTMLCollection]，若有重复，返回集合。		OK
[HTMLCollection]，若有重复，返回集合。
位于 FORM 元素之外的表单元素：
INPUTOK
[HTMLCollection]，若有重复，返回集合。		FailFailOK
[HTMLCollection]，若有重复，返回集合。
OBJECTOK
[HTMLCollection]，若有重复，返回集合。		FailOK
[HTMLCollection]，若有重复，返回集合。		OK
[HTMLCollection]，若有重复，返回集合。
SELECTOK
[HTMLCollection]，若有重复，返回集合。		FailFailOK
[HTMLCollection]，若有重复，返回集合。
TEXTAREAOK
[HTMLCollection]，若有重复，返回集合。		FailFailOK
[HTMLCollection]，若有重复，返回集合。
BUTTONOK
[HTMLCollection]，若有重复，返回集合。		FailFailOK
[HTMLCollection]，若有重复，返回集合。
位于 FORM 元素之内的表单元素：
INPUTFailFailFailFail
OBJECTFailFailOK
[HTMLCollection]，若有重复，返回集合。		OK
[HTMLCollection]，若有重复，返回集合。
SELECTFailFailFailFail
TEXTAREAFailFailFailFail
BUTTONFailFailFailFail
测试代码中的其他 HTML 元素1FailFailFailFail

注 1：这些元素包括：ABBR ACRONYM ADDRESS AREA B BDO BIG BLOCKQUOTE BR CAPTION CENTER CITE CODE COL COLGROUP DD DEL DIR DIV DFN DL DT EM FIELDSET FONT H1 H2 H3 H4 H5 H6 HR I INS ISINDEX KBD LABEL LEGEND LI LINK MENU OL OPTGROUP OPTION P PARAM PRE Q S SAMP SCRIPT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD TFOOT TH THEAD TITLE TR TT U UL VAR XMP HTML HEAD STYLE SCRIPT BODY。

可以看到，IE 可以通过 name 属性值获取到所有拥有 name 属性的元素。

所有浏览器均支持直接通过 name 属性值获取 IFRAME、FRAME 元素，并且获取到的对象均为子页面的 window 对象。

当出现 name 属性值重复的元素时，在各浏览器中若能返回对象且对象不为 window，则均为集合，集合内包含了所有符合这个 name 属性值的元素对象。

解决方案

通过上面的测试可以看到，仅仅在通过 name 属性获取 IFRAME 和 FRAME 元素内子页面的 window 对象时，所有浏览器没有差异。
所以应避免直接以 id 或者 name 属性值获取元素，应该使用标准的 document.getElementById 或 document.getElementsByName 方法获取元素。

参见

知识库

相关问题

测试环境

操作系统版本:Windows 7 Ultimate build 7600
浏览器版本:IE6
IE7
IE8
Firefox 3.6.8
Chrome 6.0.472.14 dev
Safari 5.0.1
Opera 10.60
测试页面:id.html
id_frame.html
id_html.html
name.html
name_frame.html
name_html.html
name_form.html
 
 
 
本文转自： http://www.w3help.org/zh-cn/causes/BX9010
心亦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于getElementById的bug 浏览器兼容解决方法 （获取元素错误）
weixin_44656639的博客
11-12 661
用此方法可以解决低版本IE浏览器使用getElementById获得不是id的元素 myReady(function(){ var getElementById = function(id) { var el = document.getElementById(id); if(!+"\v1") { if(el && el.id =...
python 模拟用户点击浏览器_浏览器行为模拟之requests、selenium模块
weixin_40002336的博客
11-24 7077
requests模块前言：通常我们利用Python写一些WEB程序、webAPI部署在服务端，让客户端request，我们作为服务器端response数据；但也可以反主为客利用Python的requests模块模拟浏览器行为，向其他站点发送request，让其他站点response数据给我们；一、requests模块介绍requests可以模拟浏览器的请求，比起之前用到的urllib，reques...
check-bx-db-value：使用shell脚本从bitrix数据库中检查值
02-13
ПроверказначенияизБДБитрикса СкриптчитаетконфигсайтаБитрикса（<path>），делаетзапрос（<single>）кегоБД，сравниваетрезультатвозвращенныйзапросомсзаданнойвеличиной（<max>）。 Еслирезультатбольшезаданнойвеличины，выполняетсявыходскодомошибки（иначенормальноезавеве。 Можетбытьполезендляпроверкинеотправленныхсообщенийв БДБитрикс ，особеносутилитой 。 Использование： $ check
关于JavaScript使用id直接获取元素的发现
MojaveGhost1057的博客
07-17 326
废话不多说了,直接上大菜,就问你香不香 <body> <input id="usr" /> </body> <script> usr.onblur = function () { alert(123); } console.log(usr); </script> 发生了什么呢,可以正常运行,并且控制台也打印了元素,我惊了. 我们再看 <body> <inp
jquery 根据name属性查找元素
热门推荐
dazhi_100的专栏
06-09 7万+
Js代码 :  $("div[id]")              选择所有含有id属性的div元素    $("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素        $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素   
各浏览器document.id和document.name获取对象存在差异
恍惚窈冥
10-21 779
问题描述<br />各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异。造成的影响<br />某些浏览器中通过 document.id 和 document.name 可能无法获取元素，导致脚本异常，功能不可用。受影响的浏览器所有
元器件应用中的BX系列BX3914集成电路实用检测数据
11-21
BX3914是录像机控制磁迹（CTL）信号记录／重放放大专用厚膜混合集成电路，为18脚单列直插式陶瓷封装，在索尼VO-5850P编辑录像机SV-31A（磁鼓／主导轴速度和相位伺服）电路板IC6上的正常工作电压典型检测数据如表所列...
元器件应用中的BX系列BX13O3集成电路实用检测数据
11-21
BX1303是彩电专用厚膜混合集成电路，为7脚单列式直插式陶瓷封装，在索尼KV-1430CH／KV-1432CH型彩色电视机上的正常工作电压典型检测数据如表所列，用MF14型三用表测得（DC挡）。　表 BX1303在索尼KV-1430CH／KV-1432...
元器件应用中的BX系列BX388集成电路实用检测数据
11-21
BX388是视频信号放大、Y/C信号混合专用厚膜混合集成电路，为12脚单列直插式陶瓷封装，在索尼VO-5850P编辑录像机DM-22A（亮度与色度信号解调器）电路板IC21上的正常工作电压典型检测数据如表所列，用DT890C型数字式...
元器件应用中的BX系列BX373集成电路实用检测数据
11-21
BX373是Y／C信号混合与放大专用厚膜混合集成电路，为11脚单列直插式陶瓷封装，在索尼VO-5850P编辑录像机MP-12A（亮度与色度信号调制\记录与重放放大）电路板IC8上的正常工作电压典型检测数据如表所列，用DT890C型...
web配置https
飞的博客
04-17 430
Tomcat8 配置：1.单向认证，就是传输的数据加密过了，但是不会校验客户端的来源2.双向认证，如果客户端浏览器没有导入客户端证书，是访问不了web系统的，找不到地址如果只是加密，我感觉单向就行了。如果想要用系统的人没有证书就访问不了系统的话，就采用双向。
不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。
最新发布
qq_30094821的博客
04-21 284
不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。
利用HTML实现秒表功能
K584122526的博客
04-17 703
启动</button><button id="restBn">复位
用html画一个四叶草
liulang68的博客
04-20 877
以上是部分代码，需要请看主页加联系方式。
HTML 入门
lvshihao_的博客
04-16 1041
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
如何创建响应式HTML电子邮件模板
晓风晓浪
04-20 1107
在这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。这个项目非常适合渴望掌握电子邮件设计基础的新手！（本文视频讲解：java567.com）
【HTML】制作一个简单的实时字体时钟
qq_70814008的博客
04-11 1691
整体上，这个网页应用程序通过HTML提供了页面结构，CSS赋予了页面美观的样式，而JavaScript则让页面具有动态更新和用户交互的能力。三者共同协作，实现了一个既美观又实用的动态时钟和日期时间转换工具。
数据可视化-ECharts Html项目实战（13）
qq_49513817的博客
04-17 2776
今天的文章，我会以鼠标左键触发为例带着大家学习ECharts特殊图表设置中组件交互的行为事件。希望你能在本篇文章中有所收获。希望我的文章能帮助到正在学习的你，也欢迎各位来本篇文章下一起交流学习，共同进步。
试编写一个程序段,不用除法指令,实现bx中的数除以8，结果仍然存在bx中
05-29
以下是使用移位运算实现除以8的程序段，结果仍然存在bx中： ``` mov ax, bx ; 将被除数存入ax中 shr ax, 1 ; 右移1位，相当于除以2 shr ax, 1 ; 右移1位，相当于除以2 shr ax, 1 ; 右移1位，相当于除以2 mov bx, ax...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值