Document Object Model (DOM) är den strukturella representationen av ett HTML-dokument. DOM är ett träd av noder som webbläsaren skapar för varje webbsida på internet.

DOM är objektorienterad. Varje element i DOM har sin egen uppsättning attribut och metoder som du kan komma åt med JavaScript.

I den här självstudieartikeln kommer du att lära dig hur du använder DOM-väljarfunktioner för att komma åt delar av en webbsida.

Hur man kommer åt DOM-element

Du kan komma åt DOM-elementet på översta nivån på en webbsida via det globala dokumentobjektet. Till exempel, om du har en webbsida som följande:

Välkommen


 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.




Handla 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



Artiklar



Artikeltitel ett


 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 mer 





Artikeltitel två


 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 mer 





Artikeltitel 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 mer 





Artikel Avdelning fyra


 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 mer 

Skriver dokumentera i din webbläsarkonsol och tryck på enter kommer att producera följande utdata:

Utdata i din konsol är interaktiv. Du kan klicka på huvud och kropp element för att utöka dem. Om du gör det får du följande utdata:

Varje sektionselement i Taggen är också expanderbar. Beroende på strukturen på en webbsida kommer elementen att fortsätta expandera för att avslöja fler element. Detta bör ge dig en tydligare förståelse av DOM: s struktur.

Relaterad: The Hidden Hero of Websites: Understanding the DOM

Dokumentobjektet har en speciell egenskap, kropp, som representerar kroppselementet. Så för att komma åt body-elementet kan du skriva följande i konsolen:

document.body

Detta kommer att producera följande utdata:

Men det här är så långt du kan gå med hjälp av objektegenskaper. Varje sida har ett huvud och en kropp men är annars unik. Skriver alltså dokument.kropp.sektion eller något liknande kommer helt enkelt inte att fungera som du kanske vill. Istället finns det metoder som du kan anropa dokumentobjektet för att komma åt specifika element.

Vad är DOM-elementväljare?

DOM-elementväljare är en grupp JavaScript-metoder som du kan använda på dokumentobjektet för att komma åt element på en webbsida. DOM-elementväljare har två kategorier – enkla och flera väljare.

Dessa funktioner fungerar på liknande sätt som CSS-väljare. De låter dig hämta element baserat på deras taggnamn eller deras id och klassattribut. Du kan till och med hämta element med valfri CSS-väljare.

Relaterad: Hur man riktar in sig på en del av en webbsida med hjälp av CSS-väljare

Enkelelementväljarna är:

• getElementById()
• querySelector()

Flerelementväljarna är:

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

DOM-elementväljaren du använder beror på elementet/elementen som du försöker få tillgång till.

Använda enstaka DOM-elementväljare

Du kommer oftast att se väljare i JavaScript-applikationer. Så låt oss gå bort från konsolen. Skapa en JavaScript-fil och länka den till din HTML-fil med följande skripttagg:

Där src-värdet är namnet på din JavaScript-fil. Placera denna skripttagg precis före din avslutande bodytagg, .

De getElementById() metod ger åtkomst till ett enda element på en webbsida med hjälp av värdet på dess ID. I HTML-dokumentet ovan finns flera element med ID. Att rikta in sig på div element med "artikel-3" ID kan du lägga till följande kod till din JavaScript-fil:

värde = document.getElementById('artikel-3')

Nu är div-elementet med artikel-3 ID och alla dess motsvarande egenskaper är tillgängliga från värde variabel. Du kan skriva ut värde variabel till konsolen med följande kodrad:

console.log (värde)

Du kommer att se klassnamnet som är tilldelat div-elementet samt andra viktiga attribut, som den inre HTML-koden.

Den andra enskilda elementväljaren är querySelector(). Den här funktionen är mer mångsidig, eftersom du kan skicka den vilken CSS-väljarsträng som helst. Du kan dock fortfarande bara använda den för att välja ett element åt gången.

Till exempel finns det en enda klass i HTML-layouten ovan – artiklar. Fyra div-element använder denna klass, men querySelector() funktion kommer bara att returnera det första elementet som har klassen "artiklar".

Använda querySelector() med en klass

Lägg till följande kod i slutet av ditt skript:

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

Detta kommer bara att returnera den första div element med en "artiklar"-klass. Observera att du anger väljaren i samma format som en CSS-väljare. I CSS anger en inledande period ett klassnamn.

Använder querySelector() med ett ID

värde = document.querySelector('#artikel-3')
console.log (värde)

Denna kod kommer att returnera det enda elementet med ett "artikel-3" ID, det tredje div element med en "artiklar"-klass. Återigen använder väljarsträngen standard CSS-syntax, med en # symbol som anger ett ID.

Använda flera DOM-elementväljare

De återstående väljarfunktionerna hämtar grupper av element. Dom är getElementsByTagName(), getElementsByClassName(), och querySelectorAll().

Använda getElementsByTagName()

De getElementsByTagName() selector hämtar en grupp av element med samma taggnamn. Till exempel, om du vill välja alla h2 element på en webbsida kan du använda följande kod:

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

Detta lagrar alla h2-element i en HTML-samling som kallas värde.

Använda getElementsByClassName()

De getElementsByClassName() selector returnerar en samling element med samma klassnamn.

värde = document.getElementsByClassName('artiklar')
console.log (värde)

Om du infogar koden ovan i din JavaScript-fil returneras de fyra div-elementen med klassnamnet "artiklar" i webbläsarkonsolen.

Använder querySelectorAll()

De querySelectorAll() metod returnerar en nodlista med alla element som matchar den givna väljaren. För att komma åt alla styckeelement i bloggsektionen kan du använda följande kod:

värde = document.querySelectorAll('#blogg p')
console.log (värde)

Du kan till och med inkludera flera väljare i strängen, separera var och en med ett kommatecken, precis som i CSS:

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

Använd DOM-väljare för att skapa dynamiska webbsidor

Vid det här laget bör du ha en klar förståelse för DOM och hur det fungerar. Du bör också känna till de olika enstaka och multipelväljarna, samt hur du använder dem.

Att få tillgång till HTML-element är ändå bara det första steget i vad du kan göra med DOM-väljare. DOM-väljare kommer att hjälpa dig att utveckla de funktionella aspekterna av din webbplats, som att hantera onclick- och onscroll-händelser.

Hur du gör din webbplats responsiv och interaktiv med CSS och JavaScript

Du har konfigurerat din webbplats med HTML och CSS, men nu måste du lägga till logik. Här är vad du ska göra.

Läs Nästa

Om författaren