HTML DOM Element getElementsByTagName() method

Definition and usage

getElementsByTagName() The method returns a collection of child elements with the specified tag name, as a NodeList object.

Tip:Parameter value "*" Returns all child elements of the element.

See also:

getElementsByClassName() method

querySelector() method

querySelectorAll() method

NodeList

NodeList Is a node collection (list) similar to an array.

You can access nodes in the list by index (subscript). The index starts from 0.

length attributeReturn the number of nodes in the list.

Instance

Example 1

Change the HTML content of the first <li> element in the list:

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

亲自试一试

Example 2

Number of <p> elements in "myDIV":

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

亲自试一试

Example 3

Change the font size of the second <p> element in "myDIV":

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

亲自试一试

Example 4

Change the background color of all <p> elements in "myDIV":

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

亲自试一试

Example 5

Change the background color of the fourth element (index 3) in "myDIV":

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 属性值检索元素，而不是基于它们的标签名检索元素。

Girmama da kaiwa

Duba dukiya kai da ake aiki element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Girmama Girmama Girmama Girmama Girmama Girmama