JavaScript DOM Tutorial med exempel

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

JavaSkript-DOM och händelser ger skript full kontroll över en webbsida, vilket låter kod läsa, ändra, lägga till eller ta bort element som webbläsaren renderar, och sedan svara direkt när en besökare klickar, skriver eller skrollar.

  • ???? Nodtyper: Element-, text-, attribut- och kommentarnoder spelar alla en distinkt roll i DOM-trädet.
  • 🔍 Val av element: getElementById, querySelector och querySelectorAll lokaliserar exakt de noder som ett skript behöver arbeta med.
  • ✏️ Uppdatering av innehåll: innerHTML, textContent och setAttribute omskriver vad en besökare faktiskt ser på skärmen.
  • 🧩 Byggnoder: createElement och appendChild infogar helt nya element utan att ladda om sidan.
  • 🗑️ Ta bort noder: removeChild och remove tar bort oönskade element från det aktiva trädet.
  • 🖱️ Eventhantering: addEventListener kopplar hanterare för klick, keyup och submit till valfritt element.
  • 🔄 Evenemangsdelegation: En ensamstående förälderlyssnare plus event.target hanterar klick för många underordnade element samtidigt.
  • 🤖 AI-assisterad felsökning: Hjälp med AI-kodningsassistenter trace bubblor och föreslå delegeringsmönster för komplexa användargränssnitt.
Läs mer

Vad är DOM i JavaManus?

JavaSkript kan komma åt alla element på en webbsida med hjälp av Document Object Model (DOM). Webbläsaren skapar faktiskt en DOM av webbsidan när sidan laddas. DOM-modellen skapas som ett träd av objekt så här:

DOM in JavaScript

Varje HTML-element på en sida blir en nod i detta träd. Webbläsare grupperar DOM-noder i några kärntyper: elementnoder representerar taggar som <p> or <div>, textnoder håller de synliga orden inuti en tagg, attributnoder lagrar värden som id or class, och kommentarnoder bevaras <!-- --> markup. Den översta noden är alltid document objekt, och alla andra element är en undergrupp till det.

Med hjälp av DOM:en, JavaScript kan utföra flera uppgifter. Den kan skapa nya element och attribut, ändra befintliga element och attribut, och till och med ta bort befintliga element och attribut. JavaSkriptet kan också reagera på befintliga händelser och skapa nya händelser på sidan. Avsnitten nedan går igenom hur man väljer element, ändrar dem och kopplar samman händelsehanterare med praktiska, körbara exempel.

Det är bra att komma ihåg att DOM-filen inte är samma sak som HTML-källfilen. HTML-koden som en webbläsare laddar ner är statisk text, men DOM-filen den bygger från den texten är en aktiv, dynamisk objektmodell. Alla ändringar JavaSkript skapat till DOM-filen visas omedelbart på skärmen, utan att den ursprungliga HTML-filen någonsin berörs.

Hur man väljer DOM-element i JavaScript

Innan JavaSkriptet kan ändra vad som helst på en sida, det måste först välja målnoden. DOM:n tillhandahåller flera selektionsmetoder, som var och en passar olika situationer:

  • getElementById(): returnerar det enda elementet som matchar en given id attribut.
  • getElementsAvKlassnamn(): returnerar en live HTMLCollection av varje element som bär en given klass.
  • getElementsByTagName(): returnerar en live HTMLCollection av varje element med ett givet taggnamn, till exempel p or li.
  • frågeVäljare(): returnerar det första elementet som matchar valfri CSS-väljare.
  • querySelectorAll(): returnerar en statisk NodeList för varje element som matchar en CSS-väljare.

Tabellen nedan jämför de fyra vanligaste urvalsmetoderna så att du kan välja rätt för jobbet.

Metod Returer Används bäst när
getElementById Enskilt element Du vet målets exakta, unika ID.
getElementsByClassName Live HTML-samling Du behöver att varje element delar ett klassnamn.
querySelector Enskilt element (första matchningen) Du vill använda vilken CSS-selektor som helst, inte bara id eller klass.
querySelectorAll Statisk nodlista Du måste loopa över varje matchning med forEach.

querySelector och querySelectorAll accepterar alla giltiga CSS-selektorer, vilket gör dem till det mest flexibla valet för modern kod. Testa utdraget nedan på en sida som innehåller ett element med id="title" och flera element 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 och getElementsByClassName förblir snabbare för enkla sökningar, medan querySelector och querySelectorAll föredras närhelst urvalslogiken behöver kraften i fullständig CSS-syntax, till exempel attribut- eller underordnade selektorer.

RELATERADE ARTIKLAR

Hur man ändrar, skapar och tar bort DOM-element

När ett element har valts, JavaSkript kan läsa eller skriva om dess innehåll, attribut och till och med dess existens i trädet. Med hjälp av DOM, JavaSkript kan skapa nya element och attribut, ändra befintliga element och attribut och ta bort befintliga element och attribut helt och hållet.

Ändra innehåll med getElementById och innerHTML

  1. getElementById: För att komma åt element och attribut vars id är inställt.
  2. innerHTML: För att komma åt innehållet i ett element.

Testa själv detta exempel:

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

Varningsrutan bekräftar att getElementById hittade rubriken och att innerHTML returnerade texten som lagrats inuti den.

Läs varje stycke med getElementsByTagName

getElementsByTagName: För att komma åt element och attribut med taggnamn. Denna metod kommer att returnera en array av alla föremål med samma taggnamn.

Testa själv detta exempel:

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

