JavaScript Bevezetés és a DOM

A Document Object Model (DOM) fa szerkezetének vizuális magyarázata

A HTML megadta a weboldalunk csontvázát. A CSS felöltöztette és gyönyörűvé tette. De az oldalunk még mindig csak egy mozdulatlan plakát. Itt lép a képbe a JavaScript (JS), ami az izomzatot és az idegrendszert adja: interaktívvá, élővé teszi a weboldalt.

Hogyan kössük be a JavaScriptet?

Ahogy a CSS-nél, itt is a legjobb megoldás, ha egy külön fájlba írjuk a kódot (például main.js), és azt kötjük hozzá a HTML-hez. Ezt a <script> taggel tesszük meg, amit a legprofibb módon a HTML fájlunk legvégére, közvetlenül a záró </body> tag elé teszünk be.

<body>
    <h1>Az én weboldalam</h1>
    
    <!-- A JS fájl beillesztése a body végén -->
    <script src="assets/js/main.js"></script>
</body>

Miért a végére? Mert a böngésző fentről lefelé olvassa a kódot. Ha a JS-t az elejére tennénk, a böngésző megállna letölteni azt, és addig a látogató csak egy üres, fehér képernyőt látna.

Mi az a DOM (Document Object Model)?

Amikor a böngésző beolvassa a HTML kódodat, a háttérben felépít belőle egy láthatatlan "családfát". Ezt hívják DOM-nak. Ebben a fában minden HTML tag egy "csomópont" (node).

A JavaScript szuperképessége, hogy bele tud nyúlni ebbe a fába. Képes megkeresni egy elemet, megváltoztatni a szövegét, átszínezni, vagy akár teljesen új elemeket létrehozni, anélkül, hogy az oldalt újra kellene tölteni!

A DOM Manipuláció alapjai

Nézzünk egy egyszerű példát. Van egy HTML címsorunk, aminek adtunk egy egyedi azonosítót (ID-t):

<h1 id="focim">Eredeti szöveg</h1>

Most a JavaScript fájlunkban megkeressük ezt az elemet, és megváltoztatjuk a szövegét:

// 1. Megkeressük az elemet az ID-ja alapján, és elmentjük
let cimsor = document.getElementById("focim");

// 2. Megváltoztatjuk a benne lévő HTML tartalmat
cimsor.innerHTML = "Ezt a szöveget a JavaScript írta át!";

// 3. Megváltoztatjuk a CSS stílusát (pirosra színezzük)
cimsor.style.color = "red";

Amikor a látogató megnyitja az oldalt, egy pillanatig sem fogja látni az "Eredeti szöveg" feliratot, mert a JavaScript a háttérben azonnal átírja és átszínezi azt. Ez a DOM manipuláció lényege!

Következő lecke: Változók és Függvények →