JavaScript DOM opetusohjelma esimerkin kanssa

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

JavaSkriptien DOM ja tapahtumat antavat skripteille täyden hallinnan verkkosivuun, jolloin koodi voi lukea, muuttaa, lisätä tai poistaa mitä tahansa selaimen renderöimiä elementtejä ja reagoida välittömästi aina, kun kävijä napsauttaa, kirjoittaa tai vierittää.

  • 🌳 Solmutyypit: Elementti-, teksti-, attribuutti- ja kommenttisolmuilla on kullakin oma roolinsa DOM-puussa.
  • 🔍 Elementtien valitseminen: getElementById, querySelector ja querySelectorAll paikantavat tarkalleen ne solmut, joiden kanssa skriptin on toimittava.
  • ✏️ Sisällön päivittäminen: innerHTML, textContent ja setAttribute kirjoittavat uudelleen sen, mitä kävijä todellisuudessa näkee näytöllä.
  • 🧩 Rakennussolmut: createElement ja appendChild lisäävät uusia elementtejä lataamatta sivua uudelleen.
  • 🗑️ Solmujen poistaminen: removeChild ja remove poistavat ei-toivotut elementit elävästä puusta.
  • 🖱️ Tapahtuman käsittely: addEventListener liittää click-, keyup- ja submit-käsittelijät mihin tahansa elementtiin.
  • 🔄 Tapahtuman delegointi: Yksittäinen pääkuuntelija ja event.target hallitsevat useiden alielementtien klikkauksia samanaikaisesti.
  • 🤖 Tekoälyavusteinen virheenkorjaus: Tekoälykoodausavustajat auttavat trackuplivia ongelmia ja ehdottaa delegointimalleja monimutkaisille käyttöliittymille.
Lue lisää

Mitä DOM sisältää JavaKäsikirjoitus?

JavaSkripti voi käyttää kaikkia verkkosivun elementtejä Document Object Model (DOM) -mallin avulla. Itse asiassa verkkoselain luo verkkosivusta DOM-mallin, kun sivu ladataan. DOM-malli luodaan seuraavanlaisena objektipuuna:

DOM sisään JavaKäsikirjoitus

Jokainen sivun HTML-elementti muuttuu solmuksi tämän puun sisällä. Selaimet ryhmittelevät DOM-solmut muutamiin ydintyyppeihin: elementtisolmut edustavat tageja, kuten <p> or <div>, tekstisolmut säilyttävät tunnisteen sisällä olevia näkyviä sanoja, attribuuttisolmut säilyttävät arvoja, kuten id or classja kommenttisolmut säilyttävät <!-- --> merkintätapa. Ylin solmu on aina document objekti, ja kaikki muut elementit ovat sen jälkeläisiä.

DOM:n avulla JavaKäsikirjoitus voi suorittaa useita tehtäviä. Se voi luoda uusia elementtejä ja attribuutteja, muuttaa olemassa olevia elementtejä ja attribuutteja ja jopa poistaa olemassa olevia elementtejä ja attribuutteja. JavaSkripti voi myös reagoida olemassa oleviin tapahtumiin ja luoda uusia tapahtumia sivulle. Alla olevat osiot käyvät läpi elementtien valitsemisen, muokkaamisen ja tapahtumankäsittelijöiden kytkemisen käytännönläheisten, suoritettavien esimerkkien avulla.

On hyvä muistaa, että DOM ei ole sama asia kuin HTML-lähdekooditiedosto. Selaimen lataama HTML on staattista tekstiä, mutta tekstistä rakentama DOM on elävä, dynaaminen objektimalli. Kaikki muutokset JavaDOM:iin tehty skripti näkyy näytöllä välittömästi ilman, että alkuperäiseen HTML-tiedostoon kosketaan.

DOM-elementtien valitseminen JavaKäsikirjoitus

Ennen JavaSkripti voi muuttaa mitä tahansa sivulla, mutta sen on ensin valittava kohdesolmu. DOM tarjoaa useita valintametodeja, joista jokainen sopii eri tilanteisiin:

  • getElementById(): palauttaa yhden elementin, joka vastaa annettua funktiota id määrite.
  • getElementsByClassName(): palauttaa reaaliaikaisen HTMLCollection-kokoelman jokaisesta elementistä, joka sisältää annetun luokan.
  • getElementsByTagName(): palauttaa reaaliaikaisen HTMLCollection-kokoelman jokaisesta elementistä, jolla on annettu tagin nimi, kuten p or li.
  • kyselynvalitsin(): palauttaa ensimmäisen elementin, joka vastaa mitä tahansa CSS-valitsinta.
  • kyselyValitsijaKaikki(): palauttaa staattisen NodeList-listin jokaisesta CSS-valitsinta vastaavasta elementistä.

Alla olevassa taulukossa vertaillaan neljää yleisimmin käytettyä valintamenetelmää, jotta voit valita työhön sopivan.

Menetelmä Palautukset Paras käytetty Milloin
getElementById Yksi elementti Tiedät kohteen tarkan ja yksilöllisen tunnuksen.
getElementsByClassName Live HTML-kokoelma Tarvitset jokaisen elementin, jolla on yksi luokkanimi.
querySelector Yksittäinen elementti (ensimmäinen osuma) Haluat käyttää mitä tahansa CSS-valitsinta, etkä vain id:tä tai luokkaa.
querySelectorAll Staattinen solmuluettelo Sinun täytyy käydä läpi jokainen osuma forEach-metodilla.

querySelector ja querySelectorAll hyväksyvät minkä tahansa kelvollisen CSS-valitsimen, mikä tekee niistä joustavimman vaihtoehdon moderniin koodiin. Kokeile alla olevaa koodinpätkää sivulla, joka sisältää elementin, jossa on id="title" ja useita elementtejä, joissa on 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 ja getElementsByClassName pysyvät nopeampina yksinkertaisissa hauissa, kun taas querySelector ja querySelectorAll ovat parempia aina, kun valintalogiikka tarvitsee täyden CSS-syntaksin tehoa, kuten attribuutti- tai jälkeläisvalitsimia.

AIHEESEEN LIITTYVÄT ARTIKKELIT

DOM-elementtien muokkaaminen, luominen ja poistaminen

Kun elementti on valittu, JavaSkripti voi lukea tai kirjoittaa uudelleen sisällönsä, attribuuttinsa ja jopa olemassaolonsa puussa. DOM:n avulla JavaSkripti voi luoda uusia elementtejä ja attribuutteja, muuttaa olemassa olevia elementtejä ja attribuutteja sekä poistaa olemassa olevia elementtejä ja attribuutteja kokonaan.

Muuta sisältöä getElementById:n ja innerHTML:n avulla

  1. getElementById: Käyttääksesi elementtejä ja attribuutteja, joiden tunnus on asetettu.
  2. innerHTML: Elementin sisällön käyttäminen.

Kokeile tätä esimerkkiä itse:

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

Hälytysikkuna vahvistaa, että getElementById paikansi otsikon ja innerHTML palautti sen sisällä olevan tekstin.

Lue jokainen kappale getElementsByTagName-funktiolla

getElementsByTagName: Elementtien ja attribuuttien käyttäminen tagin nimen avulla. Tämä menetelmä palauttaa an ryhmä kaikista kohteista, joilla on sama tunnistenimi.

Kokeile tätä esimerkkiä itse:

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

Koska getElementsByTagName palauttaa live-kokoelman, paragraphs[1] viittaa dokumentin toiseen kappaleeseen, ja innerHTML:n päivittäminen korvaa sen tekstin välittömästi näytöllä.

Luo ja poista elementtejä createElement- ja removeChild-funktioilla

Sivulla jo olevien elementtien muuttamisen lisäksi DOM antaa sinun lisätä aivan uusia elementtejä tai poistaa olemassa olevia:

  • luoElementti(): rakentaa uuden elementtisolmun muistiin.
  • appendChild(): liittää solmun pääelementin viimeiseksi lapseksi.
  • setAttribute(): lisää tai päivittää ominaisuuden, kuten class or href, elementillä.
  • poistaLapsi(): poistaa määritetyn lapsisolmun sen vanhemmasta.

Alla oleva esimerkki luo uuden listakohteen, antaa sille tekstin ja luokan, liittää sen olemassa olevaan listaan ​​ja poistaa sitten aivan ensimmäisen kohteen samasta listasta:

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

Pelkkä createElement() ei näytä mitään, koska solmu sijaitsee edelleen vain muistissa. Se ilmestyy vain, kun appendChild() tai vastaava metodi, kuten prepend(), liittää sen jonnekin näkyvän puun sisälle. Nykyaikaiset selaimet tukevat myös lyhyempää node.remove()-metodia, joka poistaa elementin suoraan ilman viittausta sen vanhempaan, toisin kuin vanhempi parent.removeChild(node)-syntaksi.

Tapahtumien käsittely JavaKäsikirjoitus

Tapahtuma on mikä tahansa toiminto, jonka selain voi havaita, kuten klikkaus, näppäimen painallus tai sivun lataus. Voit lisätä tapahtumankäsittelijän tiettyyn elementtiin kahdella päätavalla.

Liitä käsittelijä onclick- tai addEventListener-funktiolla

Ensimmäinen, vanhempi lähestymistapa määrittää funktion suoraan elementin on-event-ominaisuudelle:

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

TAI käyttämällä modernia ja joustavampaa addEventListener()-metodia:

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

addEventListener()-funktiota suositaan yleensä, koska sen avulla voit liittää useamman kuin yhden käsittelijän samaan tapahtumaan samassa elementissä, ja se hyväksyy valinnaisen kolmannen argumentin, joka ohjaa tallentamista, mitä käsitellään myöhemmin tässä osiossa. Se toimii myös yhdessä removeEventListener()-funktion kanssa, joka irrottaa käsittelijän, kun sitä ei enää tarvita, mitä onclick-ominaisuus ei voi tehdä yksinään.

HTML tukee myös kolmatta tyyliä: suoraan tagiin kirjoitettua rivikohtaista käsittelijää, kuten <button onclick="clicked()">Click Me</button>Sisäänrakennetut käsittelijät sekoittavat merkintöjä logiikkaan ja niistä tulee nopeasti vaikeasti ylläpidettäviä, joten useimmat JavaSkriptikehittäjät varaavat ne nopeisiin demoihin ja luottavat addEventListener()-funktioon todellisissa sovelluksissa.

Kokeile: esimerkki täydellisestä klikkaustapahtumasta

Kokeile tätä esimerkkiä itse:

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

Painikkeen napsauttaminen laukaisee clicked()-funktion, joka laukaisee JavaSkriptihälytysikkuna, joka vahvistaa tapahtumankäsittelijän suorittamisen onnistuneesti.

Tapahtumaobjekti

Jokainen tapahtumankäsittelijä saa automaattisesti ensimmäisenä argumenttinaan tapahtumaobjektin. Tämä objekti sisältää hyödyllisiä tietoja tapahtuneesta, mukaan lukien event.target (tarkan elementin, josta toiminto sai alkunsa), event.type (tapahtuman nimi, kuten ”click”) ja metodit, kuten event.preventDefault(), joka pysäyttää selaimen oletustoiminnan, kuten linkin seuraamisen tai lomakkeen lähettämisen.

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

Tapahtumaobjektin täydentävät kaksi muuta ominaisuutta: event.currentTarget viittaa aina elementtiin, johon kuuntelija on liitetty, vaikka event.target raportoisi sisäkkäisen lapsen, ja event.stopPropagation() pysäyttää tapahtuman ennen kuin se jatkaa kuplimista tai kaappaamista. Yhdessä preventDefault()-funktion kanssa nämä työkalut antavat käsittelijälle tarkan hallinnan siitä, mitä seuraavaksi tapahtuu.

Tapahtuma Bubblminen, talteenotto ja delegointi

Kun tapahtuma käynnistyy sisäkkäisessä elementissä, se ei pysähdy siihen. kuplivaa vaiheessa tapahtuma kulkee ylöspäin kohdeelementistä jokaisen esi-isän kautta aina dokumenttiin asti. syömällä vaihe, joka suoritetaan ensin ja on valinnainen, tapahtuma sen sijaan kulkee alaspäin dokumentista kohteeseen ennen kuplimisen alkamista. {capture: true} kolmantena argumenttina, jota addEventListener() käyttää kuunnellakseen sieppausvaiheen aikana.

Tapahtuman delegointi hyödyntää kuplimista: sen sijaan, että jokaiseen lapsielementtiin liitettäisiin erillinen kuuntelija, liitetään yksi kuuntelija jaettuun pääelementtiin ja event.target-tiedostoa tarkastellaan sen määrittämiseksi, mikä lapsielementti laukaisi sen. Tämä käyttää vähemmän muistia ja peittää automaattisesti sivulle myöhemmin lisätyt elementit.

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

Delegointi, yhdessä kuplivien ja tallentamisen kanssa, antaa sinulle tarkan hallinnan siitä, miten DOM ja tapahtumat ... -kohdassa ... JavaSkripti reagoi sivun muuttuessa vuorovaikutteisemmaksi.

UKK

Ei. HTML on staattinen merkintä, jonka selain jäsentää, kun taas DOM on live-muistissa oleva objektipuu, joka JavaSkripti voi lukea ja muuttua sivun latautumisen jälkeen.

Suosi addEventListener()-metodia. Se sallii useiden käsittelijöiden käytön yhdessä tapahtumassa, tukee tallennusvaihetta eikä korvaa onclickin kautta jo liitettyä käsittelijää.

Bubbling siirtää tapahtuman kohdeelementistä ylös dokumenttiin. Tallentaminen suoritetaan ensin ja siirtyy vastakkaiseen suuntaan dokumentista alas kohteeseen.

Kyllä. Avustajat tykkäävät GitHub Copilot voida tracmiksi käsittelijä ei koskaan käynnisty, paikanna puuttuvat event.stopPropagation()-kutsuja ja ehdota delegointimalleja dynaamisille listoille.

Kyllä. Työkaluja, kuten ChatGPT ja GitHub Copilot voi luonnostella createElement-, querySelector- ja addEventListener-koodinpätkiä selkokielisestä kuvauksesta, vaikka tuloste vaatii vielä testausta.

Tiivistä tämä viesti seuraavasti: