JavaScript DOM bemutatója példával

Miben van a DOM? JavaForgatókönyv?

JavaA szkriptek a dokumentumobjektum-modell (DOM) használatával hozzáférhetnek egy weboldal összes eleméhez. Valójában a webböngésző létrehozza a weboldal DOM-ját, amikor az oldal betöltődik. A DOM modell objektumok fájaként jön létre, mint ez:

Egy oldalon található minden HTML-elem csomóponttá válik ezen a fán belül. A böngészők a DOM-csomópontokat néhány alapvető típusba csoportosítják: az elemcsomópontok olyan címkéket jelölnek, mint például <p> or <div>, a szöveges csomópontok a címkén belüli látható szavakat tárolják, az attribútumcsomópontok pedig olyan értékeket tárolnak, mint például id or class, és a megjegyzéscsomópontok megőrzik <!-- --> jelölés. A legfelső csomópont mindig a document objektum, és minden más elem annak leszármazottja.

A DOM használatával JavaForgatókönyv Több feladatot is képes végrehajtani. Létrehozhat új elemeket és attribútumokat, módosíthatja a meglévő elemeket és attribútumokat, sőt, akár el is távolíthatja a meglévő elemeket és attribútumokat. JavaA szkriptek képesek reagálni a meglévő eseményekre, és új eseményeket létrehozni az oldalon. Az alábbi szakaszok gyakorlati, futtatható példákkal mutatják be az elemek kiválasztását, módosítását és az eseménykezelők beállítását.

Érdemes megjegyezni, hogy a DOM nem ugyanaz, mint a HTML forrásfájl. A böngésző által letöltött HTML statikus szöveg, de a szövegből felépített DOM egy élő, dinamikus objektummodell. Bármilyen változás... JavaA DOM-nak küldött szkript azonnal megjelenik a képernyőn anélkül, hogy az eredeti HTML-fájlt megérintenék.

DOM elemek kiválasztása JavaForgatókönyv

Előtt JavaEgy szkript bármit megváltoztathat egy oldalon, először ki kell választania a célcsomópontot. A DOM számos kiválasztó metódust biztosít, amelyek mindegyike más-más helyzetekhez igazodik:

• getElementById(): visszaadja azt az egyetlen elemet, amely illeszkedik egy adott elemhez id tulajdonság.
• getElementsByClassName(): egy élő HTMLCollection-t ad vissza minden olyan elemről, amely egy adott osztályt hordoz.
• getElementsByTagName(): egy élő HTMLCollection-t ad vissza minden adott tagnévvel rendelkező elemről, például p or li.
• lekérdezésválasztó(): visszaadja az első olyan elemet, amely illeszkedik bármely CSS szelektorhoz.
• lekérdezésválasztó(): egy statikus NodeList-et ad vissza minden olyan elemről, amely illeszkedik egy CSS szelektorra.

Az alábbi táblázat összehasonlítja a négy leggyakrabban használt kiválasztási módszert, így kiválaszthatja a munkához megfelelőt.

A querySelector és a querySelectorAll bármilyen érvényes CSS-szelektort elfogad, ami a modern kód legrugalmasabb választásává teszi őket. Próbálja ki az alábbi kódrészletet egy olyan oldalon, amely egy olyan elemet tartalmaz, amely a következővel rendelkezik: id="title" és számos elemmel 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);

A getElementById és a getElementsByClassName metódusok gyorsabbak maradnak az egyszerű kereséseknél, míg a querySelector és a querySelectorAll metódusokat akkor részesítjük előnyben, ha a kiválasztási logikának a teljes CSS szintaxis erejére van szüksége, például attribútum- vagy leszármazott-szelektorok esetén.

DOM elemek módosítása, létrehozása és eltávolítása

Miután kiválasztottunk egy elemet, JavaA szkript képes olvasni vagy átírni a tartalmát, attribútumait, sőt még a fában való létezését is. A DOM használatával JavaA szkriptek létrehozhatnak új elemeket és attribútumokat, módosíthatják a meglévő elemeket és attribútumokat, valamint teljesen eltávolíthatják a meglévő elemeket és attribútumokat.

Tartalom módosítása a getElementById és az innerHTML használatával

1. getElementById: Elemekhez és attribútumokhoz való hozzáférés, amelyek azonosítója be van állítva.
2. innerHTML: Egy elem tartalmának elérése.

Próbáld ki ezt a példát magad is:

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

A riasztási ablak megerősíti, hogy a getElementById megtalálta a címsort, és az innerHTML visszaadta a benne tárolt szöveget.

Minden bekezdés felolvasása a getElementsByTagName függvénnyel

getElementsByTagName: Elemek és attribútumok elérése a címkenév használatával. Ez a metódus egy sor az azonos címkenévvel rendelkező elemek közül.

Próbáld ki ezt a példát magad is:

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

Mivel a getElementsByTagName egy élő gyűjteményt ad vissza, a paragraphs[1] a dokumentum második bekezdésére hivatkozik, és az innerHTML frissítése azonnal felülírja a szövegét a képernyőn.

Elemek létrehozása és eltávolítása a createElement és a removeChild metódusokkal

A DOM a lapon lévő elemek módosítása mellett lehetővé teszi vadonatúj elemek hozzáadását vagy a meglévők eltávolítását is:

• createElement(): egy új elemcsomópontot hoz létre a memóriában.
• appendChild(): egy csomópontot csatol egy szülő elem utolsó gyermekeként.
• setAttribute(): hozzáad vagy frissít egy attribútumot, például class or href, egy elemen.
• removeChild(): eltávolít egy megadott gyermekcsomópontot a szülőcsomópontról.

Az alábbi példa létrehoz egy új listaelemet, szöveget és osztályt ad neki, hozzáfűzi egy meglévő listához, majd eltávolítja az első elemet ugyanabból a listából:

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

A createElement() önmagában nem jelenít meg semmit, mivel a csomópont továbbra is csak a memóriában létezik. Csak akkor jelenik meg, ha az appendChild() vagy egy hasonló metódus, például a prepend() csatolja azt a látható fán belül valahova. A modern böngészők egy rövidebb node.remove() metódust is támogatnak, amely közvetlenül töröl egy elemet anélkül, hogy hivatkozásra lenne szükség a szülőjére, ellentétben a régebbi parent.removeChild(node) szintaxissal.

Hogyan kezeljük az eseményeket JavaForgatókönyv

Az esemény minden olyan művelet, amelyet a böngésző képes érzékelni, például egy kattintás, egy billentyűleütés vagy egy oldal betöltése. Két fő módon adhatunk hozzá eseménykezelőt egy adott elemhez.

Kezelő csatolása onclick vagy addEventListener használatával

Az első, régebbi megközelítés egy függvényt közvetlenül egy elem on-event tulajdonságához rendel:

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

VAGY, a modern és rugalmasabb addEventListener() metódus használatával:

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

Az addEventListener() tulajdonságot általában azért részesítik előnyben, mert lehetővé teszi több kezelő csatolását ugyanahhoz az eseményhez ugyanazon az elemen, és elfogad egy opcionális harmadik argumentumot is, amely a rögzítést vezérli, amiről ebben a szakaszban később lesz szó. A removeEventListener() tulajdonsággal is párosul, amely leválasztja a kezelőt, amikor már nincs rá szükség, amit az onclick tulajdonság önmagában nem tud megtenni.

A HTML egy harmadik stílust is támogat: egy közvetlenül a címkére írt beágyazott kezelőt, például <button onclick="clicked()">Click Me</button>A soron belüli kezelők keverik a jelölést a logikával, és gyorsan nehezen karbantarthatókká válnak, így a legtöbb JavaA szkriptfejlesztők gyors demókra tartják fenn őket, és valós alkalmazásokhoz az addEventListener() függvényre támaszkodnak.

Próbálja ki: Egy teljes kattintási eseményre vonatkozó példa

Próbáld ki ezt a példát magad is:

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

A gombra kattintva elindul a clicked() függvény, amely egy JavaSzkript riasztási ablak, amely megerősíti az eseménykezelő sikeres lefutását.

Az eseményobjektum

Minden eseménykezelő automatikusan kap egy eseményobjektumot első argumentumként. Ez az objektum hasznos részleteket tartalmaz a történtekről, beleértve az event.target-et (a művelet pontos elemét), az event.type-ot (az esemény nevét, például „kattintás”), valamint olyan metódusokat, mint az event.preventDefault(), amely leállítja a böngésző alapértelmezett viselkedését, például egy hivatkozás követését vagy egy űrlap elküldését.

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

Két további tulajdonság teszi teljessé az eseményobjektumot: event.currentTarget mindig arra az elemre hivatkozik, amelyhez a figyelő kapcsolódik, még akkor is, ha az event.target beágyazott gyermeket jelent, és az event.stopPropagation() leállítja az eseményt, mielőtt az folytatná a buborékolást vagy a rögzítést. A preventDefault()-tal együtt ezek az eszközök pontos vezérlést biztosítanak a kezelőnek a további események felett.

esemény Bubbling, Rögzítés és Delegálás

Amikor egy esemény egy beágyazott elemen aktiválódik, az nem áll meg ott. pezseg fázisban az esemény felfelé halad a célelemtől az egyes ősein keresztül egészen a dokumentumig. A befogó Az elsőként lefutó és választható fázisban az esemény ehelyett lefelé halad a dokumentumtól a célpontig, mielőtt megkezdődne a buborékolás. {capture: true} harmadik argumentumaként az addEventListener() függvénynek a rögzítési fázisban való figyeléshez.

Esemény delegáció kihasználja a buborékolás előnyeit: ahelyett, hogy minden gyermekelemhez külön figyelőt csatolna, egy figyelőt csatol egy megosztott szülőhöz, és megvizsgálja az event.target fájlt, hogy meghatározza, melyik gyermek aktiválta azt. Ez kevesebb memóriát használ, és automatikusan lefedi a később az oldalhoz hozzáadott elemeket.

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

A delegálás, a buborékolás és a rögzítés mellett, részletes irányítást biztosít a DOM és az események felett a JavaA szkriptek reagálnak, ahogy az oldal interaktívabbá válik.

GYIK