Document Object Model #

A DOM egy olyan API ami leírja nekünk a HTML olalunkat ES-ben egy objectként. Ezen az objektumon keresztül tudjuk az oldalunkat elérni, bejárni és módosítani.

Amit kapunk azok a különböző elemek (Elements) és a Node-ok lesznek amikkel dolgozni tudunk.

Az elemek a tényleges HTML tag-ek alapján készülnek el, míg a node-ba a különböző szöveges tartalmak is beleszólnak.

<p>Hello
<li>Mom
<li>and
<li>Dad

Elemek kiválasztása #

Az elemeket elérhetjük különböző tulajdonságaik alapján, mint például osztály vagy azonosító.

const keresettID = "section-4";
const keresettOsztaly = "text-mute";
const keresettTag = "h1";

let elem1 = document.getElementById(keresettID);

let elemek2 = document.getElementsByClassName(keresettOsztaly);

let elemek3 = document.getElementsByTagName(keresettTag);

Azonban van egy egyszerűbb mód is, amivel a CSS selectorok segítségével tudjuk a megfelelő elemet lekérdezni. Ez azonban nagyobb kódban lassabb ez a megoldás.

const egyediCSS = "h1#main-title";
const tobbszorosCSS = ".btn.btn-primary";

let elem4 = document.querySelector(egyediCSS);

let elemek5 = document.querySelectorAll(tobbszorosCSS);

Attribútumok kezelése #

A leggyakoribb attribútumokat közvetlenül tudjuk kezelni.

elem.id = "";
image.src = "";

Azonban előfrdulhat olyan egyéni attribútum melyet nem tudunk így megadni, ilyenkor a következőképpen tudjuk állítani vagy lekérdezni ezeket:

elem.setAttribute("lang","HU-hu")

elem.getAttribute("lang")

Stílusok esetében át kell írni a CSS stílusról ES-re. Tehát a kötőjeleket eltávolítva, minden új szó kezdő betűje nagy.

elem.style.backgroundColor = "#ffaadd";

Az osztályok kezelése egy kicsit trükkösebb azonban

elemek.classList.add("d-block")
elemek.classList.remove("d-none")
elemek.classList.replace("d-none","d-block")

Csere esetén mindig azt adjuk meg, hogy mit és mire cserélünk.

Elemek létrehozása és csatolása #

Az objektumunknak van egy speciális függvénye, ami egy HTML elemet tud létrehozni, éppen ezért paraméternek mindig egy HTML tag elnevezését kapja meg.

const ujBekezd = document.createElement("p");

Hozzáfűzni bármelyik elemhez tudunk a végére az append valamint az elejére a prepend függvényen keresztül, ahol vesszővel vagy kibontott listával több elemet is hozzá tudunk adni gyerekként.

document.body.append(ujBekezd);

const elemek = [.....];
document.body.append(...elemek);

Elemek körbejárása #

Node-okkal #

Képesek vagyunk egy elemet úgy körbejárni, hogy az különböző node-okat is belevesszük az elemek közé. Ekkor a szülő és a gyerekek esetén egyszerű a történet, ugyanis megjelöljük, hogy node-ról van szó.

const parent = elem.parentNode;
const childen = elem.childNodes;

Amikor azonban a szomszédokat kérdezzük le, akkor már nem ennyire egyszerű a feladatunk. Itt már nem fog utalni semmi arra, hogy node is lehet a szomszéd. Pedig nagy valószínűséggel a szomszéd elem helyett egy #text node-ot fogunk magunk mellett találni.

const previous = elem.previousSibling;
const next = elem.nextSibling;

Ugyanígy, ha az első és utolsó gyereket szeretnénk megkapni, akkor a gyerekekkel szemben itt sem jelöljük meg.

const firstChild = elem.firstChild;
const lastChild = ele.lastChild;

Csak elemekkel #

Ha csak a HTML tagek alapján létrehozott elemekről van szó, akkor már sokkal egyszerűbb dolgunk van, ugyanis a gyereken kívül mindegyik esetben megjelöljük, hogy egy elemről lesz szó.

