Dokumenta objekta modelis (DOM) ir HTML dokumenta strukturāls attēlojums. DOM ir mezglu koks, ko pārlūkprogramma izveido katrai tīmekļa lapai internetā.

DOM ir objektorientēts. Katram DOM elementam ir sava atribūtu un metožu kopa, kurai varat piekļūt, izmantojot JavaScript.

Šajā apmācības rakstā jūs uzzināsit, kā izmantot DOM atlasītāja funkcijas, lai piekļūtu tīmekļa lapas elementiem.

Kā piekļūt DOM elementiem

Tīmekļa lapas augstākā līmeņa DOM elementam var piekļūt, izmantojot globālā dokumenta objektu. Piemēram, ja jums ir šāda tīmekļa lapa:

Laipni lūdzam


 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.




Par


 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.




Raksti



panta pirmā virsraksts





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.


 Lasīt vairāk 





panta otrā sadaļa


 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.


 Lasīt vairāk 





panta trešā sadaļa


 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.


 Lasīt vairāk 





Panta ceturtā sadaļa


 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.


 Lasīt vairāk 

Rakstīt dokumentu pārlūkprogrammas konsolē un nospiežot taustiņu Enter, tiks parādīta šāda izvade:

Jūsu konsoles izvade ir interaktīva. Jūs varat noklikšķināt uz galvu un ķermenis elementi, lai tos paplašinātu. To darot, tiks iegūta šāda izvade:

Katrs sadaļas elements tags ir arī paplašināms. Atkarībā no tīmekļa lapas struktūras elementi turpinās paplašināties, lai atklātu vairāk elementu. Tam vajadzētu sniegt jums skaidrāku izpratni par DOM struktūru.

Saistīts: Vietņu slēptais varonis: DOM izpratne

Dokumenta objektam ir īpaša īpašība, ķermenis, kas pārstāv ķermeņa elementu. Tātad, lai piekļūtu ķermeņa elementam, konsolē varat ierakstīt:

dokuments.body

Tas radīs šādu izvadi:

Bet tas ir tik tālu, cik varat iet, izmantojot objekta īpašības. Katrai lapai ir galva un korpuss, bet citādi tā ir unikāla. Tātad rakstīt dokuments.body.sadaļa vai kaut kas līdzīgs vienkārši nedarbosies tā, kā jūs varētu vēlēties. Tā vietā ir metodes, kuras varat izsaukt dokumenta objektam, lai piekļūtu konkrētiem elementiem.

Kas ir DOM elementu atlasītāji?

DOM elementu atlasītāji ir JavaScript metožu grupa, ko varat izmantot dokumenta objektā, lai piekļūtu elementiem tīmekļa lapā. DOM elementu atlasītājiem ir divas kategorijas — viens un vairāki atlasītāji.

Šīs funkcijas darbojas līdzīgi kā CSS atlasītāji. Tie ļauj izgūt elementus, pamatojoties uz to taga nosaukumu vai to ID un klases atribūtiem. Jūs pat varat ienest elementus, izmantojot jebkuru CSS atlasītāju.

Saistīts: Kā atlasīt Web lapas daļu, izmantojot CSS atlasītājus

Viena elementa atlasītāji ir:

• getElementById()
• querySelector()

Vairāku elementu atlasītāji ir:

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

Jūsu izmantotais DOM elementa atlasītājs būs atkarīgs no elementa(-iem), kuram(-iem) mēģināt piekļūt.

Viena DOM elementa atlasītāju izmantošana

Atlasītājus galvenokārt redzēsit JavaScript lietojumprogrammās. Tātad, attālināsimies no konsoles. Izveidojiet JavaScript failu un saistiet to ar savu HTML failu, izmantojot šādu skripta tagu:

Kur src vērtība ir jūsu JavaScript faila nosaukums. Ievietojiet šo skripta tagu tieši pirms beigu body taga, .

The getElementById() metode nodrošina piekļuvi vienam tīmekļa lapas elementam, izmantojot tā ID vērtību. Iepriekš minētajā HTML dokumentā ir vairāki elementi ar ID. Lai mērķētu uz div elementu ar “article-3” ID varat pievienot savam JavaScript failam šādu kodu:

vērtība = document.getElementById('article-3')

