Document Object Model (DOM) er den strukturelle representasjonen av et HTML-dokument. DOM er et tre med noder som nettleseren lager for hver nettside på internett.

DOM er objektorientert. Hvert element i DOM har sitt eget sett med attributter og metoder som du kan få tilgang til ved hjelp av JavaScript.

I denne opplæringsartikkelen lærer du hvordan du bruker DOM-velgerfunksjoner for å få tilgang til elementer på en nettside.

Hvordan få tilgang til DOM-elementer

Du kan få tilgang til DOM-elementet på øverste nivå på en nettside via det globale dokumentobjektet. For eksempel, hvis du har en nettside som følgende:

Velkommen


 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.




Om


 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.







instagram viewer



Artikler



Artikkel tittel én


 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.


 Les mer 





Artikkel tittel to


 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.


 Les mer 





Artikkel tittel tre


 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.


 Les mer 





Artikkel tittel fire


 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.


 Les mer 

Skriving dokument i nettleserkonsollen og trykk enter vil produsere følgende utgang:

Utgangen i konsollen din er interaktiv. Du kan klikke på hode og kropp elementer for å utvide dem. Å gjøre det vil produsere følgende utgang:

Hvert seksjonselement i taggen kan også utvides. Avhengig av strukturen til en nettside, vil elementene fortsette å utvide seg for å avsløre flere elementer. Dette bør gi deg en klarere forståelse av DOMs struktur.

I slekt: The Hidden Hero of Websites: Forstå DOM

Dokumentobjektet har en spesiell egenskap, kropp, som representerer kroppselementet. Så for å få tilgang til body-elementet kan du skrive inn følgende i konsollen:

document.body

Dette vil produsere følgende utgang:

Men dette er så langt du kan gå ved å bruke objektegenskaper. Hver side har et hode og en kropp, men er ellers unik. Så skriver dokument.kroppsdel eller noe lignende vil rett og slett ikke fungere som du kanskje vil. I stedet finnes det metoder som du kan kalle på dokumentobjektet for å få tilgang til bestemte elementer.

Hva er DOM-elementvelgere?

DOM-elementvelgere er en gruppe JavaScript-metoder som du kan bruke på dokumentobjektet for å få tilgang til elementer på en nettside. DOM-elementvelgere har to kategorier – én og flere velgere.

Disse funksjonene fungerer på samme måte som CSS-velgere. De lar deg hente elementer basert på deres kodenavn, eller deres id og klasseattributter. Du kan til og med hente elementer ved å bruke en hvilken som helst CSS-velger.

I slekt: Hvordan målrette en del av en webside ved hjelp av CSS-velgere

Enkeltelementvelgerne er:

• getElementById()
• querySelector()

De flere elementvelgerne er:

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

DOM-elementvelgeren du bruker vil avhenge av elementet/elementene du prøver å få tilgang til.

Bruk av enkle DOM-elementvelgere

Du vil stort sett se velgere i JavaScript-applikasjoner. Så la oss gå bort fra konsollen. Opprett en JavaScript-fil og koble den til HTML-filen din ved å bruke følgende skripttag:

Hvor src-verdien er navnet på JavaScript-filen. Plasser denne skript-taggen rett før den avsluttende body-taggen, .

De getElementById() metoden gir tilgang til et enkelt element på en nettside ved å bruke verdien av dens ID. I HTML-dokumentet ovenfor er det flere elementer med IDer. Å målrette mot div element med "artikkel-3" ID kan du legge til følgende kode i JavaScript-filen din:

verdi = document.getElementById('artikkel-3')

Nå er div-elementet med artikkel-3 ID og alle tilhørende egenskaper er tilgjengelige fra verdi variabel. Du kan skrive ut verdi variabel til konsollen ved å bruke følgende kodelinje:

console.log (verdi)

Du vil se klassenavnet som er tilordnet div-elementet, samt andre viktige attributter, for eksempel den indre HTML-en.

Den andre enkeltelementvelgeren er querySelector(). Denne funksjonen er mer allsidig, siden du kan sende den til hvilken som helst CSS-velgerstreng. Du kan imidlertid fortsatt bare bruke den til å velge ett element om gangen.

For eksempel er det en enkelt klasse i HTML-oppsettet ovenfor – artikler. Fire div-elementer bruker denne klassen, men querySelector() funksjon vil bare returnere det første elementet som har klassen "artikler".

Bruke querySelector() med en klasse

Legg til følgende kode på slutten av skriptet:

verdi = document.querySelector('.articles')
console.log (verdi)

Dette vil bare returnere den første div element med en "artikler"-klasse. Legg merke til at du spesifiserer velgeren i samme format som en CSS-velger. I CSS spesifiserer en ledende periode et klassenavn.

Bruker querySelector() med en ID

verdi = document.querySelector('#article-3')
console.log (verdi)

Denne koden vil returnere det eneste elementet med en "artikkel-3" ID, det tredje div element med en "artikler"-klasse. Igjen bruker velgerstrengen standard CSS-syntaks, med en # symbol som spesifiserer en ID.

Bruke flere DOM-elementvelgere

De resterende velgerfunksjonene henter grupper av elementer. De er getElementsByTagName(), getElementsByClassName(), og querySelectorAll().

Bruke getElementsByTagName()

De getElementsByTagName() selector henter en gruppe elementer med samme kodenavn. For eksempel, hvis du vil velge alle h2 elementer på en nettside, kan du bruke følgende kode:

verdi = document.getElementsByTagName('h2')
console.log (verdi)

Dette lagrer alle h2-elementene i en HTML-samling kalt verdi.

Bruke getElementsByClassName()

De getElementsByClassName() selector returnerer en samling av elementer med samme klassenavn.

verdi = document.getElementsByClassName('artikler')
console.log (verdi)

Hvis du setter inn koden ovenfor i JavaScript-filen din, returneres de fire div-elementene med klassenavnet "artikler" i nettleserkonsollen.

Bruker querySelectorAll()

De querySelectorAll() metoden returnerer en nodeliste over alle elementer som samsvarer med den gitte velgeren. For å få tilgang til alle avsnittselementer i bloggdelen, kan du bruke følgende kode:

verdi = document.querySelectorAll('#blogg p')
console.log (verdi)

Du kan til og med inkludere flere velgere i strengen, og skille hver med et komma, akkurat som i CSS:

verdi = document.querySelectorAll('h2, .articles')
console.log (verdi)

Bruk DOM-velgere til å lage dynamiske nettsider

På dette tidspunktet bør du ha en klar forståelse av DOM og hvordan det fungerer. Du bør også kjenne til de forskjellige enkelt- og flervelgerne, samt hvordan du bruker dem.

Likevel er det å få tilgang til HTML-elementer bare det første trinnet i hva du kan gjøre med DOM-velgere. DOM-velgere vil hjelpe deg med å utvikle de funksjonelle aspektene ved nettstedet ditt, for eksempel håndtering av onclick- og onscroll-hendelser.

Hvordan gjøre nettstedet ditt responsivt og interaktivt med CSS og JavaScript

Du har satt opp nettstedet ditt med HTML og CSS, men nå må du legge til logikk. Her er hva du skal gjøre.

Les Neste

Om forfatteren