码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM 元素 getElementsByTagName()

❮上一节 ❮ 元素对象参考 下一节❯

示例

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

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";
亲自试一试 »

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

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;
亲自试一试 »

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

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

下面有更多示例。

描述

这个getElementsByTagName()方法返回具有给定标签名称的子元素的集合。

这个getElementsByTagName()方法返回一个HTML集合。

笔记

标记名称 "*" 返回所有子元素。

也可以看看：

getElementsByClassName() 方法

querySelector() 方法

querySelectorAll() 方法

节点列表

节点列表是一个类似数组的节点集合（列表）。

链表中的节点可以通过索引来访问。索引从 0 开始。

长度波珀蒂返回列表中的节点数。

语法

element.getElementsByTagName( tagname)

参数

Parameter Description
tagname Required.
The tagname of the child elements.

返回值

类型 描述
节点列表 具有给定标记名的元素的子元素。
元素按照它们在源代码中出现的方式进行排序。

更多示例

更改 "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";
}
亲自试一试 »

更改 "myDIV" 内第四个元素（索引 3）的背景颜色：

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";
亲自试一试 »

使用"*" 参数。

更改 "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()所有浏览器都支持：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮上一节 ❮ 元素对象参考 下一节❯