Eftersom getElementsByTagName returnerar en live-samling refererar paragraphs[1] till det andra stycket i dokumentet, och uppdatering av innerHTML skriver omedelbart över dess text på skärmen.

Skapa och ta bort element med createElement och removeChild

Förutom att ändra det som redan finns på sidan, låter DOM dig lägga till helt nya element eller ta bort befintliga:

  • skapaElement(): bygger en ny elementnod i minnet.
  • tilläggBarn(): bifogar en nod som sista underordnat element till ett föräldraelement.
  • setAttribute(): lägger till eller uppdaterar ett attribut, till exempel class or href, på ett element.
  • ta bortBarn(): tar bort en specificerad undernod från dess förälder.

Exemplet nedan skapar ett nytt listobjekt, ger det text och en klass, lägger till det i en befintlig lista och tar sedan bort det allra första objektet från samma lista:

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() ensamt visar ingenting, eftersom noden fortfarande bara finns i minnet. Den visas bara när appendChild(), eller en liknande metod som prepend(), kopplar den någonstans inuti det synliga trädet. Moderna webbläsare stöder också en kortare node.remove()-metod, som tar bort ett element direkt utan att behöva en referens till dess förälder, till skillnad från den äldre parent.removeChild(node)-syntaxen.

Hur man hanterar händelser i JavaScript

En händelse är vilken handling som helst som webbläsaren kan upptäcka, till exempel ett klick, en tangenttryckning eller en sidinläsning. Du kan lägga till en händelsehanterare till ett visst element på två huvudsakliga sätt.

Koppla en hanterare med onclick eller addEventListener

Den första, äldre metoden tilldelar en funktion direkt till ett elements on-event-egenskap:

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

ELLER, med hjälp av den moderna och mer flexibla metoden addEventListener():

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

addEventListener() föredras generellt eftersom det låter dig koppla mer än en hanterare till samma händelse på samma element, och det accepterar ett valfritt tredje argument som styr inspelning, vilket tas upp senare i det här avsnittet. Det paras också ihop med removeEventListener(), som kopplar bort en hanterare när den inte längre behövs, något som onclick-egenskapen inte kan göra på egen hand.

HTML stöder också en tredje stil: en inline-hanterare skriven direkt på taggen, till exempel <button onclick="clicked()">Click Me</button>Inline-hanterare blandar markup med logik och blir snabbt svåra att underhålla, så de flesta JavaSkriptutvecklare reserverar dem för snabba demonstrationer och förlitar sig på addEventListener() för riktiga applikationer.

Prova det: Ett exempel på ett komplett klickhändelse

Testa själv detta exempel:

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

Att klicka på knappen aktiverar funktionen clicked(), vilket utlöser en JavaSkriptvarningsruta som bekräftar att händelsehanteraren kördes utan problem.

Händelseobjektet

Varje händelsehanterare får automatiskt ett händelseobjekt som sitt första argument. Detta objekt innehåller användbar information om vad som hände, inklusive event.target (det exakta elementet som åtgärden utgick från), event.type (händelsenamnet, till exempel "click") och metoder som event.preventDefault(), vilket stoppar en webbläsares standardbeteende, som att följa en länk eller skicka in ett formulär.

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

Två ytterligare egenskaper kompletterar händelseobjektet: event.currentTarget refererar alltid till det element som lyssnaren är kopplad till, även om event.target rapporterar ett kapslat barn, och event.stopPropagation() stoppar en händelse innan den fortsätter att bubbla eller fånga ytterligare. Tillsammans med preventDefault() ger dessa verktyg en hanterare exakt kontroll över vad som händer härnäst.

Event Bubblning, insamling och delegering

När en händelse utlöses på ett kapslat element slutar den inte där. I bubblande fasen, färdas händelsen uppåt från målelementet genom varje förfader, hela vägen till dokumentet. I fångande fasen, som körs först och är opt-in, färdas händelsen istället nedåt från dokumentet till målet innan bubbling börjar. {capture: true} som det tredje argumentet för att addEventListener() ska lyssna under inspelningsfasen.

Evenemangsdelegering utnyttjar bubbling: istället för att koppla en separat lyssnare till varje underordnat element, kopplar du en lyssnare till en delad förälder och inspekterar event.target för att avgöra vilket underordnat element som utlöste det. Detta använder mindre minne och täcker automatiskt element som läggs till på sidan senare.

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

Delegering, tillsammans med bubbling och registrering, ger dig finjusterad kontroll över hur DOM och händelser JavaSkriptet svarar allt eftersom en sida blir mer interaktiv.

Vanliga frågor

Nej. HTML är den statiska markup som en webbläsare analyserar, medan DOM är det aktiva trädet av objekt i minnet som JavaSkriptet kan läsas och ändras efter att sidan har laddats.

Föredra addEventListener(). Den tillåter flera hanterare på en händelse, stöder infångningsfasen och skriver inte över en hanterare som redan är kopplad via onclick.

Bubbling bär en händelse från målelementet upp till dokumentet. Insamlingen sker först och går i motsatt riktning, från dokumentet ner till målet.

Ja. Assistenter gillar GitHub Copilot Kan trace varför en hanterare aldrig utlöser, upptäck saknade event.stopPropagation()-anrop och föreslå delegeringsmönster för dynamiska listor.

Ja. Verktyg som till exempel ChatGPT och GitHub Copilot kan utarbeta createElement-, querySelector- och addEventListener-kodavsnitt från en beskrivning i enkelt språk, även om utdata fortfarande behöver testas.

Sammanfatta detta inlägg med: