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
支持 支持 支持 支持 支持 支持