1. 全栈程序员必看首页

document.getElementById 学习总结「建议收藏」

全栈程序员-用户IM • • 未分类

document.getElementById 学习总结「建议收藏」document.getElementById获取控件对象为空的解决方法 1.下面是一个简单的例子，页面加载时显示一段信息代码如下:         alert(“hello!!!”);        在页面加载之前，会输出一些信息 执行后，确实是“在页面加载前，输出了信息”

大家好，又见面了，我是你们的朋友全栈君。

document.getElementById获取控件对象为空的解决方法

 

1.下面是一个简单的例子，页面加载时显示一段信息

代码如下:

<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

  <head>

      <script language=”javascript”>

          alert(“hello!!!”);

      </script>

  </head>

  <body onLoad=”showMessage()”>

      <h1>在页面加载之前，会输出一些信息</h1>

  </body>

</html>

执行后，确实是“在页面加载前，输出了信息”。

2.下面的例子会出现document.getElementById为空的情况。

我的计划是：在页面加载时，在<body></body>的文本框中显示由后台处理来的数据，比如这里的字符串

“hello, my friend!”。但是这里通过通过document.getElementById读取的是对象为空。

因为onLoad方法在页面<body></body>加载之前执行，此时id=”mes”对应文本框的文本框，还没有加载进

去。

代码如下:

<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

  <head>

      <script language=”javascript”>

          var t=document.getElementById(“mes”);

          t.value=”hello, my friend!”

      </script>

  </head>

  <body onLoad=”showMessage()”>

      the message is:<input type=”text” id=”mes”>

  </body>

</html>

3.解决办法

在加载Html网页时，会加载<html></html>中的所以数据。先加载<head>，再加载<body>。

所以我们可在</body>之后，在</html>之前写入javascript就好了。程序顺序执行，执行到相应的

javascript调用就可以执行。不是用onLoad方法。

代码如下：

代码如下:

<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

    <body> 

          the message is:<input type=”text” id=”mes”>

    </body>

      <!– 继续执行javascript代码 –>

    <script language=”javascript”>

          function showMessage()

          {

              var t=document.getElementById(“mes”);

              t.value=”hello, my friend!”

          }

          showMessage();    //调用方法，更新文本框

      </script>

</html>

========

document.getElementById获取不到值的原因

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 

getElementsByTagName()。

 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 

getElementsByTagName()。

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称

，然后就可以用该 ID 查找想要的元素。

需求，就可以想到利用GET传值的方式，但常规GET方式需要把链接写入标签的a href里面，而我们实际

上是希望用按钮来进行点击，而不是一个简单的超链接形式。于是这里就得用到Javascript在按钮的

onclick事件下写代码。很明白，就是将input的value(用户输入的页码)传到onclick的代码里，这里用

javascript的location来完成跳转。

    好了，整体就是这个样子，至于getElementById这个方法我就不多说了。重点说说我遇到的问题以

及如何解决的。

1.Javascript本身不会报错，只要不出你预期的结果，那么代码肯定是有问题的。这个时候可以看看代

码里的符号，比如说单引号、双引号、大括号、小括号等等…因为这段代码不是直接在JS文件中写的，

而是用PHP进行构造来输出的，再加上PHP本身输出需要用到单引号、双引号，所以这个时候很多符号混

合在一起是很容易出错。不要紧，你可以先运行一下，然后再查看网页源代码来看看当前的Javascript

到底是不是你需要的那一段，看到少了什么符号我们就立马给补上，不过这个时候还需要注意一点，如

果要直接输出单引号、双引号的话，在PHP的代码里这里需要用‘’来进行转义。

2.上面的问题一般是不会弹出任何结果的，即使我们用alert来查看设置的变量，因为Javascript代码存

在问题，它根本就没办法执行！假设你已经改正了语法上的错误，那么我们继续看…我们可以用以下代

码来获取用户输入的页码，并打印输出看看正确与否。

 

 代码如下
复制代码

var uPage=document.getElementById(‘pa’).value; alert(uPage);

 如果这个时候一直弹出”undefined”的提示，那么至少说明你的Javascript代码正确运行了，它没有语

法上的错误！至于为什么undefined，我调试了很久都没找出原因，后来无意中尝试把value改成

innerHTML，居然打印出了一些结果，不过仔细一看才知道打印出的是一个同id名的div中的内容，这下

才恍然大悟…在分页类中直接给input标签的id取名为page了，而这个page我在其他的div中也使用了。

于是将分页类中input的id改为一个很变态的名字。其实这个时候就应该注意到这些问题，如果我们的代

码可能会提供给其他人使用，那么命名就很重要了，如果只是在内部(就比如说我这里input这个标签只

在类里面使用)，那么名字应该尽量取得复杂一些，这样它与用户的命名发生冲突的可能性就很小了。

     最后：

 代码如下
复制代码

document.getElementById(‘idname’).value;//获取input标签里的值，value; 

document.getElementById(‘idname’).innerHTML;//获取div里的html内容  

参考资料：

1. document . getElementById 的用法和 DHTML.CHM 的下载地址

今天在网络上查找 document . getElementById 的用法，如下：

A ：      语法：

     oElement = document . getElementById ( sID )

      参数：

     sID   : 必选项。字符串 (String) 。

      返回值：

     oElement   : 对象 (Element) 。

      说明：

      根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为

一组对象       ，则返回该组对象中的第一个。

      如果无符合条件的对象，则返回 null 。

 

B ：有一个例子可以很好的说明：

 

   ****************************************************************************

   *                                                                           *

   *   这个函数中最关键的地方是 document.getElementById ，他是什么呢？        *

   *                                                                           *

   *   关于 document.getElementById ，是这样的：                              *

   *                                                                     *

   *   如： document.getElementById(‘hdrPageHeader_lblTitle’)               *

   *                                                                     *

   *   表示的意思是：获取 ID 为 :hdrPageHeader_lblTitle 的对象                  *

   *                                                                           *

   * <a >aa</a>                              *

   * <a >bb</a>                               *

   * <a >cc</a>                              *

   * <script language=”javascript”>                                      *

   * <!–                                                                *

   * var idtext=document.getElementById(‘hdrPageHeader_lblTitle’)        *

   * alert(idtext.innerText)                                             *

   * //–>                                                               *

   * </script>                                                           *

  

C ：另外还得到一个细节：

① document.getElementById 有时会抓 name 放过了 id ，据说是 IE 的一个 BUG ；

页面中有

     <input type=”hidden” value=”2″ />

          <select     >

一个是 一个是

用 document.getElementById 取第二个，可是，取到的却是第一个 >

在 IE 中 getElementById 竟然不是先抓 id 而是先找 name 相同的物件 …

??? form, 每?? form 有??? textbox, ??? form 中的 textbox 是相同的 name, 但 id 都不同 …

??釉 Firefox 是?]???的 … 但在 IE ?s只抓得到第一??出?的 name ?料

========

js判断document.getElementByid(“”)获得的对象是否存在

document.getElementByIdx_x(“”)如果获得的对象不存在，进行操作时会报错。因此需要判断该对象是

否存在，以下2种方法，

推荐使用第一种

方法一:

var v;

v = document.getElementByIdx_x( “id “);

if(v==null){

//不存在，错误处理

}else{

//存在，正常处理

}

方法二：

if (typeof(obj) == “undefined”) {

     //不存在，错误处理

}else{

//存在，正常处理

}

========

一行代码告别document.getElementById

绝大多数的脚本里，都是直接通过元素的id来访问DOM的。 

　　 

　　后来随着各种浏览器接踵而至，逐渐的替代了ie。为了保证各路门派统一规则，标准化越来越被重

视。当初那种直接访问id的方法，逐渐被document.getElementById所替代。如果这年头还在用id访问元

素，要么就是做程序里的内嵌网页，要么就是像铁道部那样的超境界仿古网站：） 当然只要保证你的用

户都是用ie访问，这样的非标准也但用无妨。 

　　 

　　然而，很多第三方浏览器刚出来的时候，为了保证能与当时大量的非标准页面兼容，都保留了用id

访问DOM这一非标准做法。事实上如今的主流浏览器，只有FireFox不支持这种做法，而

Chrome,Opera,Safari,Mobile Safari都支持。 

　　 

　　既然如此，我们不如让FireFox也支持，这样所有的浏览器都可以直接用id直接访问DOM，不仅快捷

方便，减少了累赘的代码，更能提升运行的效率。 

　　 

　　实现很简单，文档载入完成后查询带有id属性的元素，然后在window对象里添加其引用： 

代码如下:

var list = document.querySelectorAll(‘[id]’); 

for(var i = 0; i < list.length; i++) 

{ 

if(list[i].id) 

window[list[i].id] = list[i]; 

} 

当然，只有FF需要这个hack，所以我们先检测下是否有其特征。最后精简下代码，利用数组遍历回调，

即可压缩到简单的一行： 

代码如下:

<script> 

if(‘mozHidden’ in document) [].forEach.call(document.querySelectorAll(‘[id]’),function(k)

{this[k.id]=k}); 

</script> 

　　不过有个值得注意的地方，在文档载入尚未完成前 querySelectorAll，只能查询当前<script>之前

的元素。所以以上代码必须放在文档的末尾。而使用id访问，也必须在文档载入完成之后，否则就可能

找不到这个元素。下面是个测试页面，在所有浏览器下都通过： 

代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<title>No document.getElementById</title> 

</head> 

<body> 

<div id=”mytag”></div> 

<script> 

onload = function() 

{ 

mytag.innerHTML = “Goodbye, document.getElementById!”; 

} 

</script> 

<script> 

if(‘mozHidden’ in document) [].forEach.call(document.querySelectorAll(‘[id]’),function(e)

{self[e.id]=e}); 

</script> 

</body> 

</html> 

========

各浏览器对document.getElementById等方法的实现差异解析

所有Web前端同仁对 document.getElementById 都非常熟悉了。开发过程中经常需要用其获取页面id为

xx的元素，自从元老级JS库Prototype流行后，都喜欢这么简写它

代码如下:

// 方式1 

function $(id){ return document.getElementById(id); } 

有没有人想过为什么要这么写，而不用下面的方式写呢？

代码如下:

// 方式2 

var $ = document.getElementById; 

这么写的$更简洁啊，也很明了，将document的方法getElementById赋值给变量$，用$去获取页面id为xx

的元素。实际上方式2在IE6/7/8中是可行的（IE9中有些变动），Firefox/Safari/Chrome/Opera则行不

通。还请自行测试。

为什么Firefox/Safari/Chrome/Opera 方式2获取就不行呢，原因是这些浏览器中getElementById方法内

部实现中需依赖this(document)，IE则不需要this。或者说方式2在Firefox/Safari/Chrome/Opera中调

用时说丢失了this，以下是个简单示例

代码如下:

// 定义一个函数show 

function show(){alert(this.name);} 

// 定义一个p对象，有name属性 

var p = {name:’Jack’}; 

show.call(p); // -> ‘Jack’ 

show(); // -> ” 

show.call(null); // -> ”<BR> 

可以看到show的实现中依赖this（简单说方法体中使用了this），因此调用时的环境（执行上下文）如

果没有name属性，则得不到期望的结果。

换句话说，IE6/7/8实现document.getElementById时没有用到this，而 

IE9/Firefox/Safari/Chrome/Opera 需要用到this，这里的this正是document对象。直接调用方式2时内

部的 this却是window对象，所以造成方式2在 Firefox/Safari/Chrome/Opera 不能根据id来正常获取元

素。

如果将document.getElementById的 执行环境换成了document而非window，则可以正常的使用$了。如下

代码如下:

// 修复document.getElementById 

document.getElementById = (function(fn){ 

    return function(){  

        return fn.apply(document,arguments); 

    }; 

})(document.getElementById); 

// 修复后赋值给$，$可正常使用了 

var $ = document.getElementById; 

再次，ECMAScript5 中为function新增的 bind 方法可以实现同样的效果 

代码如下:

// 方式3 

var $ = document.getElementById.bind(document); 

但目前方式3只有IE9/Firefox/Chrome/支持。

分析了getElementById的情况，下面的一些方法在各浏览器中的差异原因就很好明白了 

代码如下:

var prinf = document.write; 

prinf(‘<h3>Test prinf</h3>’); // IE6/7/8可运行，其它浏览器报错 

var prinfln = document.writeln; 

prinfln(‘<h3>Test prinfln</h3>’); // IE6/7/8可运行，其它浏览器报错 

var reload = location.reload; 

reload(); // IE6/7/8可运行，其它浏览器报错 

var go = history.go;  

