Dokumendiobjekti mudel (DOM) on HTML-dokumendi struktuurne esitus. DOM on sõlmede puu, mille brauser loob iga Interneti-veebi jaoks.

DOM on objektorienteeritud. Igal DOM-i elemendil on oma atribuutide ja meetodite komplekt, millele pääsete juurde JavaScripti abil.

Sellest õpetusartiklist saate teada, kuidas kasutada DOM-i valija funktsioone veebilehe elementidele juurdepääsuks.

Kuidas pääseda juurde DOM-i elementidele

Veebilehe tipptasemel DOM-i elemendile pääsete juurde globaalse dokumendiobjekti kaudu. Näiteks kui teil on järgmine veebileht:

Tere tulemast


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Umbes


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Artiklid



Artikli esimene pealkiri





instagram viewer



 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Loe rohkem 





Artikli teine ​​pealkiri


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Loe rohkem 





Artikli kolmas jaotis


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Loe rohkem 





Artikli neljas pealkiri


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Loe rohkem 

Tippimine dokument brauseri konsoolis ja sisestusklahvi vajutamine annab järgmise väljundi:

Teie konsooli väljund on interaktiivne. Võite klõpsata nupul pea ja keha elemendid nende laiendamiseks. Seda tehes saadakse järgmine väljund:

Iga jaotise element silt on samuti laiendatav. Sõltuvalt veebilehe struktuurist laienevad elemendid pidevalt, et tuua esile rohkem elemente. See peaks andma teile DOM-i struktuurist selgema ülevaate.

Seotud: Veebisaitide varjatud kangelane: DOM-i mõistmine

Dokumendiobjektil on eriline omadus, keha, mis esindab kehaelementi. Seega saate kehaelemendile juurdepääsuks konsooli sisestada järgmise:

dokument.keha

See annab järgmise väljundi:

Kuid see on nii kaugele, kui saate objekti atribuute kasutades minna. Igal lehel on pea ja keha, kuid see on muidu ainulaadne. Nii et trükkimine dokument.keha.jaotis või midagi sarnast lihtsalt ei tööta nii, nagu võiksite. Selle asemel on meetodeid, mille abil saate konkreetsetele elementidele juurde pääseda dokumendiobjektil.

Mis on DOM-i elementide valijad?

DOM-i elementide valijad on JavaScripti meetodite rühm, mida saate kasutada dokumendiobjektil, et pääseda juurde veebilehe elementidele. DOM-i elementide valijatel on kaks kategooriat – ühe- ja mitmevalijad.

Need funktsioonid toimivad sarnaselt CSS-i valijatele. Need võimaldavad teil hankida elemente nende sildi nime või nende ID ja klassi atribuutide põhjal. Saate isegi elemente tuua mis tahes CSS-i valija abil.

Seotud: Veebilehe osa sihtimine CSS-i valijate abil

Üksikute elementide valijad on järgmised:

• getElementById()
• querySelector()

Mitme elemendi valijad on järgmised:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Teie kasutatav DOM-i elemendi valija sõltub elemendist (elementidest), millele proovite juurdepääsu saada.

Ühe DOM-i elemendi valijate kasutamine

Selektoreid näete enamasti JavaScripti rakendustes. Niisiis, eemaldugem konsoolist. Looge JavaScripti fail ja linkige see oma HTML-failiga, kasutades järgmist skriptimärgendit:

Kus src väärtus on teie JavaScripti faili nimi. Asetage see skriptimärgend vahetult enne oma sulgevat kehamärgendit, .

The getElementById() meetod võimaldab juurdepääsu ühele veebilehe elemendile, kasutades selle ID väärtust. Ülaltoodud HTML-dokumendis on mitu ID-ga elementi. Et sihtida div element ID-ga "artikkel-3", saate oma JavaScripti faili lisada järgmise koodi:

väärtus = document.getElementById('artikkel-3')

Nüüd element div koos artikkel-3 ID ja kõik selle vastavad atribuudid on juurdepääsetavad saidilt väärtus muutuv. Saate printida väärtus muutuja konsooli jaoks, kasutades järgmist koodirida:

console.log (väärtus)

Näete div-elemendile määratud klassi nime ja muid olulisi atribuute, näiteks sisemist HTML-i.

Teine üksiku elemendi valija on querySelector(). See funktsioon on mitmekülgsem, kuna saate sellele edastada mis tahes CSS-i valijastringi. Siiski saate seda kasutada ainult ühe elemendi korraga valimiseks.

Näiteks ülaltoodud HTML-paigutuses on üks klass – artiklid. Seda klassi kasutavad neli div elementi, kuid querySelector() funktsioon tagastab ainult esimese elemendi, millel on klass "artiklid".

querySelector() kasutamine klassiga

Lisage skripti lõppu järgmine kood:

väärtus = document.querySelector('.articles')
console.log (väärtus)

See tagastab ainult esimese div element klassiga "artiklid". Pange tähele, et määrate valija samas vormingus kui CSS-i valija. CSS-is määrab alguspunkt klassi nime.

querySelector() kasutamine ID-ga

väärtus = document.querySelector('#artikkel-3')
console.log (väärtus)

See kood tagastab ainsa artikli 3 ID-ga elemendi, kolmanda div element klassiga "artiklid". Jällegi kasutab valijastring standardset CSS-i süntaksit koos a # ID-d täpsustav sümbol.

Mitme DOM-i elemendi valija kasutamine

Ülejäänud valijafunktsioonid toovad elementide rühmi. Nemad on getElementsByTagName(), getElementsByClassName(), ja querySelectorAll().

GetElementsByTagName() kasutamine

The getElementsByTagName() valija toob sama sildinimega elementide rühma. Näiteks kui soovite valida kõik h2 veebilehe elemente, saate kasutada järgmist koodi:

väärtus = document.getElementsByTagName('h2')
console.log (väärtus)

See salvestab kõik h2 elemendid HTML-i kogusse nimega väärtus.

GetElementsByClassName() kasutamine

The getElementsByClassName() selektor tagastab sama klassinimega elementide kogumi.

väärtus = document.getElementsByClassName('artiklid')
console.log (väärtus)

Ülaltoodud koodi sisestamine JavaScripti faili tagastab brauseri konsoolis neli div elementi klassinimega „artiklid”.

querySelectorAll() kasutamine

The querySelectorAll() meetod tagastab sõlmede loendi kõigist antud selektorile vastavatest elementidest. Kõigile ajaveebi jaotise lõiguelementidele juurdepääsuks saate kasutada järgmist koodi:

väärtus = document.querySelectorAll('#blog p')
console.log (väärtus)

Saate stringi lisada isegi mitu valijat, eraldades igaüks neist komaga, nagu CSS-is:

väärtus = document.querySelectorAll('h2, .articles')
console.log (väärtus)

Dünaamiliste veebilehtede loomiseks kasutage DOM-i valijaid

Siinkohal peaks teil olema selge arusaam DOM-ist ja selle toimimisest. Samuti peaksite teadma erinevaid üksik- ja mitmikvalijaid ning nende kasutamist.

Sellegipoolest on HTML-i elementidele juurdepääsu saamine alles esimene samm selles, mida saate DOM-i valijatega teha. DOM-i valijad aitavad teil arendada oma veebisaidi funktsionaalseid aspekte, nagu onclick ja onscroll sündmuste käsitlemine.

Kuidas muuta oma veebisait CSS-i ja JavaScripti abil tundlikuks ja interaktiivseks

Olete oma veebisaidi seadistanud HTML-i ja CSS-iga, kuid nüüd peate lisama loogika. Siin on, mida teha.

Loe edasi

Autori kohta