Tagad div elements ar pants-3 ID un visi tam atbilstošie rekvizīti ir pieejami no vērtību mainīgs. Jūs varat izdrukāt vērtību mainīgais konsolei, izmantojot šādu koda rindu:

console.log (vērtība)

Jūs redzēsit klases nosaukumu, kas piešķirts elementam div, kā arī citus svarīgus atribūtus, piemēram, iekšējo HTML.

Otrs viena elementa atlasītājs ir querySelector(). Šī funkcija ir daudzpusīgāka, jo varat tai nodot jebkuru CSS atlasītāja virkni. Tomēr joprojām varat to izmantot, lai atlasītu vienu elementu vienlaikus.

Piemēram, iepriekš minētajā HTML izkārtojumā ir viena klase — raksti. Šo klasi izmanto četri div elementi, bet querySelector() funkcija atgriezīs tikai pirmo elementu, kuram ir klase "raksti".

Izmantojot querySelector() ar klasi

Pievienojiet skripta beigās šādu kodu:

vērtība = document.querySelector('.articles')
console.log (vērtība)

Tas atgriezīs tikai pirmo div elements ar “rakstu” klasi. Ņemiet vērā, ka jūs norādāt atlasītāju tādā pašā formātā kā CSS atlasītājs. CSS ievades punkts norāda klases nosaukumu.

Izmantojot querySelector() ar ID

vērtība = document.querySelector('#article-3')
console.log (vērtība)

Šis kods atgriezīs vienīgo elementu ar “article-3” ID, trešo div elements ar “rakstu” klasi. Atkal atlasītāja virkne izmanto standarta CSS sintaksi ar a # simbols, kas norāda ID.

Vairāku DOM elementu atlasītāju izmantošana

Pārējās atlasītāja funkcijas izgūst elementu grupas. Viņi ir getElementsByTagName(), getElementsByClassName(), un querySelectorAll().

GetElementsByTagName() izmantošana

The getElementsByTagName() atlasītājs ienes elementu grupu ar tādu pašu taga nosaukumu. Piemēram, ja vēlaties atlasīt visus h2 tīmekļa lapas elementiem, varat izmantot šādu kodu:

vērtība = document.getElementsByTagName('h2')
console.log (vērtība)

Tas saglabā visus h2 elementus HTML kolekcijā, ko sauc par vērtību.

Izmantojot getElementsByClassName()

The getElementsByClassName() selektors atgriež elementu kolekciju ar tādu pašu klases nosaukumu.

vērtība = document.getElementsByClassName('raksti')
console.log (vērtība)

Ievietojot iepriekš minēto kodu JavaScript failā, pārlūkprogrammas konsolē tiks atgriezti četri div elementi ar klases nosaukumu “articles”.

Izmantojot querySelectorAll()

The querySelectorAll() metode atgriež mezglu sarakstu ar visiem elementiem, kas atbilst dotajam atlasītājam. Lai piekļūtu visiem rindkopas elementiem emuāra sadaļā, varat izmantot šādu kodu:

vērtība = document.querySelectorAll('#blog p')
console.log (vērtība)

Virknē varat pat iekļaut vairākus atlasītājus, katru atdalot ar komatu, tāpat kā CSS:

vērtība = document.querySelectorAll('h2, .articles')
console.log (vērtība)

Izmantojiet DOM atlasītājus, lai izveidotu dinamiskas tīmekļa lapas

Šajā brīdī jums ir jābūt skaidrai izpratnei par DOM un tā darbību. Jums vajadzētu zināt arī dažādus vienu un vairākus atlasītājus, kā arī to lietošanu.

Tomēr piekļuves iegūšana HTML elementiem ir tikai pirmais solis tajā, ko varat darīt ar DOM atlasītājiem. DOM atlasītāji palīdzēs jums attīstīt vietnes funkcionālos aspektus, piemēram, onclick un onscroll notikumu apstrādi.

Kā padarīt savu vietni atsaucīgu un interaktīvu, izmantojot CSS un JavaScript

Jūs esat iestatījis savu vietni, izmantojot HTML un CSS, taču tagad jums ir jāpievieno loģika. Lūk, kā rīkoties.

Lasiet Tālāk

Par autoru