JavaSkripti DOM-i õpetus koos näitega

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

JavaSkripti DOM ja sündmused annavad skriptidele veebilehe üle täieliku kontrolli, lastes koodil lugeda, muuta, lisada või eemaldada mis tahes elementi, mida brauser renderdab, ning seejärel reageerida koheselt iga kord, kui külastaja klõpsab, trükib või kerib.

  • 🌳 Sõlme tüübid: Elemendi-, teksti-, atribuudi- ja kommentaarisõlmedel on DOM-puus igaühel oma kindel roll.
  • 🔍 Elementide valimine: getElementById, querySelector ja querySelectorAll leiavad täpsed sõlmed, millega skript töötama peab.
  • ✏️ Sisu värskendamine: innerHTML, textContent ja setAttribute kirjutavad ümber selle, mida külastaja ekraanil tegelikult näeb.
  • 🧩 Hoone sõlmed: createElement ja appendChild lisavad uusi elemente ilma lehte uuesti laadimata.
  • 🗑️ Sõlmede eemaldamine: removeChild ja eemalda soovimatud elemendid aktiivsest puust.
  • 🖱️ Sündmuste käsitlemine: addEventListener lisab click-, keyup- ja submit-käitlejad mis tahes elemendile.
  • 🔄 Ürituse delegeerimine: Üksikvanemkuulaja koos event.targetiga haldab korraga paljude alamelementide klikke.
  • 🤖 Tehisintellekti abil veatuvastus: Tehisintellekti kodeerimisassistendid aitavad traclahendame mullitavaid probleeme ja pakume välja delegeerimismustreid keerukate kasutajaliideste jaoks.
Loe rohkem

Milles on DOM JavaSkript?

JavaSkript saab dokumendiobjektimudeli (DOM) abil juurde pääseda kõigile veebilehe elementidele. Tegelikult loob veebibrauser lehe laadimisel veebilehe DOM-i. DOM-mudel luuakse objektide puuna, näiteks nii:

DOM sisse JavaScript

Iga HTML-element lehel saab selle puu sees sõlmeks. Brauserid rühmitavad DOM-sõlmed mõnda põhitüüpi: elemendisõlmed esindavad silte, näiteks <p> or <div>, tekstisõlmed hoiavad sildi sees nähtavaid sõnu, atribuudisõlmed aga salvestavad väärtusi, näiteks id or classja kommentaarisõlmed säilitavad <!-- --> märgistus. Kõige ülemine sõlm on alati document objekt ja iga teine ​​element on selle järeltulija.

DOM-i kasutades JavaScript saab täita mitut ülesannet. See saab luua uusi elemente ja atribuute, muuta olemasolevaid elemente ja atribuute ning isegi eemaldada olemasolevaid elemente ja atribuute. JavaSkript saab reageerida ka olemasolevatele sündmustele ja luua lehel uusi sündmusi. Allolevad jaotised tutvustavad elementide valimist, muutmist ja sündmusekäitlejate seadistamist praktiliste ja käivitatavate näidete abil.

Kasulik on meeles pidada, et DOM ei ole sama asi mis HTML-lähtefail. HTML, mille brauser alla laadib, on staatiline tekst, kuid DOM, mille ta sellest tekstist loob, on reaalajas dünaamiline objektimudel. Igasugune muudatus JavaDOM-ile suunatud skript kuvatakse ekraanil koheselt, ilma et algset HTML-faili puututaks.

Kuidas valida DOM-elemente JavaScript

enne JavaSkript saab lehel kõike muuta, kõigepealt tuleb valida sihtmärk. DOM pakub mitut valikumeetodit, millest igaüks sobib erinevate olukordade jaoks:

  • getElementById(): tagastab ühe elemendi, mis vastab antud väärtusele id atribuut.
  • getElementsByKlassiNimi(): tagastab iga elemendi reaalajas HTMLCollectioni, mis kannab antud klassi.
  • getElementsBySildiNimi(): tagastab iga antud sildinimega elemendi reaalajas HTMLCollectioni, näiteks p or li.
  • päringuValija(): tagastab esimese elemendi, mis sobib mis tahes CSS-selektoriga.
  • päringuValijaKõik(): tagastab iga CSS-i selektorile vastava elemendi staatilise NodeListi.

