Javascript: DOM, eseménykezelés

A HTML DOM (Document Object Model) egy programozási interfész, amelyet weboldalak felépítésének és tartalmának reprezentálására használnak. Lehetővé teszi a webfejlesztők számára, hogy dinamikusan manipulálják és módosítsák a weboldal tartalmát és kinézetét. A HTML DOM az oldal elemeit fastruktúrába szervezi, amelyet a weboldal kódja alapján hoz létre. Minden HTML elem, például fejléc, szöveg, képek, űrlapok, hivatkozások stb., a DOM-ban egy objektumként jelenik meg. Ezeket az objektumokat JavaScript segítségével könnyen elérhetjük és manipulálhatjuk. Például változtathatjuk az elemek tartalmát, stílusát, hozzáadhatunk vagy eltávolíthatunk elemeket, kezelhetjük eseményeket stb.

Nézzük meg hogyan lehet JS függvényekkel kezelni a html objektumokat. Hogyan azonosíthatóak a html elemek?

getElementById: Ez a DOM módszer az elemek egyedi azonosítójára támaszkodik.

let elem = document.getElementById("myElementId");

1	let elem = document.getElementById("myElementId");

getElementsByClassName: Ezzel a módszerrel az elemeket egy adott osztály neve alapján lehet megtalálni. A html oldalon az összes olyan elem, amely ugyanazon osztályhoz tartozik, html collection-t ad vissza. A html collection indexelhető, és for ciklussal bejárható.

let elemek = document.getElementsByClassName("pelda");
let elsoElem = elemek[0]; // Az első találat

// for ciklussal bejárható
for (let i = 0; i < elemek.length; i++) {
    console.log(elemek[i].textContent);
}
// for... of ami az újabb lehetőség
for (let elem of elemek) {
    console.log(elem.textContent);
}

let elemek = document.getElementsByClassName("pelda");

let elsoElem = elemek[0]; // Az első találat

// for ciklussal bejárható

for (let i = 0; i < elemek.length; i++) {

console.log(elemek[i].textContent);

}

// for... of ami az újabb lehetőség

for (let elem of elemek) {

console.log(elem.textContent);

}

getElementsByTagName: Ezzel a módszerrel az elemeket HTML címkéjük (például <div>,<p>) alapján találja meg. Szintén html collection, tehát indexelhető, for vagy for..of ciklussal bejárható.

let bekezdesek= document.getElementsByTagName("p");
let elso = bekezdesek[0];
console.log(elso.textContent);
// for ciklussal bejárható 
for (let i = 0; i < bekezdesek.length; i++) {
    console.log(bekezdesek[i].textContent);
}
// for .. of az újabb lehetőség
for (let elem of bekezdesek) {
    console.log(elem.textContent);
}

let bekezdesek= document.getElementsByTagName("p");

let elso = bekezdesek[0];

console.log(elso.textContent);

// for ciklussal bejárható

for (let i = 0; i < bekezdesek.length; i++) {

console.log(bekezdesek[i].textContent);

}

// for .. of az újabb lehetőség

for (let elem of bekezdesek) {

console.log(elem.textContent);

}

querySelector és querySelectorAll: Ezek a módszerek lehetővé teszik CSS szelektorok használatát az elemek keresésére. A querySelector az első talált elemet adja vissza, míg a querySelectorAll az összes találatot NodeList-ként adja vissza. A querySelectorAll által visszaadott nodelist indexelhető, bejárható for, for..of és foreach ciklussal.

let elsoBekezdes = document.querySelector("p"); // Az első <p> elem
console.log(elsoBekezdes .textContent);

let elemek = document.querySelectorAll(".pelda"); // minden .pelda osztályú elem

// Indexelés
console.log(elemek[0].textContent);

// for ciklus
for (let i = 0; i < elemek.length; i++) {
    console.log(elemek[i].textContent);
}

// for...of ciklus
for (let elem of elemek) {
    console.log(elem.textContent);
}

// forEach ciklus
elemek.forEach(elem => {
    console.log(elem.textContent);
});

let elsoBekezdes = document.querySelector("p"); // Az első <p> elem

console.log(elsoBekezdes .textContent);

let elemek = document.querySelectorAll(".pelda"); // minden .pelda osztályú elem

// Indexelés

console.log(elemek[0].textContent);

// for ciklus

for (let i = 0; i < elemek.length; i++) {

console.log(elemek[i].textContent);

}

// for...of ciklus

for (let elem of elemek) {

console.log(elem.textContent);

}

// forEach ciklus

elemek.forEach(elem => {

console.log(elem.textContent);

});

Meg kell még említeni az Array.from() függvényt is, ami a html collectiont vagy a node listet tömbbé tudja alakítani. Ha már tömb, akkor az összes tömb művelet elvégezhető rajtuk.

let elemek = document.getElementsByClassName("pelda");

// Ez még nem tömb, nincs rajta pl. map, filter
console.log(typeof elemek); // object

let tomb = Array.from(elemek);

// Most már használhatsz minden tömbös műveletet
tomb.forEach(e => console.log(e.textContent));

let elemek = document.getElementsByClassName("pelda");

// Ez még nem tömb, nincs rajta pl. map, filter

console.log(typeof elemek); // object

let tomb = Array.from(elemek);

// Most már használhatsz minden tömbös műveletet

tomb.forEach(e => console.log(e.textContent));

HTML elemek módosítása

Tartalom módosítása:

Az elem tartalmának módosításához az adott elem innerHTML vagy textContent tulajdonságát módosíthatjuk:

var elem = document.getElementById("myElementId");
elem.innerHTML = "Új tartalom"; // HTML-t is tartalmazhat
// vagy
elem.textContent = "Új szöveg tartalom";

Attribútumok módosítása:

Az elem attribútumainak módosításához a setAttribute és getAttribute metódusokat használhatjuk:

var link = document.getElementById("myLink");
link.setAttribute("href", "új-link-cím");
var href = link.getAttribute("href");

Stílus módosítása:

Az elemek stílusát a style tulajdonságon keresztül módosíthatjuk. Ebben az esetben a CSS tulajdonságokat és értékeiket a JavaScript objektumként kezeljük.

var elem = document.getElementById("myElementId");
elem.style.color = "red";
elem.style.backgroundColor = "yellow";

Elemek hozzáadása és eltávolítása:

Új elemeket hozzáadhatunk az oldalhoz, vagy meglévő elemeket eltávolíthatunk. Például a createElement, appendChild és removeChild metódusok használhatók. A createElement létrehozza az elemet, ennek még célszerű tartalmat is adni (innerText, innerHTML, textContent). Utána az appendChild segítségével hozzá tudjuk adni a szükő elemhez. A removeChild segítségével el tudunk távolítani egy elemet. Lehetőség van még elemek cseréjére is a replaceChild segítségével.

let newDiv = document.createElement("div");
newDiv.textContent = "Új div elem";
document.body.appendChild(newDiv); // Az új elemet a dokumentumhoz adja

let newDiv = document.createElement("div");

newDiv.textContent = "Új div elem";

document.body.appendChild(newDiv); // Az új elemet a dokumentumhoz adja

Nézzünk egy példát ezek használatára! (createElement, appendChild , removeChild , replaceChild)

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <title>DOM Műveletek Példa</title>
  <style>
    #tarolo {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 1em;
    }
    .doboz {
      padding: 8px;
      margin: 5px;
      background: lightblue;
    }
  </style>
</head>
<body>

<h2>DOM műveletek – createElement, appendChild, removeChild, replaceChild</h2>

<div id="tarolo">
  <div id="regiElem" class="doboz">Ez a régi elem</div>
</div>

<button onclick="hozzaad()">Elem hozzáadása</button>
<button onclick="torles()">Elem törlése</button>
<button onclick="csere()">Elem cseréje</button>

<script>
  function hozzaad() {
    const ujElem = document.createElement("div"); // createElement
    ujElem.textContent = "Új hozzáadott elem!";
    ujElem.className = "doboz";

    document.getElementById("tarolo").appendChild(ujElem); // appendChild
  }

  function torles() {
    const tarolo = document.getElementById("tarolo");
    const elsoElem = tarolo.querySelector(".doboz");

    if (elsoElem) {
      tarolo.removeChild(elsoElem); // removeChild
    }
  }

  function csere() {
    const tarolo = document.getElementById("tarolo");
    const regi = document.getElementById("regiElem");

    if (regi) {
      const uj = document.createElement("div");
      uj.textContent = "Új elem a rég helyett!";
      uj.className = "doboz";
      tarolo.replaceChild(uj, regi); // replaceChild
    }
  }
</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>DOM Műveletek Példa</title>

<style>

#tarolo {

border: 1px solid #ccc;

padding: 10px;

margin-bottom: 1em;

}

.doboz {

padding: 8px;

margin: 5px;

background: lightblue;

}

</style>

</head>

<body>

<h2>DOM műveletek – createElement, appendChild, removeChild, replaceChild</h2>

</div>

<button onclick="hozzaad()">Elem hozzáadása</button>

<button onclick="torles()">Elem törlése</button>

<button onclick="csere()">Elem cseréje</button>

function hozzaad() {

const ujElem = document.createElement("div"); // createElement

ujElem.textContent = "Új hozzáadott elem!";

ujElem.className = "doboz";

document.getElementById("tarolo").appendChild(ujElem); // appendChild

}

function torles() {

const tarolo = document.getElementById("tarolo");

const elsoElem = tarolo.querySelector(".doboz");

if (elsoElem) {

tarolo.removeChild(elsoElem); // removeChild

}

function csere() {

const tarolo = document.getElementById("tarolo");

const regi = document.getElementById("regiElem");

if (regi) {

const uj = document.createElement("div");

uj.textContent = "Új elem a rég helyett!";

uj.className = "doboz";

tarolo.replaceChild(uj, regi); // replaceChild

}

</script>

</body>

</html>

Eseménykezelő hozzáadása:

Az elemekhez eseménykezelők hozzáadásával reagálhatunk a felhasználói interakciókra.

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Gombra kattintva!");
});

Példa:

Készíts JS programot! Az ‘elso’ nevű függvény hozzon létre egy 10 elemű tömböt, random 1-50 közötti számmal! A számokat írja ki egy div-be! A ‘masodik’ nevű függvény számolja ki minden tömbelemnek a dupláját, és írja ki egy másik div-be! Ez a függvény akkor fusson le, ha az eslő div-en duplán kattintunk!
Formázd meg a 2db divet tetszőlegesen! A 2. div csak akkor jelenjen meg, amikor az elsőn duplán kattintunk!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS függvények</title>
    <style>
        #tomb{
            background-color: antiquewhite;
            box-shadow: 5 5 5 back;
            border-radius: 10px;
            height: 50px;
            width: auto;
            padding: 10px;
        }
        #tombKetszerese{            
            background-color: rgb(101, 250, 121);
            box-shadow: 5 5 5 back;
            border-radius: 10px;
            height: 50px;
            width: auto;
            padding: 10px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="tomb" ondblclick="masodik(randomTomb);"></div>
    <div id="tombKetszerese"></div>
    <script>
        // Az első függvény, amely létrehoz egy 10 elemű tömböt véletlenszerű számokkal.
        function elso() {
            const randomTomb = [];
            for (let i = 0; i < 10; i++) {
                const veletlenszam = Math.floor(Math.random() * 50) + 1;
                randomTomb.push(veletlenszam);
            }
            return randomTomb;
        }
        // A második függvény, amely kiszámolja minden tömbelem dupláját és kiírja egy div-be.
        function masodik(array) {
            const tomb_duplaja = array.map(number => number * 2);
            const duplaDiv = document.getElementById('tombKetszerese');
            duplaDiv.style.visibility = "visible";            
            duplaDiv.innerHTML = `A tömb elemeinek duplája: ${tomb_duplaja.join(', ') }`;
        }
        // létrehozzuk a tömböt
        const randomTomb = elso();
        // kiírjuk az eredeti tömb elemeit egy div-be
        const tombDiv = document.getElementById('tomb');
        tombDiv.innerHTML = `Eredeti tömb: ${randomTomb.join(', ')}`;
        
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS függvények</title>

<style>

#tomb{

background-color: antiquewhite;

