Oppiskele Mikä on dokumenttiobjektimalli (DOM)? | DOM-Manipulointi Interaktiivista Web-Kehitystä Varten

Nyt kun olemme käsitelleet JavaScript-luokkia, siirretään katse Document Object Modeliin (DOM), joka on rajapinta verkkosivujen muokkaamiseen. Seuraavassa osiossa tarkastellaan, miten JavaScript on vuorovaikutuksessa DOMin kanssa luodakseen dynaamista ja interaktiivista sisältöä.

Ajattele DOMia kuin sukupuuta. Jokainen dokumentin elementti on kuin perheenjäsen, joita yhdistävät suhteet – vanhemmat, lapset ja sisarukset.

DOMissa elementtejä, attribuutteja ja tekstiä kutsutaan solmuiksi, ja nämä solmut on järjestetty hierarkkisesti, aivan kuten perheenjäsenet sukupuussa. Jotkut solmut ovat vanhempia, joilla on lapsia, kun taas toiset ovat sisaruksia.

HTML:n ja DOMin välinen suhde

Kun selain lataa HTML-dokumentin, se lukee HTML-koodin ja rakentaa vastaavan DOM-puun. HTML tarjoaa verkkosivun staattisen rakenteen, kun taas DOM on elävä, dynaaminen esitys, jota JavaScript voi muokata.

HTML määrittelee alkuperäisen sukupuurakenteen siitä, kuka on yhteydessä kehenkin, mutta se on staattinen eikä muutu itsestään;
DOM on sukupuu reaaliajassa, ja sitä voidaan muuttaa. Uusia jäseniä (elementtejä) voidaan lisätä tai poistaa, ja suhteita (vanhempi-lapsi, sisarukset) voidaan päivittää JavaScriptin avulla.

Esimerkiksi:

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

Tämä HTML luo yksinkertaisen sukupuun, jossa <html>-solmu toimii vanhempana ja <head> sekä <body> ovat sen lapsia. Rungon sisällä <h1> ja <p> ovat sisaruksia.

Tämä rakenne on DOM:n elävä, interaktiivinen versio HTML:stä, jossa JavaScript voi muokata solmujen (perheenjäsenten) välisiä suhteita.

Kuinka JavaScript on vuorovaikutuksessa DOM:n kanssa

JavaScript voi käyttää ja muokata DOM:ia tehdäkseen muutoksia sukupuuhun reaaliajassa. Voit lisätä uusia jäseniä, poistaa olemassa olevia tai muuttaa niiden tietoja.

Jäsenten hakeminen: Aivan kuten voit löytää tietyn henkilön sukupuusta, JavaScript voi hakea yksittäisiä solmuja DOM:ista käyttämällä metodeja kuten document.getElementById() tai document.querySelector();
Tietojen muuttaminen: Kun jäsen on haettu, sen tietoja voidaan päivittää. Esimerkiksi JavaScript voi muuttaa elementin tekstisisältöä tai attribuutteja ominaisuuksilla kuten innerHTML tai textContent;
Suhteiden muokkaaminen: JavaScript voi myös lisätä uusia jäseniä puuhun tai poistaa niitä. Tämä tehdään muokkaamalla DOM-rakennetta metodeilla kuten appendChild() tai removeChild().

Esimerkki

Tarkastellaan tätä HTML-koodia:

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

JavaScriptin avulla voimme muuttaa kappaleen tekstiä, aivan kuten päivittäisimme perheenjäsenen nimen:

// 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!';

Kun JavaScript-koodi suoritetaan, sukupuu (DOM) päivittyy ja kappaleen teksti muuttuu "Hello, World!" → "Hello, JavaScript!"

index.html

index.js

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 1

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

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

Pyyhkäise näyttääksesi valikon