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 节点列表