const parentTag = elem.parentElement;
const childrenTag = elem.children;

const previousTag = elem.previousElementSibling;
const nextTag = elem.nextElementSibling;

const firstChildTag = elem.firstElementChild;
const lastChildTag = ele.lastElementChild;

Template-ek #

template mint HTML tag #

<template>
    <p><p>
<template>

Bármilyen a <template> tag-ek közé elhelyezett elem egy speciális szerkezetet fog alkotni. A böngésző az így elkészült taget nem fogja kirenderelni, csak megjegyzi nekünk, hogy lett egy olyan elemünk ami alkalmas arra, hogy többszörözzük. Így a fenti példában látható bekezdést szabadon tudjuk másolgatni majd.

Felhasználás ES-ben #

Ahhoz, hogy a template-ünk valóban felhasználható legyen egy kis trükköt kell alkalmaznunk.

let template = document.getElementsByTagName("template")[0];
let templateContent = template.content.querySelector("p");

Az így létrejövő templateContent változó lesz a számunkra hasznos, ezt fogjuk másolgatni.

    let masolat = document.importNode(templateContent,true);
    masolat.innerHTML = "Szoveg"
    document.body.appendChild(masolat);

Itt a DOM előállítja nekünk a <template>-ben szereplő elem(ek)et. A true-ra azért lesz szükségünk, hogy egy bonyolultabb elem esetén a gyerekeket is másolja.

Többszintű template #

<template>
    <div>
        <h1></h1>
        <p></p>
    </div>
</template>

let template = document.getElementsByTagName("template")[0];
let templateContent = template.content.querySelector("div");
let masolat = document.importNode(templateContent,true);
masolat.querySelector("h1").innerHTML = "Cím"
masolat.querySelector("p").innerHTML = "Szöveg"
document.body.appendChild(masolat);

Példa #

Írassuk ki bootstrapes kártyákra a városokat, jelenítsük meg a képét, valamint a gombra kattintva hozza be a város honlapját!

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap5.min.css">
    </head>
    <body>
        <template>
            <div class="card">
                <img class="img-card-top">
                <div class="card-body">
                    <h5></h5>
                </div>
                <div class="card-footer">
                    <a class="btn btn-primary">Honlap megnyitasa</a>
                </div>
            </div>
        </template>
        <script src="main.js"></script>
    </body>
</html>

let varosok = [
    {nev:"Budapest", honlap:"https://budapest.hu", kep:"img/budapest.png"},
    {nev:"Debrecen", honlap:"https://debrecen.hu", kep:"img/debrecen.png"},
    {nev:"Pecs", honlap:"https://pecs.hu", kep:"img/pecs.png"},
    {nev:"Gyor", honlap:"https://gyor.hu", kep:"img/gyor.png"},
    {nev:"Szeged", honlap:"https://szeged.hu", kep:"img/szeged.png"},
];

let template = document.getElementsByTagName("template")[0];
let templateContent = template.content.querySelector("div.card");

for(let varos of varosok){
    let varosKartya = document.importNode(templateContent,true);
    varosKartya.querySelector("h5").innerHTML = varos.nev;
    varosKartya.querySelector("img").src = varos.kep;
    varosKartya.querySelector("a").href = varos.honlap;
    document.body.append(varosKartya);
}

Ellenőrző kérdések #

1. Mi az alapvető különbség visszatérés szempontjából a getElementById, valamit a getElementsByClass között?
2. Hogyan tudunk CSS kijelölés alapján elemet kiválasztani?
3. Bármelyik elemtől (új kijelölés nélkül) eljuthatunk-e bármely más elemig?
4. Hogyan hozhatunk létre új HTML elemet?
5. Milyen lehetőségeink vannak az elemek összefűzésére, mi a különbség a megoldások között?
6. A <template> tagben felvett kód megjelenik-e a böngészőben?
7. Tudunk-e nagyobb mélységben is kódot másolni?
8. Hogyan nyerjük ki a hasznos adatot a <template> elemből?

\pagebreak