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 får du 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:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="home">
<h1>Welcome</h1>
<p>
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.
</p>
</section>
<section id="about">
<h2>About</h2>
<p>
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.
</p>
</section>
<section id="blog">
<h2>Articles</h2>
<div class="articles" id="article-1">
<h3>Article Title One</h3>
<p>
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.
</p>
<a href="#"> Read More </a>
</div>
<div class="articles" id="article-2">
<h3>Article Title Two</h3>
<p>
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.
</p>
<a href="#"> Read More </a>
</div>
<div class="articles" id="article-3">
<h3>Article Title Three</h3>
<p>
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.
</p>
<a href="#"> Read More </a>
</div>
<div class="articles" id="article-4">
<h3>Article Title Four</h3>
<p>
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.
</p>
<a href="#"> Read More </a>
</div>
</section>
</body>
</html>
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
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.
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:
<script src="https://ipotek.net/lar-dig-hur-du-anvander-dom-valjare/main.js"></script>
Där src-värdet är namnet på din JavaScript-fil. Placera denna skripttagg precis före din avslutande bodytagg,
