Lära Vad är dokumentobjektmodellen (DOM)? | DOM-manipulation för Interaktiv Webbapplikationsutveckling

Nu när vi har gått igenom JavaScript-klasser, låt oss rikta vårt fokus mot Document Object Model (DOM), som är gränssnittet som gör det möjligt för oss att manipulera webbsidor. Nästa avsnitt kommer att utforska hur JavaScript interagerar med DOM för att skapa dynamiskt och interaktivt innehåll.

Tänk på DOM som ett släktträd. Varje element i dokumentet är som en familjemedlem, sammankopplad genom relationer – föräldrar, barn och syskon.

I DOM kallas element, attribut och text för noder, och dessa noder är organiserade hierarkiskt, precis som familjemedlemmar i ett släktträd. Vissa noder är föräldrar med barn, medan andra är syskon.

Sambandet mellan HTML och DOM

När en webbläsare laddar ett HTML-dokument läser den HTML-koden och bygger upp ett motsvarande DOM-träd. HTML ger webbsidans statiska struktur, medan DOM är den levande, dynamiska representationen som JavaScript kan manipulera.

HTML definierar den ursprungliga släktträdstrukturen över vem som är kopplad till vem, men den är statisk och ändras inte av sig själv;
DOM är släktträdet i realtid, och det kan ändras. Nya medlemmar (element) kan läggas till eller tas bort, och relationer (förälder-barn, syskon) kan uppdateras av JavaScript.

Till exempel:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Denna HTML skapar ett grundläggande familjeträd med en <html>-nod som förälder, och <head>- och <body>-noder som dess barn. Inuti body är <h1> och <p> syskon.

Denna struktur är DOM:ens levande, interaktiva version av HTML, där JavaScript kan manipulera relationer mellan noder (familjemedlemmar).

Hur JavaScript interagerar med DOM

JavaScript kan komma åt och manipulera DOM för att göra ändringar i familjeträdet i realtid. Det är möjligt att lägga till nya medlemmar, ta bort befintliga eller ändra deras information.

Åtkomst till familjemedlemmar: Precis som det går att hitta en specifik person i ett familjeträd, kan JavaScript komma åt enskilda noder i DOM med metoder som document.getElementById() eller document.querySelector();
Ändra information: När en familjemedlem har hittats kan deras detaljer uppdateras. Till exempel kan JavaScript ändra textinnehåll eller attribut för ett element med egenskaper som innerHTML eller textContent;
Modifiera relationer: JavaScript kan även lägga till nya familjemedlemmar i trädet eller ta bort dem. Detta görs genom att manipulera DOM-strukturen med metoder som appendChild() eller removeChild().

Exempel

Tänk på denna HTML:

<p id="greeting">Hello, World!</p>

Med JavaScript kan vi ändra texten i paragrafen, precis som att uppdatera namnet på en familjemedlem:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Efter att JavaScript-koden har körts uppdateras familjeträdet (DOM), och texten i paragrafen ändras från "Hello, World!" till "Hello, JavaScript!"

index.html

index.js

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 1

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain more about how to access different types of DOM nodes?

What are some common methods for modifying the DOM with JavaScript?

Can you give more examples of how JavaScript can change the structure of a webpage?

Awesome!

Completion rate improved to 2.22

Svep för att visa menyn