Wat is die HTML DOM?
Die HTML DOM is 'n objekmodel vir HTML . Dit definieer:
- HTML-elemente as voorwerpe
- Eienskappe vir alle HTML-elemente
- Metodes vir alle HTML-elemente
- Gebeurtenisse vir alle HTML-elemente
Die HTML DOM is 'n API (Programmering Interface) vir JavaScript :
- JavaScript kan HTML-elemente byvoeg/verander/verwyder
- JavaScript kan HTML-kenmerke byvoeg/verander/verwyder
- JavaScript kan CSS-style byvoeg/verander/verwyder
- JavaScript kan reageer op HTML-gebeurtenisse
- JavaScript kan HTML-gebeurtenisse byvoeg/verander/verwyder
Die HTML DOM (Document Object Model)
Wanneer 'n webblad gelaai is, skep die blaaier ' n dokumentobjekmodel van die bladsy .
Die HTML DOM -model is saamgestel as 'n boom van voorwerpe :
Die HTML DOM-boom van objekte
Vind HTML-elemente
As jy toegang tot HTML-elemente met JavaScript wil kry, moet jy eers die elemente vind.
Daar is 'n paar 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
var myElement = document.getElementById("intro");
As die element gevind word, sal die metode die element as 'n voorwerp (in myElement) terugstuur.
As die element nie gevind word nie, sal myElement null bevat.
Soek HTML-elemente volgens merkernaam
Hierdie voorbeeld vind alle <p> elemente:
Voorbeeld
var x = document.getElementsByTagName("p");
Hierdie voorbeeld vind die element met id="main", en vind dan alle <p> elemente binne "main":
Voorbeeld
var x = document.getElementById("main");
var 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
var x = document.getElementsByClassName("intro");
Om elemente volgens klasnaam te vind, werk nie in Internet Explorer 8 en vroeër weergawes nie.
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
var x = document.querySelectorAll("p.intro");
Die querySelectorAll() metode werk nie in Internet Explorer 8 en vroeër weergawes nie.
Soek HTML-elemente deur HTML-objekversamelings
HTML-voorwerpversamelings is ook toeganklik:
HTML DOM Tutoriaal
Volledige HTMLDOM-tutoriaal
Dit was 'n kort inleiding tot HTMLDOM.
Vir 'n volledige HTMLDOM-tutoriaal gaan na W3Schools HTMLDOM-tutoriaal .