document.getElementById 学习总结

最新推荐文章于 2024-02-28 16:07:09 发布

bcbobo21cn

最新推荐文章于 2024-02-28 16:07:09 发布

阅读量3w

点赞数 2

分类专栏：转载 web前端文章标签： DOM getElementById

转载同时被 2 个专栏收录

282 篇文章 5 订阅

订阅专栏

web前端

150 篇文章 1 订阅

订阅专栏

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>


<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"> *
*  *
* </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区分介绍

bcbobo21cn

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
document.getElementById 学习总结

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

扫一扫