document.getElementById使用介绍，看了定有收获

来源：互联网发布：mac未检测到摄像头编辑：程序博客网时间：2024/04/28 09:08

定义和用法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

语法

     document.getElementById(id)，这里的id是以字符串的形式标注

说明

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

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

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

实例

例子 1

<html><head><mce:script type="text/javascript"><!--function getValue()  {  var x=document.getElementById("myHeader")  alert(x.innerHTML)  }// --></mce:script></head><body><h1 id="myHeader" onclick="getValue()">This is a header</h1><p>Click on the header to alert its value</p></body></html>

例子 2

getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：

 function id(x) {  if (typeof x == "string")      return document.getElementById(x);  return x;  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。

题外话：

这里说说大家有可能遇到的一个问题，有人说是IE的bug，也有人说IE是为了兼容的问题。反正我的目的呢？就是记录出这个差异出来。好了，看看下面的介绍吧：(为了省事，我就搬http://blog.csdn.net/mmcgzs/archive/2007/03/25/1540250.aspx里面的例子来说明，一来他的例子简单；二来我很懒。)

text1： <input name="textName1" type="text" id="textName2" /><br/> text2：<input name="textName2" type="text" id="textName1" /><br/> <input type="button" name="Submit" value="text1" onclick=alert(document.getElementById('textName2').value) /> <input type="button" name="Submit2" value="text2" onclick=alert(document.getElementById('textName1').value) />

在IE中测试了上面的代码，在第一个文本框中输入1，在第二个文本框中输入2，然后点下面的两个按钮，猜一下结果是什么？

本来是想在按第一个按钮的时候弹出一个返回第一个文本值的框，按第二个按钮的时候返回第二个文本值的框。

结果是两个按钮都返回了第一个文本框的值。

通过这个事例，可以说明一点，那就是ie在执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是按照ID来查找的。而在fireFox中不存在这样的问题，fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象，如果不存在则返回null。