Metodo ng getElementsByTagName() ng HTML DOM Element

Paglilinaw at paggamit

getElementsByTagName() Ang meto ay ibabalik ang koleksyon ng mga anak ng elemento na may tinukoy na tag na bilang NodeList object.

Mga payo:Halaga ng argumento "*" Ibabalik ang lahat ng mga anak ng elemento.

Bilang karagdagan:

Metodo ng getElementsByClassName()

Metodo ng querySelector()

Metodo ng querySelectorAll()

NodeList

NodeList Ito ay katulad ng array na koleksyon ng mga node (listahan).

Maaari mong abutin ang mga node sa listahan sa pamamagitan ng index (index). Ang index ay magsimula sa 0.

Atribute ng lengthIbabalik ang bilang ng mga node sa listahan.

Mga halimbawa

Egemplo 1

Iyong gawain ang magbago ng HTML nilang nilalaman ng unang <li> elemento sa listahan:

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

Subukan ang iyong sarili

Egemplo 2

Ang bilang ng <p> elemento sa "myDIV":

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

Subukan ang iyong sarili

Egemplo 3

Iyong gawain ang magbago ng sukat ng font ng ikalawang <p> elemento sa "myDIV":

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

Subukan ang iyong sarili

Egemplo 4

Iyong gawain ang magbago ng kulay ng bakasyon ng lahat ng <p> elemento sa "myDIV":

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

Subukan ang iyong sarili

Egemplo 5

Iyong gawain ang magbago ng kulay ng bakasyon ng pang-apat na elemento (index 3) sa "myDIV":

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

Subukan ang iyong sarili

Halimbawa 6

Gumamit ng "*" parameter, baguhin ang kulay ng background ng lahat ng elemento sa "myDIV":

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

Subukan ang iyong sarili

Grammar

element.getElementsByTagName(tagname)

Parameter

Parameter Paglalarawan
tagname Mahalagang kailangan. Ang pangalang tag ng anak.

Halimbawa ng pagbabalik

Uri Paglalarawan
NodeList

Anak ng elemento na may tinukoy na marka.

Ang mga elemento ay naisasailalim sa pagkakasunod-sunod ayon sa kanilang pagkakaroon sa pinagmulang kodigo.

Teknikal na Detalye

getElementsByTagName() Ang pamamaraan ay magsasalamin sa mga anak na pugad ng tinukoy na elemento, at ibabalik ang isang array ng Element node (sa katunayan ay NodeList object) na naglalaman ng lahat ng dokumentong elemento na may tinukoy na pangalang tag. Ang pagkakaroon ng elemento sa array ay katumbas ng kanilang pagkakaroon sa pinagmulang kodigo ng dokumento.

Mabuti sabihin

Document Interfaceay nakadefinir din getElementsByTagName() Methodna katulad nito, ngunit naglalakbay sa buong dokumento, hindi lamang sa mga anak na pugad ng isang elemento.

Huwag ipagkakasundo ang pamamaraan na ito sa HTMLDocument.getElementsByName() Method Maaaring magkasundo, ngunit ang huli ay nakabase sa halaga ng name attribute ng elemento, hindi sa pangalang tag ng elemento.

Suporta ng Browser

Lahat ng mga browser ay sumusuporta element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporta Suporta Suporta Suporta Suporta Suporta