box-shadow: 5 5 5 back;

border-radius: 10px;

height: 50px;

width: auto;

padding: 10px;

}

#tombKetszerese{

background-color: rgb(101, 250, 121);

box-shadow: 5 5 5 back;

border-radius: 10px;

height: 50px;

width: auto;

padding: 10px;

visibility: hidden;

}

</style>

</head>

<body>

// Az első függvény, amely létrehoz egy 10 elemű tömböt véletlenszerű számokkal.

function elso() {

const randomTomb = [];

for (let i = 0; i < 10; i++) {

const veletlenszam = Math.floor(Math.random() * 50) + 1;

randomTomb.push(veletlenszam);

}

return randomTomb;

}

// A második függvény, amely kiszámolja minden tömbelem dupláját és kiírja egy div-be.

function masodik(array) {

const tomb_duplaja = array.map(number => number * 2);

const duplaDiv = document.getElementById('tombKetszerese');

duplaDiv.style.visibility = "visible";

duplaDiv.innerHTML = `A tömb elemeinek duplája: ${tomb_duplaja.join(', ') }`;

}

// létrehozzuk a tömböt

const randomTomb = elso();

// kiírjuk az eredeti tömb elemeit egy div-be

const tombDiv = document.getElementById('tomb');

tombDiv.innerHTML = `Eredeti tömb: ${randomTomb.join(', ')}`;

</script>

</body>

</html>

Készíts űrlapot, ami kiszámolja egy szám négyzetét onfocusout eseményre!
Ha írunk a szövegbeviteli mezőbe (onfocus), legyen az input mező háttere zöld! Az eredményt egy div-be írja ki a program.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS eseménykezelés</title>
</head>
<body>
    <script>
        function szamit() {
            // Szövegbeviteli mezőből kinyerjük a számot
            let bevitelimezo = document.getElementById("szam_input");
            let szam = parseFloat(bevitelimezo.value);
            if (!isNaN(szam)) {
                // Szám négyzetének kiszámítása
                let eredmeny = szam * szam;
                // Eredmény kiírása
                let eredmeny_mezo = document.getElementById("eredmenydiv");
                eredmeny_mezo.innerHTML = "A szám négyzete: " + eredmeny;
            }
        }        
        function hattervalt() {
            let bevitelimezo = document.getElementById("szam_input");
            bevitelimezo.style.backgroundColor = "green";
        }
    </script>
    <h1>Számnégyzet kalkulátor</h1>
    <form>
        <label for="numberInput">Szám:</label>
        <input type="text" id="szam_input" onfocus="hattervalt()" onfocusout="szamit()">
    </form>
    <div id="eredmenydiv"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS eseménykezelés</title>

</head>

<body>

function szamit() {

// Szövegbeviteli mezőből kinyerjük a számot

let bevitelimezo = document.getElementById("szam_input");

let szam = parseFloat(bevitelimezo.value);

if (!isNaN(szam)) {

// Szám négyzetének kiszámítása

let eredmeny = szam * szam;

// Eredmény kiírása

let eredmeny_mezo = document.getElementById("eredmenydiv");

eredmeny_mezo.innerHTML = "A szám négyzete: " + eredmeny;

}

function hattervalt() {

let bevitelimezo = document.getElementById("szam_input");

bevitelimezo.style.backgroundColor = "green";

}

</script>

<h1>Számnégyzet kalkulátor</h1>

<form>

</form>

</body>

</html>

Készíts egy divet, és animáld! Használd az animationstart, animationiteration, animationend eseményeket! Az animáció indulásánál írasd ki az ‘animáció elindult!’ szöveget! A végén az ‘Animáció befejeződött!’ szöveget!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS eseménykezelés</title>
    <style>
        #animatedDiv {
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            animation: moveRightLeft 2s ease-in-out 2;
        }
        @keyframes moveRightLeft {
            0% {
                left: 0;
            }
            50% {
                left: 100px;
            }
            100% {
                left: 0;
            }            
        }
    </style>
</head>
<body>
    <div id="animatedDiv" 
    onanimationstart="animationStartHandler(event)"
    onanimationiteration="animationIterationHandler(event)"
    onanimationend="animationEndHandler(event)">
