Document Object Model (DOM) er den strukturelle repræsentation af et HTML-dokument. DOM er et træ af noder, som browseren opretter for hver webside på internettet.

DOM er objektorienteret. Hvert element i DOM har sit eget sæt attributter og metoder, som du kan få adgang til ved hjælp af JavaScript.

I denne selvstudieartikel lærer du, hvordan du bruger DOM-vælgerfunktioner til at få adgang til elementer på en webside.

Sådan får du adgang til DOM-elementer

Du kan få adgang til DOM-elementet på øverste niveau på en webside via det globale dokumentobjekt. For eksempel, hvis du har en webside 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



Artikel Titel 1


 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.


 Læs mere 





Artikel 2. afsnit


 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.


 Læs mere 





Artikel Titel 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.


 Læs mere 





Artikel 4. titel


 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.


 Læs mere 

Skrivning dokument i din browserkonsol og tryk på Enter vil producere følgende output:

Outputtet i din konsol er interaktivt. Du kan klikke på hoved og legeme elementer for at udvide dem. Hvis du gør det, produceres følgende output:

Hvert sektionselement i tag kan også udvides. Afhængigt af strukturen på en webside, vil elementerne blive ved med at udvide sig for at afsløre flere elementer. Dette skulle give dig en klarere forståelse af DOM's struktur.

Relaterede: The Hidden Hero of Websites: Understanding the DOM

Dokumentobjektet har en særlig egenskab, legeme, der repræsenterer kropselementet. Så for at få adgang til kropselementet kan du skrive følgende i konsollen:

document.body

Dette vil producere følgende output:

Men det er så langt, du kan gå ved at bruge objektegenskaber. Hver side har et hoved og en krop, men er ellers unik. Altså at skrive dokument.legeme.afsnit eller noget lignende vil simpelthen ikke fungere, som du kunne tænke dig. I stedet er der metoder, som du kan kalde på dokumentobjektet for at få adgang til bestemte elementer.

Hvad er DOM-elementvælgere?

DOM-elementvælgere er en gruppe JavaScript-metoder, som du kan bruge på dokumentobjektet til at få adgang til elementer på en webside. DOM-elementvælgere har to kategorier – enkelt- og flere vælgere.

Disse funktioner fungerer på samme måde som CSS-vælgere. De giver dig mulighed for at hente elementer baseret på deres tagnavn eller deres id og klasseattributter. Du kan endda hente elementer ved hjælp af en hvilken som helst CSS-vælger.

Relaterede: Sådan målretter du mod en del af en webside ved hjælp af CSS-vælgere

Enkeltelementvælgerne er:

• getElementById()
• querySelector()

De flere elementvælgere er:

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

Den DOM-elementvælger, du bruger, afhænger af det eller de elementer, du forsøger at få adgang til.

Brug af enkelte DOM-elementvælgere

Du vil for det meste se vælgere i JavaScript-applikationer. Så lad os bevæge os væk fra konsollen. Opret en JavaScript-fil, og link den til din HTML-fil ved hjælp af følgende script-tag:

Hvor src-værdien er navnet på din JavaScript-fil. Placer dette script-tag lige før dit afsluttende body-tag, .

Det getElementById() metode giver adgang til et enkelt element på en webside ved hjælp af værdien af ​​dens id. I HTML-dokumentet ovenfor er der flere elementer med ID'er. At målrette mod div element med "article-3" ID'et kan du tilføje følgende kode til din JavaScript-fil:

værdi = document.getElementById('article-3')

Nu er div-elementet med artikel-3 ID og alle dets tilsvarende egenskaber er tilgængelige fra værdi variabel. Du kan udskrive værdi variabel til konsollen ved hjælp af følgende kodelinje:

console.log (værdi)

Du vil se klassenavnet, der er tildelt div-elementet, samt andre vigtige attributter, såsom den indre HTML.

Den anden enkeltelementvælger er querySelector(). Denne funktion er mere alsidig, da du kan sende den til enhver CSS-vælgerstreng. Du kan dog stadig kun bruge det til at vælge ét element ad gangen.

For eksempel er der en enkelt klasse i HTML-layoutet ovenfor - artikler. Fire div-elementer bruger denne klasse, men querySelector() funktion vil kun returnere det første element, der har klassen "artikler".

Brug af querySelector() med en klasse

Tilføj følgende kode i slutningen af ​​dit script:

værdi = document.querySelector('.articles')
console.log (værdi)

Dette vil kun returnere den første div element med en "artikler"-klasse. Bemærk, at du angiver vælgeren i samme format som en CSS-vælger. I CSS angiver en ledende periode et klassenavn.

Brug af querySelector() med et ID

værdi = document.querySelector('#article-3')
console.log (værdi)

Denne kode vil returnere det eneste element med et "artikel-3" ID, det tredje div element med en "artikler"-klasse. Igen bruger vælgerstrengen standard CSS-syntaks med en # symbol, der angiver et ID.

Brug af flere DOM-elementvælgere

De resterende vælgerfunktioner henter grupper af elementer. De er getElementsByTagName(), getElementsByClassName(), og querySelectorAll().

Brug af getElementsByTagName()

Det getElementsByTagName() selector henter en gruppe elementer med det samme tagnavn. For eksempel, hvis du vil vælge alle h2 elementer på en webside, kan du bruge følgende kode:

værdi = document.getElementsByTagName('h2')
console.log (værdi)

Dette gemmer alle h2-elementerne i en HTML-samling kaldet værdi.

Brug af getElementsByClassName()

Det getElementsByClassName() selector returnerer en samling af elementer med det samme klassenavn.

værdi = document.getElementsByClassName('artikler')
console.log (værdi)

Hvis du indsætter koden ovenfor i din JavaScript-fil, returneres de fire div-elementer med klassenavnet "artikler" i browserkonsollen.

Brug af querySelectorAll()

Det querySelectorAll() metode returnerer en nodeliste over alle elementer, der matcher den givne vælger. For at få adgang til alle afsnitselementer i blogsektionen kan du bruge følgende kode:

værdi = document.querySelectorAll('#blog p')
console.log (værdi)

Du kan endda inkludere flere vælgere i strengen, der adskiller hver med et komma, ligesom i CSS:

værdi = document.querySelectorAll('h2, .articles')
console.log (værdi)

Brug DOM-vælgere til at lave dynamiske websider

På dette tidspunkt bør du have en klar forståelse af DOM og hvordan det fungerer. Du bør også kende de forskellige enkelt- og multiple vælgere, samt hvordan du bruger dem.

Stadig, at få adgang til HTML-elementer er kun det første skridt i, hvad du kan gøre med DOM-vælgere. DOM-vælgere vil hjælpe dig langt med at udvikle de funktionelle aspekter af dit websted, såsom håndtering af onclick- og onscroll-begivenheder.

Sådan gør du din hjemmeside responsiv og interaktiv med CSS og JavaScript

Du har sat din hjemmeside op med HTML og CSS, men nu skal du tilføje logik. Her er hvad du skal gøre.

Læs Næste

Om forfatteren