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)

参数

返回值

技术细节

该方法将返回 NodeList 对象（可以作为只读数组处理），该对象存放文档中拥有指定标签名的所有 Element 节点，它们存放的顺序就是在源文档中出现的顺序。

NodeList 对象是“活的”，即如果在文档中添加或删除了具有指定标签名的元素，它的内容会自动进行必要的更新。

HTML 文档不区分大小写，所以可以用任意的大小写形式指定 tagName，它将于文档中所有同名标签的匹配，无论这些标签在源文档中采用的大小写形式是什么。但 XML 文档区别大小写，tagName 只和源文档中名称与大小写形式完全相同的标签匹配。

提示：Element 接口定义了一个同名的方法，该方法只检索文档的子树。另外，HTMLDocument 接口定义了 getElementByName() 方法，它基于 name 属性的值（而不是标签名）检索元素。

浏览器支持

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

所有浏览器都支持它：

相关页面

JavaScript 参考手册：element.getElementsByTagName()

JavaScript 教程：JavaScript HTML DOM 节点列表