Allolev tabel võrdleb nelja kõige sagedamini kasutatavat valikumeetodit, et saaksite valida töö jaoks õige.

Meetod Tagastamine Kõige paremini kasutatud Millal
getElementById Üksik element Sa tead sihtmärgi täpset ja unikaalset ID-d.
getElementsByClassName Reaalajas HTML-kogu Teil on vaja, et igal elemendil oleks üks klassinimi.
querySelector Üksik element (esimene vaste) Sa tahad kasutada mis tahes CSS-i valijat, mitte ainult ID-d või klassi.
querySelectorAll Staatiline sõlmede loend Sa pead iga vaste üle käima forEach funktsiooniga.

querySelector ja querySelectorAll aktsepteerivad mis tahes kehtivat CSS-selektorit, mis teeb neist moodsa koodi jaoks kõige paindlikuma valiku. Proovige allolevat koodijuppi lehel, mis sisaldab elementi, millel on id="title" ja mitu elementi koos 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);

Lihtsate otsingute puhul on getElementById ja getElementsByClassName kiiremad, samas kui querySelector ja querySelectorAll on eelistatud alati, kui valikuloogika vajab täieliku CSS-süntaksi võimsust, näiteks atribuudi- või alam-selektorite puhul.

SEOTUD ARTIKLID

DOM-elementide muutmine, loomine ja eemaldamine

Kui element on valitud, JavaSkript saab lugeda või ümber kirjutada oma sisu, atribuute ja isegi oma olemasolu puus. DOM-i abil JavaSkript saab luua uusi elemente ja atribuute, muuta olemasolevaid elemente ja atribuute ning eemaldada olemasolevaid elemente ja atribuute täielikult.

Sisu muutmine getElementById ja innerHTML abil

  1. getElementById: juurdepääs elementidele ja atribuutidele, mille ID on määratud.
  2. innerHTML: elemendi sisule juurdepääsemiseks.

Proovige seda näidet ise:

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

Hoiatusaken kinnitab, et getElementById leidis pealkirja ja innerHTML tagastas selle sees salvestatud teksti.

Loe iga lõiku funktsiooniga getElementsByTagName

getElementsByTagName: elementidele ja atribuutidele juurdepääsuks märgendi nime abil. See meetod tagastab an massiivi kõigist sama sildinimega üksustest.

Proovige seda näidet ise:

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

Kuna getElementsByTagName tagastab reaalajas kogumi, viitab paragraphs[1] dokumendi teisele lõigule ja innerHTML-i värskendamine kirjutab selle teksti ekraanil kohe üle.

Elementide loomine ja eemaldamine funktsioonidega createElement ja removeChild

Lisaks lehel oleva muutmisele võimaldab DOM teil lisada uusi elemente või eemaldada olemasolevaid:

  • looElement(): loob mällu uue elemendisõlme.
  • lisaLapse(): lisab sõlme vanema elemendi viimase lapsena.
  • setAttribute(): lisab või värskendab atribuuti, näiteks class or href, elemendi peal.
  • eemaldaLaps(): eemaldab määratud lapsesõlme selle ülemsõlmest.

Allolev näide loob uue loendiüksuse, annab sellele teksti ja klassi, lisab selle olemasolevale loendile ja seejärel eemaldab samast loendist esimese üksuse:

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

Ainult funktsioon createElement() ei kuva midagi, kuna sõlm asub endiselt ainult mälus. See ilmub ainult siis, kui appendChild() või sarnane meetod, näiteks prepend(), lisab selle nähtava puu sisse. Kaasaegsed brauserid toetavad ka lühemat meetodit node.remove(), mis kustutab elemendi otse ilma ülemelemendile viitamata, erinevalt vanemast süntaksist parent.removeChild(node).

Kuidas sündmusi käsitleda JavaScript

Sündmus on iga toiming, mida brauser suudab tuvastada, näiteks klõps, klahvivajutus või lehe laadimine. Sündmusekäitleja saab konkreetsele elemendile lisada kahel peamisel viisil.

Ühenda käitleja onclicki või addEventListeneriga

Esimene, vanem lähenemisviis määrab funktsiooni otse elemendi sündmuse toimumise atribuudile:

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

VÕI, kasutades moodsat ja paindlikumat addEventListener() meetodit:

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

Funktsioon addEventListener() on üldiselt eelistatud, kuna see võimaldab teil samale sündmusele samal elemendil lisada mitu käitlejat ning aktsepteerib valikulist kolmandat argumenti, mis kontrollib jäädvustamist, mida käsitletakse selles jaotises hiljem. See toimib ka koos funktsiooniga removeEventListener(), mis eraldab käitleja, kui seda enam vaja pole, mida onclick omadus üksi teha ei saa.

HTML toetab ka kolmandat stiili: otse sildile kirjutatud tekstisisest käitlejat, näiteks <button onclick="clicked()">Click Me</button>Tekstisisesed käitlejad segavad märgistust loogikaga ja muutuvad kiiresti raskesti hooldatavaks, seega enamik JavaSkriptiarendajad reserveerivad need kiireteks demodeks ja toetuvad reaalsete rakenduste puhul funktsioonile addEventListener().

Proovi järele: Täieliku klõpsusündmuse näide

Proovige seda näidet ise:

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

Nupule klõpsamine käivitab funktsiooni clicked(), mis käivitab JavaSkripti teavitusaken, mis kinnitab sündmusekäitleja edukat käivitamist.

Sündmuse objekt

Iga sündmusekäitleja saab automaatselt esimese argumendina sündmuseobjekti. See objekt sisaldab kasulikku teavet toimunu kohta, sealhulgas event.target (täpne element, millelt toiming alguse sai), event.type (sündmuse nimi, näiteks „klõps”) ja meetodid, näiteks event.preventDefault(), mis peatab brauseri vaikekäitumise, näiteks lingile klõpsamise või vormi esitamise.

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

Sündmusobjekti täiendavad veel kaks omadust: event.currentTarget viitab alati elemendile, millega kuulaja on seotud, isegi kui event.target teatab pesastatud lapsest, ja event.stopPropagation() peatab sündmuse enne, kui see jätkab mullitamist või edasist jäädvustamist. Koos preventDefault()-ga annavad need tööriistad käitlejale täpse kontrolli edasise tegevuse üle.

sündmus Bubblvõtmine, jäädvustamine ja delegeerimine

Kui sündmus käivitub pesastatud elemendi puhul, siis see ei peatu seal. mullitama etapis liigub sündmus sihtelemendist ülespoole läbi iga eellase kuni dokumendini. jäädvustamine faasis, mis käivitub esimesena ja on valikuline, liigub sündmus enne mullide genereerimise algust hoopis dokumendist allapoole sihtkohta. {capture: true} kolmanda argumendina funktsioonile addEventListener() kuulamiseks jäädvustamise faasis.

Ürituse delegatsioon kasutab ära mullide tekitamist: igale alamelemendile eraldi kuulaja lisamise asemel lisate ühe kuulaja jagatud ülemelemendile ja kontrollite event.target faili, et teha kindlaks, milline alamelement selle käivitas. See kasutab vähem mälu ja katab automaatselt lehele hiljem lisatud elemendid.

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

Delegeerimine koos mullide jagamise ja jäädvustamise abil annab teile täpse kontrolli DOM-i ja sündmuste üle JavaSkript reageerib lehe interaktiivsemaks muutudes.

KKK

Ei. HTML on staatiline märgistus, mida brauser parsib, samas kui DOM on reaalajas mälus olev objektide puu, mis JavaSkripti saab pärast lehe laadimist lugeda ja muuta.

Eelista addEventListener(). See lubab ühel sündmusel mitut käitlejat, toetab jäädvustamise faasi ja ei kirjuta üle juba onclicki kaudu lisatud käitlejat.

Bubbling kannab sündmuse sihtelemendist üles dokumenti. Jäädvustamine toimub kõigepealt ja liigub vastassuunas, dokumendist alla sihtelemendi poole.

Jah. Assistendid nagu GitHubi koopia võimalik tracmiks käitleja kunagi ei käivitu, tuvastada puuduvad event.stopPropagation() päringud ja pakkuda välja dünaamiliste loendite delegeerimismustreid.

Jah. Tööriistad, näiteks ChatGPT ja GitHub Copilot saab lihtkeeles kirjeldusest luua createElement, querySelector ja addEventListener koodijuppe, kuigi väljund vajab ikkagi testimist.

Võta see postitus kokku järgmiselt: