JavaScript DOM Tutorial med eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

JavaScript DOM og Events giver scripts fuld kontrol over en webside, så koden kan læse, ændre, tilføje eller fjerne ethvert element, som browseren gengiver, og derefter reagere øjeblikkeligt, når en besøgende klikker, skriver eller scroller.

  • ???? Nodetyper: Element-, tekst-, attribut- og kommentarnoder spiller hver især en særskilt rolle i DOM-træet.
  • 🔍 Valg af elementer: getElementById, querySelector og querySelectorAll finder præcis de noder, et script skal arbejde med.
  • ✏️ Opdatering af indhold: innerHTML, textContent og setAttribute omskriver, hvad en besøgende rent faktisk ser på skærmen.
  • 🧩 Bygningsnoder: `createElement` og `appendChild` indsætter helt nye elementer uden at genindlæse siden.
  • 🗑️ Fjernelse af noder: removeChild og remove fjerner uønskede elementer fra det aktive træ.
  • 🖱️ Begivenhedshåndtering: addEventListener vedhæfter klik-, keyup- og submit-handlere til et hvilket som helst element.
  • 🔄 Begivenhedsdelegation: En enkelt forælderlytter plus event.target administrerer klik for mange underordnede elementer på én gang.
  • 🤖 AI-assisteret fejlfinding: Hjælp til AI-kodningsassistenter trace boblende problemer og foreslå delegeringsmønstre for komplekse brugergrænseflader.
Læs mere

Hvad er DOM i JavaManuskript?

JavaScriptet kan tilgå alle elementerne på en webside ved hjælp af Document Object Model (DOM). Faktisk opretter webbrowseren en DOM af websiden, når siden indlæses. DOM-modellen oprettes som et træ af objekter som dette:

DOM ind JavaScript

Hvert HTML-element på en side bliver en node i dette træ. Browsere grupperer DOM-noder i et par kernetyper: elementnoder repræsenterer tags såsom <p> or <div>, tekstnoder indeholder de synlige ord inde i et tag, attributnoder gemmer værdier såsom id or class, og kommentarnoder bevarer <!-- --> markup. Den øverste node er altid document objekt, og alle andre elementer er en efterkommer af det.

Ved hjælp af DOM'en, JavaScript kan udføre flere opgaver. Den kan oprette nye elementer og attributter, ændre eksisterende elementer og attributter og endda fjerne eksisterende elementer og attributter. JavaScriptet kan også reagere på eksisterende hændelser og oprette nye hændelser på siden. Afsnittene nedenfor gennemgår valg af elementer, ændring af dem og kobling af hændelseshandlere med praktiske, kørbare eksempler.

Det er nyttigt at huske, at DOM'en ikke er det samme som HTML-kildefilen. Den HTML, en browser downloader, er statisk tekst, men den DOM, den bygger ud fra denne tekst, er en levende, dynamisk objektmodel. Enhver ændring JavaScriptet opretter til DOM'en vises med det samme på skærmen, uden at den originale HTML-fil nogensinde bliver rørt.

Sådan vælger du DOM-elementer i JavaScript

Før JavaScriptet kan ændre hvad som helst på en side. Det skal først vælge målnoden. DOM'en tilbyder adskillige selektionsmetoder, der hver især er egnet til forskellige situationer:

  • getElementById(): returnerer det enkelte element, der matcher en given id attribut.
  • getElementsByClassName(): returnerer en live HTMLCollection af hvert element, der bærer en given klasse.
  • getElementsByTagName(): returnerer en live HTMLCollection af hvert element med et givet tagnavn, f.eks. p or li.
  • forespørgselsvælger(): returnerer det første element, der matcher en vilkårlig CSS-selektor.
  • forespørgselsVælgerAlle(): returnerer en statisk NodeList for hvert element, der matcher en CSS-selektor.

Tabellen nedenfor sammenligner de fire mest anvendte udvælgelsesmetoder, så du kan vælge den rigtige til jobbet.

Metode Returpolitik Bedste brugt når
getElementById Enkelt element Du kender målets nøjagtige, unikke id.
getElementsByClassName Live HTML-samling Du skal bruge hvert element, der deler ét klassenavn.
querySelector Enkelt element (første match) Du skal bruge en hvilken som helst CSS-selektor, ikke kun id eller klasse.
querySelectorAll Statisk nodeliste Du skal gennemgå alle matches med forEach.

querySelector og querySelectorAll accepterer enhver gyldig CSS-selektor, hvilket gør dem til det mest fleksible valg til moderne kode. Prøv nedenstående kodestykke på en side, der indeholder et element med id="title" og flere elementer med class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById og getElementsByClassName forbliver hurtigere til simple opslag, mens querySelector og querySelectorAll foretrækkes, når udvælgelseslogikken har brug for kraften i fuld CSS-syntaks, såsom attribut- eller efterkommerselektorer.

RELATEREDE ARTIKLER

Sådan ændrer, opretter og fjerner du DOM-elementer

Når et element er valgt, JavaScriptet kan læse eller omskrive dets indhold, attributter og endda dets eksistens i træet. Ved hjælp af DOM, JavaScriptet kan oprette nye elementer og attributter, ændre eksisterende elementer og attributter og fjerne eksisterende elementer og attributter helt.

Ændr indhold med getElementById og innerHTML

  1. getElementById: For at få adgang til elementer og attributter, hvis id er indstillet.
  2. innerHTML: For at få adgang til indholdet af et element.

Prøv selv dette eksempel:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

Advarselsboksen bekræfter, at getElementById fandt overskriften, og at innerHTML returnerede den tekst, der var gemt i den.

Læs hvert afsnit med getElementsByTagName

getElementsByTagName: For at få adgang til elementer og attributter ved hjælp af tagnavn. Denne metode vil returnere en matrix af alle varer med samme tagnavn.

Prøv selv dette eksempel:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Fordi getElementsByTagName returnerer en live-samling, refererer paragraphs[1] til det andet afsnit i dokumentet, og opdatering af innerHTML overskriver øjeblikkeligt teksten på skærmen.

Opret og fjern elementer med createElement og removeChild

Udover at ændre det, der allerede er på siden, giver DOM dig mulighed for at tilføje helt nye elementer eller fjerne eksisterende:

  • opretElement(): opbygger en ny elementnode i hukommelsen.
  • tilføjBarn(): tilknytter en node som det sidste barn af et overordnet element.
  • sætAttribut(): tilføjer eller opdaterer en attribut, f.eks. class or href, på et element.
  • fjernBarn(): fjerner en bestemt underordnet node fra dens forælder.

Eksemplet nedenfor opretter et nyt listeelement, giver det tekst og en klasse, tilføjer det til en eksisterende liste og fjerner derefter det allerførste element fra den samme liste:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

createElement() alene viser ikke noget, da noden stadig kun findes i hukommelsen. Den vises kun, når appendChild(), eller en lignende metode som prepend(), vedhæfter den et sted i det synlige træ. Moderne browsere understøtter også en kortere node.remove()-metode, som sletter et element direkte uden at skulle referere til dets forælder, i modsætning til den ældre parent.removeChild(node)-syntaks.

Sådan håndterer du begivenheder i JavaScript

En hændelse er enhver handling, som browseren kan registrere, f.eks. et klik, et tastetryk eller en sideindlæsning. Du kan tilføje en hændelseshandler til et bestemt element på to hovedmåder.

Vedhæft en handler med onclick eller addEventListener

Den første, ældre tilgang tildeler en funktion direkte til et elements on-event-egenskab:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

ELLER ved at bruge den moderne og mere fleksible addEventListener()-metode:

document.getElementById(id).addEventListener("click", functionname)

addEventListener() foretrækkes generelt, fordi den lader dig tilknytte mere end én handler til den samme begivenhed på det samme element, og den accepterer et valgfrit tredje argument, der styrer optagelse, hvilket dækkes senere i dette afsnit. Den parres også med removeEventListener(), som afbryder en handler, når den ikke længere er nødvendig, noget onclick-egenskaben ikke kan gøre alene.

HTML understøtter også en tredje stil: en inline-handler skrevet direkte på tagget, f.eks. <button onclick="clicked()">Click Me</button>Inline-handlere blander markup med logik og bliver hurtigt svære at vedligeholde, så de fleste JavaScriptudviklere reserverer dem til hurtige demoer og bruger addEventListener() til rigtige applikationer.

Prøv det: Et komplet eksempel på en klikhændelse

Prøv selv dette eksempel:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Hvis du klikker på knappen, udløses clicked()-funktionen, som udløser en JavaScriptadvarselsboks, der bekræfter, at hændelseshandleren kørte korrekt.

Begivenhedsobjektet

Enhver eventhandler modtager automatisk et eventobjekt som sit første argument. Dette objekt indeholder nyttige detaljer om, hvad der skete, herunder event.target (det præcise element, handlingen startede på), event.type (eventnavnet, f.eks. "klik") og metoder som event.preventDefault(), som stopper en browsers standardadfærd, som f.eks. at følge et link eller indsende en formular.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

To yderligere egenskaber afrunder eventobjektet: event.currentTarget refererer altid til det element, som lytteren er knyttet til, selvom event.target rapporterer et indlejret barn, og event.stopPropagation() stopper en begivenhed, før den fortsætter med at boble eller indfange yderligere. Sammen med preventDefault() giver disse værktøjer en handler præcis kontrol over, hvad der sker derefter.

Begivenhed Bubbling, indfangning og delegering

Når en hændelse udløses på et indlejret element, stopper den ikke der. I boblende I denne fase bevæger begivenheden sig opad fra målelementet gennem hver forfader, hele vejen til dokumentet. fanger fasen, som kører først og er tilmelding, bevæger hændelsen sig i stedet nedad fra dokumentet til målet, før boblerne begynder. {capture: true} som det tredje argument til at addEventListener() lytter under optagelsesfasen.

Begivenhedsdelegation udnytter boblefunktion: i stedet for at knytte en separat lytter til hvert underordnet element, knytter du én lytter til en delt forælder og inspicerer event.target for at bestemme, hvilket underordnet element der udløste det. Dette bruger mindre hukommelse og dækker automatisk elementer, der tilføjes til siden senere.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

Delegering, sammen med bobling og registrering, giver dig finjusteret kontrol over, hvordan DOM og begivenheder JavaScriptet reagerer, når en side bliver mere interaktiv.

Ofte Stillede Spørgsmål

Nej. HTML er den statiske markup, som en browser analyserer, mens DOM er det levende træ af objekter i hukommelsen, der JavaScriptet kan læses og ændres, efter siden er indlæst.

Foretrækker addEventListener(). Den tillader flere handlere på én begivenhed, understøtter indfangningsfasen og overskriver ikke en handler, der allerede er tilknyttet via onclick.

Bubbling bærer en hændelse fra målelementet op til dokumentet. Optagelsen kører først og bevæger sig den modsatte vej, fra dokumentet ned til målet.

Ja. Assistenter kan lide GitHub Copilot kan trace hvorfor en handler aldrig udløses, find manglende event.stopPropagation() kald og foreslå delegeringsmønstre for dynamiske lister.

Ja. Værktøjer som f.eks. ChatGPT og GitHub Copilot kan udarbejde createElement-, querySelector- og addEventListener-kodestykker fra en beskrivelse i et letforståeligt sprog, selvom outputtet stadig skal testes.

Opsummer dette indlæg med: