藏在IE中的Bug:关于document.getElementById()方法

Document对象的常用属性和方法:getElementById()、getElementsByName()、createElement()方法 Document 对象代表浏览器窗口中的文档,该对象是 Window 对象的子对象。由于 Window 对象是 DOM 对象模型中的默认对象,因此其方法和子对象不需要使用 Window 来引用。通过 Document 对象可以访问 HTML 文档中的任何 HTML 标记,并可以动态地改变 HTML 标记中的内容,如表单、图像、表格和超链接等。Document 对象在 JavaScript 1.0 版本中就已经存在,在随后的版本中又增加了几个属性和方法。 阅读详情

       Document类型提供了两个方法:document.getElementById()和getElementsByTagName()来取得特定的某个或某组元素的引用。

       getElementById()接收要取得元素的ID,若该元素存在则返回该元素,否则则返回null。注意:这里的ID必须与页面中元素的id特性严格匹配,包括大小写。

      

<div id="myDiv">Some text</div>
var div=document.getElementById("myDiv");//取得<div>元素的引用
        IE8及较低版本不区分ID的大小写,因此“myDiv”和“mydiv”会被当做相同元素ID。

var div=document.getElementById("mydiv");//无效的ID(在IE7及更早版本有效)

       如果页面中多个元素的ID值相同,getElementById()只会返回文档中第一个出现的元素。假如IE7及较低版本中的name特性与给定ID匹配,对应的表单元素(<button>、<textarea>、<select>)也会被该方法返回。如果有哪个表单元素的name特性等于指定的ID,而且该元素在文档中位于带有给定ID的元素前面,那么IE就会返回那个表单元素。

<input type="text" name="myElement" value="The field" />
<div id="myElement">A div</div>

       基于这段代码,在IE7中调用document.getElementById(“myElement”),结果会返回<input>元素;而在其他所有浏览器中会返回对<div>元素的引用。为了避免IE中存在的这个bug,最好的办法就是不让表单元素的name特性与其他元素的ID相同。


       但是有可能由于某些原因你的html结构不能变了,那怎么办呢?你可能想到了,重写document.getElementById()这个方法。

 var getElementById = function(el){ 
    var id = el; 
    el = document.getElementById(el); 
    if(el.id === id) 
      return el; 
    else{ 
      var nodes = document.all[id]; 
      for(var i = 0,len = nodes.length;i < len;i ++) 
        if(nodes[i].id == id) 
          return nodes[i]; 
    } 
  } 
//document.getElementByIdNew = getElementById;


JavaScript技巧:解决document.getElementById为空或不是对象的问题 这是因为在解析HTML页面时,浏览器会按照从上到下的顺序执行代码。这样,在页面完全加载后,JavaScript代码将执行,并且。// 正确示例:获取元素的代码位于window.onload事件处理函数中。的参数(元素的ID)拼写错误,或者页面中没有该ID的元素。标签的底部,或者将代码放在外部JavaScript文件中,并在。的参数是正确的,并且确保页面中存在该ID的元素。为空或不是对象的问题,并成功获取所需的元素。事件处理函数中,确保在页面完全加载后执行。通过上述修改,我们将获取元素的代码放在。 阅读详情

相关推荐

微带功分器设计与ADS-EM联合仿真实战解析

本文详细解析了微带功分器设计与ADS-EM联合仿真的实战技巧,涵盖特性阻抗计算、ADS原理图设计、版图生成与EM仿真等关键步骤。通过实际案例分享,帮助工程师掌握射频电路设计中的核心技术和调试方法,提升功分器设计效率与性能。

weixin_29280219的博客 451

JavaScript基础学习(一)

一、API ARI CApplication Programming lnterface,应用程序编程接口)是一生预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 API是给程序员提供的一种工具!以便能更加轻松的实现想要完成的功能。 二、WebAPI Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API( BOM 和 DOM)。 三、DOM 文档对象模型( Document ObjectModel,简

Jenny_Ghost的博客 1万+

在macOS上使用GitHub的超详细指南

GitHub:免费的远程仓库,可用来托管自己的开源项目。它利用了Git强大的克隆和分支功能,让我们参与别人的开源项目和让别人参与自己的开源项目变得简单高效。

Mars的博客 3391

document.getElementById

var element = document.getElementById(id); 因为Id具有唯一性,所以这个方法用来查找页面中的某一个元素。 无Id元素的查找可以使用CSS选择器 querySelector() 参数 id 大小写敏感的字符串,指代被查找元素 返回值 elemnt 一个DOM中匹配id的Element对象。未查找到此id的Element时,返回null。 注意 get...

xx_yan的博客 2万+

使用Anaconda和conda快速搭建YOLO开发环境

本文详细介绍了如何使用Anaconda和conda为YOLO目标检测项目快速搭建独立、纯净的开发环境。通过创建虚拟环境,有效解决了Python包版本冲突和CUDA兼容性问题,并指导安装GPU版PyTorch等核心依赖,最后通过验证脚本确保环境配置成功,为YOLO开发提供了稳定可靠的基础。

weixin_28829629的博客 163

MIPI DPHY接口(基于Xilinx FPGA实现)案例分析

在Xilinx FPGA实现MIPI DPHY接口的案例(包括CIS协议层)。截止目前为止,Xilinx仅在Ultrascale+及其以上版本的FPGA IO可直接支持MIPI 电平输入,其他的,都需要转换成LVDS来接收。

ONEFPGA的博客 5626

document.getElementById()方法使用

document.getElementById使用 语法:oElement = document .getElementById ( sID ) 参数:sID――必选项。字符串 (String) 。 返回值:oElemen――对象 (Element) 。 说明:根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一

酣睡的熊㊣的技术博客 36万+

勇闯dify v1.0.0之设置模型供应商。解决:Reached maximum retries (3) for URL https://marketplace.dify.ai/

朋友们,大家好,今天带大家来勇闯dify v1.0.0。为什么叫勇闯呢?我就这么说吧,本来我昨天就想带大家勇闯v1.0.0的。但是dify的marketplace访问不了。公司的网和手机热点都试了,就是访问不了。我们连个模型都没有,还勇闯个球啊,对吧,就搁置了。今天,我赶紧看看这个marketplace好了没。一看,可以了。赶紧写下这篇博客,帮助同志们走出困境。

xiezhipu的博客 4616

document.getElementById详解

注意: document.getElementById(" ") 得到的是一个对象,用 alert 显示得到的是 “ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才 是具体的值!   参考资料: 1. document . getElementById 的用法和 DHTML.CHM 的下载地址 http://blog.sin...

我的成长之路 3万+

Pointnet++环境配置(Windows11和ubuntu)及训练教程

PS:前两行命令是数据处理的命令,主要是进行数据读取和生成相应的训练数据格式,在Ubuntu上是正常运行的,在Windows上运行会失败,无法生成训练用的数据格式,所以最好在Ubuntu上训练,如果一定要用Windows,可以ubuntu上生成数据格式在导到Windows上,数据生成不需要安装torch。通过anaconda配置的环境,在官网找的命令安装的,版本是2.1.0+cu118。训练命令:我使用的pycharm,直接在pycharm中打开终端,运行命令。Python版本:3.7。

AIcurator的博客 2558

【法如faro】三维激光软件Scene2023数据处理(自动配准并转换坐标)流程

法如faro Scene2023数据处理(自动配准并转换坐标)的主要流程为:新建项目、导入数据、处理、自动注册、坐标系转换、模型导出立和面模型导出等。

智慧空间实验室 2383

IE的document.getElementById混淆name和id属性的BUG

BUG演示页面演示在这里,代码在下面> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ti

冬天来了——的专栏 4339

ResNet改进(7):添加 SK注意力机制

实现 SK 注意力机制。

2401_82355416的博客 732

解决document.getElementById("")在IE7中误读成name的bug

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/domready.js"&gt...

weixin_30779691的博客 102

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

解决IE的document.getElementById的BUG

项目马上要上线,却遇到一个IE的bug导致工作停滞,上网搜了一下,遇到这个问题的人还真不少啊! 但就是没有人提出好的解决办法,无奈费了我半天时间解决了一下。估计对大家会有帮助,写下来吧。  问题是这样的。。。。。。。 document.getElementById 有时会抓name放过了id ,据说是IE的一个BUG; http://community.csdn.n

LiuJunjiang的专栏 2461

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

浏览器错误:document.getElementById()获取错误的元素(IE)

问题 document.getElementById()通过其名称选择一个元素。 浏览器 IE浏览器 例 相关的HTML代码: [HTML] <输入名称=“测试”类型=“文本”值=“测试”> [/ HTML] Javascript代码: varobj=document.getElementById("test");即使页面上不存在ID为“ test”的元素,也不会...

IT与开发人员的地盘 1092

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

DOCUMENT.GETELEMENTBYID使用

意: document.getElementById(" ")得到的是一个对象,用alert显示得到的是 “object”,而不是具体的值,它有value和length等属性,加上.value得到的才 是具体的值! 参考资料: 1. document . getElementById的用法和DHTML.CHM的下载地址 http://blog.sina....

weixin_30530523的博客 472

【2017-11-08】document.getElementById 在IE中隐藏的bug

document.getElementById 一般在前端开发中用来获取指定ID的控件,如果存在这个元素,则会直接返回这个元素,否则返回null. *在IE8以前的版本中,document.getElementById 对大小写是不敏感的 如上图:相同的代码在IE7下可以获取到元素,而在IE8下获取到的是null,由此可证明IE7及以下版本对大小写是不敏感的; 在IE8以前的版本中

kk_yanwu的博客 1953

JS 解决getElementById()浏览器兼容性bug

- getElementById() 通过id获取节点,只能用document对象调用。IE6~8也可以使用,但在IE8以下存在一个bug:若name属性和id属性的内容相同,则浏览器会自动取先出现的属性,所以有可能会取到name属性,而不是id属性,该bug只在IE8版本以下的浏览器出现。 解决bug的方法: //首先封装一个函数 通过ID获取元素 var getElementByID = fu...

软软软的blog 2425

IE中document.getElementById和document.getElementsByName特殊表现

    HTML元素属性Id和name应该是不同的,Id犹如身份证号码,在整个页面中应该是唯一的,而name犹如姓名,在整个页面中可以重复。     JS中document.getElementById应该是用于捕捉具有某个id属性的一个元素,document.getElementsByName是用于捕捉具有某个name属性的多个元素.id和name不应当混淆。这一点在firefox中没有问题

黄刚的专栏 2562
上一篇: 跨域资源共享10种方式
下一篇: CSS hack原理
火箭豹
博客等级 码龄15年 2粉丝 27原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值