Document.getElementById()

在此页

句法
范例
用法注意事项
范例
规范
浏览器兼容性
另请参阅
相关话题

Document 方法 getElementById() 返回 元素 object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

If you need to get access to an element which doesn't have an ID, you can use querySelector() to find the element using any 选择器 .

句法

var element = document.getElementById(id);

参数

id

返回值

元素 object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

范例

HTML

<html>
<head>
  <title>getElementById example</title>
</head>
<body>
  <p id="para">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;
}

结果

用法注意事项

The capitalization of "Id" in the name of this method must be correct for the code to function; getElementByID() is not valid and will not work, however natural it may seem.

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll() , getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

范例

<!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');
        //throw error
        //Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
</body>
</html>

If there is no element with the given id ，此函数返回 null 。注意， id parameter is case-sensitive, so document.getElementById(" M ain") 将返回 null instead of the element <div id=" m ain"> because "M" and "m" are different for the purposes of this method.

Elements not in the document are not searched by getElementById() . When creating an element and assigning it an ID, you have to insert the element into the document tree with Node.insertBefore() or a similar method before you can access it with getElementById() :

var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!

Non-HTML documents . The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document's DTD. The id attribute is defined to be of ID type in the common cases of XHTML , XUL , and other. Implementations that do not know whether attributes are of type ID or not are expected to return null .

规范

规范	状态	注释
DOM (文档对象模型) 1 级规范 The definition of 'getElementById' in that specification.	过时	接口的初始定义
DOM (文档对象模型) 级别 2 核心规范 The definition of 'getElementById' in that specification.	过时	取代 DOM 1
DOM (文档对象模型) 3 级核心规范 The definition of 'getElementById' in that specification.	过时	取代 DOM 2
DOM The definition of 'getElementById' in that specification.	实时标准	打算取代 DOM 3

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getElementById`	Chrome 1	Edge 12	Firefox 1	IE 5.5	Opera 7	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

另请参阅

Document reference for other methods and properties you can use to get references to elements in the document.
Document.querySelector() for selectors via queries like 'div.myclass'
xml:id - has a utility method for allowing getElementById() to obtain 'xml:id' in XML documents (such as returned by Ajax calls)

元数据

最后修改： Jun 21, 2020

在此页

句法

参数

返回值

范例

HTML

JavaScript

结果

用法注意事项

范例

规范

浏览器兼容性

图例

另请参阅

相关话题