翻译正在进行中。

 

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

如果需要查找到那些没有ID 的元素,你可以考虑通过CSS选择器使用 querySelector()

 

语法

var element = document.getElementById(id);

参数

  • element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  • id是大小写敏感的字符串,代表了所要查找的元素的唯一ID.

返回值

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到,则返回 null。

示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>getElementById example</title>
</head>
<body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html>

JavaScript

function changeColor(newColor) {
​  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

执行结果

注意

对 “Id” 的拼写一定要正确。无论看起来多么合情合理,getElementByID() 都是不合理的且永远都不会工作的。

不同于其他 Element 查找方法(如Document.querySelector() 以及 Document.querySelectorAll()),getElementById() 只有在作为 document 的方法时才能起作用,而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

示例

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p id="test1">hello word2</p>
        <p>hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
        //抛出错误
        //(这是一条错误信息)Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
</body>
</html>

如果没有查找到对应的元素,方法会返回null。注意ID参数是大小写敏感的,所以document.getElementById("Main")无法获取到元素<div id="main">,因为'M'和'm'是不一样的。

getElementById方法不会搜索不在文档中的元素。当创建一个元素,并且分配ID后,你必须要使用insertBefore或其他类似的方法把元素插入到文档中,之后才能使用 getElementById 获取到:

var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el 是个 null

非HTML文档(Non-HTML documents)。 DOM的实现必须说明哪个属性是ID类型。只有DTD定义了'id'是ID属性时’id‘才会被认为是ID属性。在 XHTMLXUL或者其他文档中,'id'通常被定义为ID类型的属性。不知道哪个属性是ID类型的实现中,这会返回null结果。

规范

规范 状态 说明
Document Object Model (DOM) Level 1 Specification
getElementById
Obsolete 接口初始定义
Document Object Model (DOM) Level 2 Core Specification
getElementById
Obsolete 取代DOM 1
Document Object Model (DOM) Level 3 Core Specification
getElementById
Obsolete 取代DOM 2
DOM
getElementById
Living Standard 准备取代DOM 3

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 5.5 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) 6.0 6.0 1.0

 

相关链接

 

  • document reference for other methods and properties you can use to get references to elements in the document.
  • document.querySelector() 类似'div.myclass'的元素的选择
  • xml:id - has a utility method for allowing getElementById to obtain 'xml:id' in XML documents (such as returned by Ajax calls)

文档标签和贡献者

标签: 
此页面的贡献者: python012, HTLing, hhxxhg, Ende93, teoli, HeChenTao
最后编辑者: python012,