JavaScript HTML DOM elementti

Tämä luku selittää, miten voit etsiä ja tarkastella HTML-sivulla olevia HTML-elementtejä.

Etsi HTML-elementtejä

Yleensä JavaScriptissä sinun täytyy käsitellä HTML-elementtejä.

Tavoitteen saavuttamiseksi sinun on ensin löydettävä nämä elementit. On olemassa useita tapoja tehdä tämä tehtävä:

  • Etsi HTML-elementtejä id:n avulla
  • Etsi HTML-elementtejä tagin avulla
  • Etsi HTML-elementtejä luokan avulla
  • Etsi HTML-elementtejä CSS-valitsimen avulla
  • Etsi HTML-elementtejä HTML-objektikokoelman avulla

Etsi HTML-elementtejä id:n avulla

DOM:n HTML-elementtien etsiminen on yleensä yksinkertaisinta tehdä elementin id:n avulla.

Tämä esimerkki etsii id="intro" -elementtiä:

Esimerkki

var myElement = document.getElementById("intro");

Kokeile itse

Jos elementti löytyy, tämä metodi palauttaa elementin objektina (myElementissä).

Jos elementtiä ei löydy, myElement sisältää null.

Etsi HTML-elementtejä tagin avulla

Tämä esimerkki etsii kaikkia <p> Elementti:

Esimerkki

var x = document.getElementsByTagName("p");

Kokeile itse

Tämä esimerkki etsii id="main" -elementtiä, sitten etsii "main" -elementissä kaikkia <p> Elementti:

Esimerkki

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Kokeile itse

Etsi HTML-elementtejä luokan avulla

Jos tarvitset löytää kaikki samalla luokalla varustetut HTML-elementit, käytä getElementsByClassName().

Tämä esimerkki palauttaa kaikkien class="intro" -luokan elementtien luettelon:

Esimerkki

var x = document.getElementsByClassName("intro");

Kokeile itse

Etsi HTML-elementtejä luokan avulla ei ole tuettu Internet Explorer 8:n ja aikaisempien versioiden kanssa.

Etsi HTML-elementtejä CSS-valitsimen avulla

Jos tarvitset löytää kaikki CSS-valitsimen (id, luokka, tyyppi, ominaisuus, ominaisuuden arvo jne.) mukaiset HTML-elementit, käytä querySelectorAll() Metodit.

Tämä esimerkki palauttaa kaikki class="intro" -luokan elementit: <p> Elementtilista:

Esimerkki

var x = document.querySelectorAll("p.intro");

Kokeile itse

querySelectorAll() Ei tuettu Internet Explorer 8:n ja aikaisempien versioiden kanssa.

Etsi HTML-objektia HTML-objektipaikallisella valitsimella

Tämä esimerkki etsii id="frm1" form-elementin, forms-kokoelmasta ja näyttää kaikki elementtien arvot:

Esimerkki

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Kokeile itse

Seuraavat HTML-objektit (ja objektikokoelmat) ovat myös saatavilla: