HTML DOM Element getElementsByTagName() 方法

ການກໍານົດ ແລະ ການນໍາໃຊ້

getElementsByTagName() ກົນລະບົບ ການຫຼົງຄະແນນຂອງສະຖານະຕົວທີ່ມີຊື່ແບບກົງກັນກັບປະເພດຕົວຈົນສະຖານະຕົວພາຍໃນຂອງລາຍການ, ກັບ NodeList ເປັນອຳນາດ.

ຄຳແນະນຳ:ຄູ່ມູນຄ່າ "*" ການຫຼົງຄະແນນຂອງສະຖານະຕົວທັງໝົດຂອງສະຖານະ:

ບໍ່ບໍ່ບຸກຄົນບຸກຄົນ:

getElementsByClassName() 方法

querySelector() 方法

querySelectorAll() 方法

NodeList

NodeList ເປັນສະຖານະຕົວຊົງທີ່ຄ້າຍຄືກັບລາຍການ (array).

ທ່ານສາມາດເຂົ້າເຖິງຂອງລາຍການດ້ວຍດັດສະນະ (index). ດັດສະນະເລີ່ມຈາກ 0:

length 属性ການຫຼົງຄະແນນຂອງລາຍການ:

ຄວາມນັບບັນຫາ

ຄວາມນັບບັນຫາ 1

ປ່ຽນຂັບເພີ່ມ HTML ໃນສະຖານະຕົວຄົນທີ 1 <li> ໃນລາຍການ:

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

Try it yourself

ຄວາມນັບບັນຫາ 2

ຈຳນວນ <p> ໃນ "myDIV":

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

Try it yourself

ຄວາມນັບບັນຫາ 3

ປ່ຽນຂະໜາດຕາມມູນຄ່າ "myDIV" ເປັນ <p> ຄົນທີ 2:

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

Try it yourself

ຄວາມນັບບັນຫາ 4

ປ່ຽນສີທີ່ຫຼິ້ນຫຼັງ ທຸກ <p> ໃນ "myDIV":

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

Try it yourself

ຄວາມນັບບັນຫາ 5

ປ່ຽນສີທີ່ຫຼິ້ນຫຼັງ "myDIV" ເປັນສະຖານະຕົວຄົນທີ 4 (ດັດສະນະ 3):

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Try it yourself

Example 6

Use the "*" parameter to change the background color of all elements in "myDIV":

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

Try it yourself

Syntax

element.getElementsByTagName(tagname)

Parameter

Parameter Description
tagname Required. The tag name of the child element.

Return Value

Type Description
NodeList

Child elements of an element with a given tag name.

Elements are sorted in the order they appear in the source code.

Technical Details

getElementsByTagName() The method will traverse the descendants of the specified element, and return an array containing Element nodes (which is actually a NodeList object), representing all document elements with the specified tag name. The order of elements in the returned array is the order in which they appear in the document source code.

Note

Document interfacealso defines getElementsByTagName() method, it is similar to this method, but it traverses the entire document, not the descendants of an element.

Do not confuse this method with HTMLDocument.getElementsByName() method Be confused, the latter is based on the name attribute value of the element to search for the element, not based on their tag name.

Browser Support

All browsers support element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support