Method ya getElementsByTagName() ya kiwango cha HTML DOM Element

Ufafanuzi na matumizi

getElementsByTagName() Method hupinga kundi la mabaki ya kuzingatia cha kiwango cha kawaida cha kina na kina kwa orodha ya NodeList.

Tahadhari:Chaguo la hatua "*" Inarudi mabaki ya wengi wa mabaki ya kiwango cha kuzingatia.

Tazama pia:

Method ya getElementsByClassName()

Method ya querySelector()

Method ya querySelectorAll()

NodeList

NodeList Ni kundi la mabaki la kawaida (orodha).

Unaweza kufikia mabaki katika orodha kwa tabaka (indeksi). Tabaka hufika kuanzia 0.

Mabaki ya kawaidaKurudi jumla ya mabaki katika orodha.

Mfano

Mfano 1

Kufaa matokeo wa HTML wa mabaki ya kawaida ya <li> ya pili katika orodha:

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

亲自试一试

Mfano 2

Jumla ya mabaki ya <p> katika "myDIV":

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

亲自试一试

Mfano 3

Kufaa ukanda wa mabaki ya "myDIV" ya kawaida ya <p> ya pili (indeksi 2):

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

亲自试一试

Mfano 4

Kufaa mabaki ya "myDIV" ya kawaida ya <p> ya mabaki ya rangi ya mbali:

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

亲自试一试

Mfano 5

Kufaa mabaki ya "myDIV" ya kawaida ya nane (indeksi 3) ya mabaki ya rangi ya mbali:

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

Mwakaambii wa viwanda vya kusoma

Wote wanaongea kwa viwanda vya kusoma wamekubaliana element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Mwakaambii Mwakaambii Mwakaambii Mwakaambii Mwakaambii Mwakaambii