DOM manipuláció, eseménykezelés, event delegation és hibakezelési minták (try/catch, Error típusok, async hibák).

DOM, események és hibakezelés

Ez az oldal a teljes jegyzet 14–15. fejezetének kivonata: böngésző DOM API‑k, események és hibakezelés.
Forrás: content/javascript/javascript-full.mdx.

1. DOM – a dokumentum objektum modell

DOM = a HTML programozható fa reprezentációja.

<!-- HTML -->
<div id="app">
  <h1 class="cim">Hello!</h1>
  <button id="gomb">Kattints!</button>
</div>

A böngésző ezt egy objektumfává alakítja, amit document‑en keresztül érhetsz el.

Elemek kiválasztása

// ID alapján – egyetlen elem
const app = document.getElementById("app");

// CSS selector – első egyezés
const cim = document.querySelector(".cim");
const gomb = document.querySelector("#gomb");

// CSS selector – összes egyezés
const gombok = document.querySelectorAll("button");
// NodeList – tömbszerű, de nem valódi Array

DOM manipuláció

const cim = document.querySelector(".cim");

// Tartalom
cim.textContent = "Új szöveg";             // sima szöveg
cim.innerHTML = "<strong>Félkövér</strong>"; // HTML‑lel

// Stílus
cim.style.color = "red";
cim.style.fontSize = "24px";

// Class‑ek
cim.classList.add("aktiv");
cim.classList.remove("rejtett");
cim.classList.toggle("nyitva");
cim.classList.contains("aktiv"); // true / false

// Attribútumok
cim.setAttribute("data-id", "123");
cim.getAttribute("data-id"); // "123"

Új elem létrehozása:

const uj = document.createElement("p");
uj.textContent = "Új bekezdés";

app.appendChild(uj); // szülő végére
app.prepend(uj);     // szülő elejére
cim.after(uj);       // adott elem után

2. Események (events)

Event listener hozzáadása / eltávolítása

const gomb = document.querySelector("#gomb");

// Névtelen függvénnyel
gomb.addEventListener("click", function(event) {
  console.log("Kattintás!", event);
});

// Arrow functionnel
gomb.addEventListener("click", (e) => {
  e.preventDefault();   // alapértelmezett viselkedés tiltása
  e.stopPropagation();  // event buborékzás megállítása
  console.log("Kattintva!");
});

Eltávolítás:

function kezelo() {
  console.log("Kattintás");
}

gomb.addEventListener("click", kezelo);
gomb.removeEventListener("click", kezelo); // ugyanazzal a referenciával

Event delegation – hatékony minta listákhoz

Nem minden egyes elemre teszel külön listener‑t, hanem a szülő figyel, és az event.target alapján döntesz:

const lista = document.querySelector("ul");

lista.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Listaelemre kattintottál:", e.target.textContent);
  }
});

Előnyök:

kevesebb event listener (jobb teljesítmény),
dinamikusan hozzáadott elemekre is működik.

3. Hibakezelés – `try` / `catch` / `finally`

Alap struktúra:

try {
  // Kód, ami hibát dobhat
  const eredmeny = JSON.parse("nem valid JSON");
  console.log(eredmeny);
} catch (hiba) {
  // Ha bármi hiba történik fent
  console.error("Hiba történt:", hiba.message);
} finally {
  // Mindig lefut – akár volt hiba, akár nem
  console.log("Mindig lefut");
}

Error objektum és típusok

try {
  throw new Error("Saját hiba");
} catch (hiba) {
  console.log(hiba.name);    // "Error"
  console.log(hiba.message); // "Saját hiba"
  console.log(hiba.stack);   // stack trace
}

Beépített error típusok:

throw new TypeError("Helytelen típus");
throw new RangeError("Érték tartományon kívül");
throw new ReferenceError("Nem létező változó");

Saját error osztály:

class ValidationError extends Error {
  constructor(message, mezo) {
    super(message);
    this.name = "ValidationError";
    this.mezo = mezo;
  }
}

throw new ValidationError("Kötelező mező", "email");

Hibakezelés `async/await`‑tel

async function adatLetoltes() {
  try {
    const valasz = await fetch("/api/adatok");

    if (!valasz.ok) {
      throw new Error(`HTTP hiba: ${valasz.status}`);
    }

    const adatok = await valasz.json();
    return adatok;
  } catch (hiba) {
    if (hiba instanceof TypeError) {
      console.error("Hálózati hiba – nincs kapcsolat");
    } else {
      console.error("Ismeretlen hiba:", hiba.message);
    }
    throw hiba; // ha tovább akarod dobni
  }
}

Minták:

try/catch blokkon belül await‑elsz minden Promise‑t,
if (!res.ok) után saját hibát dobsz,
instanceof‑fal különböző hibatípusokra más reakció.

Összefoglaló – DOM + hibakezelés

DOM:
- querySelector / querySelectorAll → modern kiválasztás,
- textContent, innerHTML, classList, style → alap manipuláció,
- createElement + appendChild / after → új elemek hozzáadása.
Eventek:
- addEventListener / removeEventListener,
- preventDefault + stopPropagation,
- event delegation nagy listákhoz / dinamikus elemekhez.
Hibakezelés:
- try/catch/finally szinkron és async/await kódhoz,
- beépített Error típusok és saját error osztályok,
- HTTP hibákhoz explicit !res.ok ellenőrzés + throw.

Következő oldal:
Tipikus hibák és best practice-ek →

DOM, események és hibakezelés

On this page