</div>
<script>
   function animationStartHandler(event) {
       console.log("Animáció elindult!");
   }
   let db = 1;
   function animationIterationHandler(event) {
       db++;
       console.log("Animáció ismétlődik " + db + ". alkalommal.");
   }   
   function animationEndHandler(event) {
       console.log("Animáció befejeződött!");
   }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS eseménykezelés</title>

<style>

#animatedDiv {

width: 50px;

height: 50px;

background-color: red;

position: relative;

animation: moveRightLeft 2s ease-in-out 2;

}

@keyframes moveRightLeft {

0% {

left: 0;

}

50% {

left: 100px;

}

100% {

left: 0;

}

</style>

</head>

<body>

<div id="animatedDiv"

onanimationstart="animationStartHandler(event)"

onanimationiteration="animationIterationHandler(event)"

onanimationend="animationEndHandler(event)">

</div>

function animationStartHandler(event) {

console.log("Animáció elindult!");

}

let db = 1;

function animationIterationHandler(event) {

db++;

console.log("Animáció ismétlődik " + db + ". alkalommal.");

}

function animationEndHandler(event) {

console.log("Animáció befejeződött!");

}

</script>

</body>

</html>

HTML elemek azonosítása – Összefoglaló táblázat

Függvény / tulajdonság	Mire való?	Visszatérési típus	Példa
`getElementById(id)`	Egyetlen elem azonosító (`id`) alapján	`Element` vagy `null`	`document.getElementById("doboz")`
`getElementsByTagName(tag)`	Minden elem, adott HTML címkével (pl. `div`, `p`)	`HTMLCollection`	`document.getElementsByTagName("p")`
`getElementsByClassName(cls)`	Minden elem adott osztálynévvel	`HTMLCollection`	`document.getElementsByClassName("aktiv")`
`querySelector(selector)`	Első elem, ami illik a CSS szelektorra	`Element` vagy `null`	`document.querySelector(".menu li.active")`
`querySelectorAll(selector)`	Minden elem, ami illik a CSS szelektorra	`NodeList`	`document.querySelectorAll("ul > li")`

A getElementsByTagName és getElementsByClassName esetén automatikusan frissül a gyűjtemény. A többinél újra le kell kérni a DOM-ot, ha van bármi változás.

DOM Navigáció – Összefoglaló

Metódus / Tulajdonság	Mire való?	Típus	Példa

element.closest(selector) Megkeresi a legközelebbi szülőt vagy saját magát, ami illik a szelektorra. Element vagy null elem.closest(".doboz")

element.matches(selector) Megnézi, hogy az elem illeszkedik-e a szelektorra. boolean elem.matches(".kiemelt")

element.children Az elem közvetlen gyerekeinek listája. Csak elemek (nincs szöveg/címke). HTMLCollection elem.children[0]

element.parentElement Az elem közvetlen szülője (csak ha az is egy Element). Element vagy null elem.parentElement

element.nextElementSibling A következő testvér elem (szintén csak elem, nem szöveg). Element vagy null elem.nextElementSibling

element.previousElementSibling Az előző testvér elem. Element vagy null elem.previousElementSibling

element.firstElementChild Az első gyerek elem. Element vagy null elem.children[0]-hoz hasonló

element.lastElementChild Az utolsó gyerek elem. Element vagy null —

element.childNodes Az összes gyerek node (szöveg, komment, elem is). NodeList Ha kell szöveg/címke is

element.parentNode Ugyanaz mint parentElement, de Node típust is visszaadhat. Node vagy null Ritkábban használt

element.previousSibling / nextSibling Előző/következő minden típusú node (nem csak element). Node Tartalmazhat szöveget, kommentet stb.

Javascript: DOM, eseménykezelés

HTML elemek módosítása

Tartalom módosítása:

Attribútumok módosítása:

Stílus módosítása:

Elemek hozzáadása és eltávolítása:

Eseménykezelő hozzáadása:

HTML elemek azonosítása – Összefoglaló táblázat

DOM Navigáció – Összefoglaló

Kategóriák

Friss bejegyzések

WS2022 – WDS

Playwright teszt