HTML DOM Element getElementsByTagName() 方法

定義和用法

getElementsByTagName() 方法返回擁有指定標簽名的元素子元素集合，以 NodeList 對象。

提示：參數值 "*" 返回元素的所有子元素。

另請參閱：

getElementsByClassName() 方法

querySelector() 方法

querySelectorAll() 方法

NodeList

NodeList 是類似數組的節點集合（列表）。

您可通過索引（下標）訪問列表中的節點。索引從 0 開始。

length 屬性返回列表中的節點數。

實例

例子 1

更改列表中第一個 <li> 元素的 HTML 內容：

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

親自試一試

例子 2

"myDIV" 中 <p> 元素的數量：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

親自試一試

例子 3

更改 "myDIV" 中第二個 <p> 元素的字體大小：

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

親自試一試

例子 4

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

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

親自試一試

例子 5

更改 "myDIV" 中第四個元素（索引 3）的背景顏色：

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

親自試一試

例子 6

使用 "*" 參數，更改 "myDIV" 中所有元素的背景顏色：

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

親自試一試

語法

element.getElementsByTagName(tagname)

參數

參數 描述
tagname 必需。子元素的標簽名。

返回值

類型 描述
NodeList

擁有給定標記名的元素的子元素。

元素按照它們在源代碼中出現的順序進行排序。

技術細節

getElementsByTagName() 方法將遍歷指定元素的子孫節點，返回包含 Element 節點的數組（實際上是 NodeList 對象），表示所有擁有指定標簽名的文檔元素。元素在返回的數組中的順序就是它們出現在文檔源代碼中的順序。

注意

Document 接口也定義了 getElementsByTagName() 方法，它與該方法相似，但遍歷整個文檔，而不是遍歷某個元素的子孫節點。

不要把該方法與 HTMLDocument.getElementsByName() 方法 相混淆，后者基于元素的 name 屬性值檢索元素，而不是基于它們的標簽名檢索元素。

瀏覽器支持

所有瀏覽器都支持 element.getElementsByTagName()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持