HTML DOM Document getElementsByTagName() 方法

定義和用法

getElementsByTagName() 方法返回擁有指定標記名的所有元素的集合。

getElementsByTagName() 方法返回 HTMLCollection。

getElementsByTagName() 屬性是只讀的。

注釋：getElementsByTagName("*") 返回文檔中的所有元素。

HTMLCollection

HTMLCollection 是 HTML 元素的類似數組的集合（列表）。

可以通過索引訪問集合中的元素（從 0 開始）。

length 屬性返回集合中元素的數量。

另請參閱：

getElementById() 方法

getElementsByClassName() 方法

querySelector() 方法

querySelectorAll() 方法

HTMLCollection 對象

實例

例子 1

獲取標簽名稱為 "li" 的所有元素：

const collection = document.getElementsByTagName("li");

親自試一試

例子 2

獲取文檔中的所有元素：

const collection = document.getElementsByTagName("*");

親自試一試

例子 3

更改文檔中第一個 <p> 元素的內部 HTML：

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

親自試一試

例子 4

文檔中 <li> 元素的數量：

let numb = document.getElementsByTagName("li").length;

親自試一試

例子 5

更改所有 <p> 元素的背景顏色：

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

親自試一試

語法

document.getElementsByTagName(tagName)

參數

參數 描述
tagName 必需。元素的標記名。

返回值

類型 描述
對象

HTMLCollection 對象。

擁有指定標簽名稱的元素的集合。

按照元素在文檔中出現順序進行排序。

技術細節

該方法將返回 NodeList 對象（可以作為只讀數組處理），該對象存放文檔中擁有指定標簽名的所有 Element 節點，它們存放的順序就是在源文檔中出現的順序。

NodeList 對象是“活的”，即如果在文檔中添加或刪除了具有指定標簽名的元素，它的內容會自動進行必要的更新。

HTML 文檔不區分大小寫，所以可以用任意的大小寫形式指定 tagName，它將于文檔中所有同名標簽的匹配，無論這些標簽在源文檔中采用的大小寫形式是什么。但 XML 文檔區別大小寫，tagName 只和源文檔中名稱與大小寫形式完全相同的標簽匹配。

提示：Element 接口定義了一個同名的方法，該方法只檢索文檔的子樹。另外，HTMLDocument 接口定義了 getElementByName() 方法，它基于 name 屬性的值（而不是標簽名）檢索元素。

瀏覽器支持

document.getElementsByTagName() 是 DOM Level 1 (1998) 特性。

所有瀏覽器都支持它：

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

相關頁面

JavaScript 參考手冊：element.getElementsByTagName()

JavaScript 教程：JavaScript HTML DOM 節點列表