HTML DOM Element getElementsByTagName() -menetelmä

Määritelmä ja käyttötapa

getElementsByTagName() Menetelmä palauttaa elementin kaikki määritellyn nimellä olevat alisijat NodeList-objektina.

Vinkki:Parametria "*" Palauttaa elementin kaikki alisijat.

Katso myös:

getElementsByClassName() -menetelmä

querySelector() -menetelmä

querySelectorAll() -menetelmä

NodeList

NodeList On taulukon kaltaisia solukokoelmia (listaa).

Voit käyttää indeksiä (alaviivaa) tavoittaaksesi listan soluja. Indeksointi alkaa 0:sta.

length-ominaisuusPalauttaa listan solujen määrän.

Esimerkki

Esimerkki 1

Muuta listan ensimmäisen <li>-elementin HTML-sisältöä:

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

Kokeile itse

Esimerkki 2

"myDIV"-elementin <p>-elementtien määrä:

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

Kokeile itse

Esimerkki 3

Muuta "myDIV"-elementin toisen <p>-elementin fonttikokoa:

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

Kokeile itse

Esimerkki 4

Muuta "myDIV"-elementin kaikkien <p>-elementtien taustaväriä:

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

Kokeile itse

Esimerkki 5

Muuta "myDIV"-elementin neljännen elementin (indeksi 3) taustaväriä:

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

Kokeile itse

Esimerkki 6

Muuta "*"-parametrin avulla "myDIV"-elementin kaikkien elementtien taustaväri:

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

Kokeile itse

Syntaksi

element.getElementsByTagName(tagname)

Parametri

Parametri Kuvaus
tagname Välttämätön. Lapsen elementin tagin nimi.

Palautusarvo

Tyyppi Kuvaus
NodeList

Määritellyn merkinnän omaisten elementtien lapsenodot.

Elementit järjestetään niiden ilmestymisjärjestyksen mukaan lähdekoodissa.

Tekninen yksityiskohta

getElementsByTagName() Menetelmä käy läpi määritellyn elementin lapsinodot, palauttaa Element-nodot sisältävän taulukon (tämä on NodeList-objekti), jotka edustavat kaikkia määritellyllä nimellä varustettuja dokumenttietelementtejä. Elementtien järjestys taulukossa on sama kuin ne ilmestyvät dokumentin lähdekoodissa.

Huomaa

Document-rajapintamyös määrittää getElementsByTagName() -menetelmä, se on samanlaista kuin tämä menetelmä, mutta se käy läpi koko dokumentin, ei vain jossakin elementin lapsinodot.

Älä sekoita tätä menetelmää HTMLDocument.getElementsByName() -menetelmä Sekoitetaan, jälkimmäinen perustuu elementin name-ominaisuuden arvoon elementin hakemiseen, ei niiden tagin nimeen.

Selaimen tuki

Kaikki selaimet tukevat element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki Tuki