go(-2); // IE6/7/8可运行，其它浏览器报错 

========

js中document.getElementByid、document.all和document.layers区分介绍

document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的娄组，不仅包括页面

上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在document.all数组里面，元素不

分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以可以用数字索引来引用到任何一个元

素。但比较常用的是用对象id来引用一个特定的对象，比如document.all[“element”]这样。 

document.layers是Netscape 4.x专有的属性，是一个代表所有由储如<div><layer>等定位了的元素的数

组。通常也是用<div>或<layer>对象的id属性来引用的，但是这里面不包含除此以外的其它元素。 

其实这两个属性没什么可比性，大概你经常看到他们同时出时，这有一个历史原因。在第四代浏览器出

现的时候，标准相当混乱，Netscape和微软分别推出了它们的Navigator 4.x和IE 4.0，这两个浏览器的

巨大差异，也使开发者面临了一个使网页跨浏览器兼容的噩梦。而document.layer和document.all分别

是两者一个最显著的标志，为了确定浏览者使用的什么浏览器，通常用是否存在document.layers和

document.all来判断。 

新的统一的标准用document.getElementById等系列方法来引用DOM对象，而且Netscape 6.0以后放弃了

layers特征，虽然IE继续保留了document.all，但这最终没有成为DOM标准的一部分。希望

document.layers和document.all能够早日作古，让标准早日深入人心！ 

代码示例： 

代码如下:

<script language=”JavaScript”> 

function showtime() 

{ 

var GetTime=newDate(); //获取当前日期 

var Years=GetTime.getYear(); // 取当前日期的年 

var Months=GetTime.getMongh();// 取当前日期的月 

var Days=GetTime.getDate();// 取当前日期的日 

var Hours=GetTime.getHours();// 取当前日期的小时 

var Minutes=GetTime.getMinutes();// 取当前日期的分钟 

var Seconds=GetTime.getSeconds();// 取当前日期的秒 

var Dn=’AM’; 

if(Hours<=9) //小时少于9时,前面加0, 

{ 

Hours=’0’+Hours; 

} 

if(Hours==0||Hours>12) 

{ 

Dn=’PM’; //小时大于12或0时,设为PM(下午) 

} 

if(Minutes<=9) 

{ 

Minutes=’0’+Minutes; 

} 

if(Seconds<=9) 

{ 

Seconds=’0’+Seconds;//秒少于9时,前面加0, 

} 

NowTime=Years+’年’+Months+’月’+Days+’日 ‘+Hours+’:’+Minutes+’:’+Seconds+”+Dn; //当前日期的

字符串 

if(document.layers){ //不同浏览器下, 将当前日期的字符串显示出来. 

document.layers.liveclock.document.write(NowTime) 

document.layers.liveclock.document.close() 

} 

else if(document.all) 

liveclock.innerHTML=NowTime 

setTimeout(‘showtime()’,1000) //每秒运行showtime函数一次, 

} 

document.all是IE下面的document属下的所有元素的集合 

可以通过document.all.length来看到document下面的元素数量 

document.all(index)后面的index参数是一个集合方法 

如果index是string那么可以获得document下面具有id或name为index的元素 如果只有一个的元素话返回

这个元素 如果有多个元素id或name是index的话就返回一个集合 如果没有的话就返回null 

这样并不好 因为当你不知道有多少个id或name是index的元素时 就比较容易出错. 

如果index是数字的话 那么会返回以0为基础的 文档中第index个元素. 元素的文档序列可以通过

Element.sourceIndex来获取 

document.getElementById(name) 只返回第一个具有id或name为name的元素 所以不是null就是一个元素 

而不会返回集合 这样就大大减少了错误发生的可能性 

如果需要返回一个id或name为name的元素集合的话 就要用 document.getElementsByName(name)来获取 

document.getElementById 

返回 ID 属性值与指定值相同的第一个对象，如果 ID 属于一个集合，getElementById 方法返回集合中

的第一个对象。 

document.all 

如果 ID 属于一个集合，document.all返回一个集合。而且只支持IE。 

所以在使用IE的前提下，document.all(index)要生效需要保证index是唯一的 

所以如果你想让你写的js脚本在目前的大多浏览器中使用，需要使用[公共标准] 标准的Javascript 

========

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/159572.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号