HTML DOM Document getElementById() 方法

定義和用法

getElementById() 方法返回擁有指定 id 值的元素。

如果元素不存在，getElementById() 方法將返回 null。

getElementById() 方法是 HTML DOM 中最常用的方法之一。幾乎每次您想要讀取或編輯 HTML 元素時，都會使用它。

提示

任何 id 都應該是唯一的，但是：

如果存在兩個或多個具有相同 id 的元素，則 getElementById() 返回第一個。

另請參閱：

getElementsByTagName() 方法

getElementsByClassName() 方法

querySelector() 方法

querySelectorAll() 方法

實例

例子 1

獲取擁有指定 id 的元素：

document.getElementById("demo");

親自試一試

例子 2

獲取元素并更改其顏色：

const myElement = document.getElementById("demo");
myElement.style.color = "red";

親自試一試

例子 3

或者僅改變它的顏色：

document.getElementById("demo").style.color = "red";

親自試一試

語法

document.getElementById(elementId)

參數

參數 描述
elementId 必需。元素的 id 值。

返回值

類型 描述
對象

擁有指定 id 的元素。

如果未找到，則返回 null。

技術細節

getElementById() 方法是一個重要的常用方法，因為它為獲取表示指定的文檔元素的 Element 對象提供了簡便的方法。

該方法將檢索 id 屬性的值為 elementId 的 Element 節點，并將它返回。如果沒有找到這樣的元素 Element，它將返回 null。id 屬性的值在文檔中是唯一的，如果該方法找到多個擁有指定 elementId 的 Element 節點，它將隨機返回一個這樣的 Element 節點，或者返回 null。

注意：該方法的名稱以 Id 結尾，不是 ID，不要拼錯！

在 HTML 文檔中，該方法總是檢索擁有指定 id 的屬性。請使用 HTMLDocument.getElementByName() 方法，根據它們的 name 屬性中的值來查找 HTML 元素。

在 XML 文檔中，這個方法則是使用類型為 id 的任一屬性來查找，而不管這個屬性的名稱是什么。如果 XML 屬性的類型是未知的（如 XML 解析器忽略了或不能定位文檔的 DTD），該方法總是返回 null。在客戶端 JavaScript 中，這個方法并不經常和 XML 文檔一起使用。實際上，getElementById() 方法最初被定義為 HTMLDocument 接口的一員，但是在后來的 2 級 DOM 中移入了 Document 接口中。

瀏覽器支持

document.getElementById() 是 DOM Level 2 (2001) 特性。

所有瀏覽器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相關頁面

CSS 教程：CSS 語法

CSS 參考手冊：CSS #id 選擇器

HTML DOM 參考手冊：HTML DOM id 屬性

HTML DOM 參考手冊：HTML DOM Style 對象