JavaScript HTML DOM Elemente
Hierdie bladsy leer jou hoe om HTML-elemente in 'n HTML-bladsy te vind en toegang te verkry.
Vind HTML-elemente
Dikwels, met JavaScript, wil jy HTML-elemente manipuleer.
Om dit te doen, moet jy eers die elemente vind. Daar is verskeie maniere om dit te doen:
- Vind HTML-elemente volgens id
- Soek HTML-elemente volgens merkernaam
- Soek HTML-elemente volgens klasnaam
- Vind HTML-elemente deur CSS-keurders
- Soek HTML-elemente deur HTML-objekversamelings
Vind HTML-element volgens ID
Die maklikste manier om 'n HTML-element in die DOM te vind, is deur die element-ID te gebruik.
Hierdie voorbeeld vind die element met id="intro"
:
Voorbeeld
const element = document.getElementById("intro");
As die element gevind word, sal die metode die element as 'n voorwerp (in element) terugstuur.
As die element nie gevind word nie, sal element bevat null
.
Soek HTML-elemente volgens merkernaam
Hierdie voorbeeld vind alle <p>
elemente:
Voorbeeld
const element = document.getElementsByTagName("p");
Hierdie voorbeeld vind die element met id="main"
, en vind dan alle <p>
elemente binne "main"
:
Voorbeeld
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Vind HTML-elemente volgens klasnaam
As jy alle HTML-elemente met dieselfde klasnaam wil vind, gebruik
getElementsByClassName()
.
Hierdie voorbeeld gee 'n lys van alle elemente met class="intro"
.
Voorbeeld
const x = document.getElementsByClassName("intro");
Vind HTML-elemente deur CSS-keurders
As jy alle HTML-elemente wil vind wat by 'n gespesifiseerde CSS-kieser pas (ID, klasname, tipes, eienskappe, waardes van eienskappe, ens.), gebruik die querySelectorAll()
metode.
Hierdie voorbeeld gee 'n lys van alle <p>
elemente met class="intro"
.
Voorbeeld
const x = document.querySelectorAll("p.intro");
Soek HTML-elemente deur HTML-objekversamelings
Hierdie voorbeeld vind die vormelement met id="frm1"
, in die vormversameling, en vertoon alle elementwaardes:
Voorbeeld
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Die volgende HTML-voorwerpe (en voorwerpversamelings) is ook toeganklik: