Kihagyás

JavaScript DOM

JavaScript HTML-be ágyazása

A JavaScript kódot a HTML dokumentum <script> elemében vagy külső fájlban helyezhetjük el. A <script> elemet a <head> vagy a <body> részben is elhelyezhetjük, de a legjobb gyakorlat a <body> végén elhelyezni, hogy a dokumentum többi része előbb betöltődjön.

Példa

HTML-be ágyazott JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript példa</title>
</head>
<body>
    <h1>Üdvözöllek!</h1>
    <script>
    document.write('Hello, World!');
    </script>
</body>
</html>

Bevezetés a DOM-ba

A DOM (Document Object Model) egy interfész, amely a HTML vagy XML dokumentum szerkezetét írja le. A böngészők a DOM-on keresztül biztosítanak hozzáférést a dokumentum struktúrájához, amely fa formájában van ábrázolva.

A DOM fa a következő elemekből áll:

  • Element: HTML elemek, mint például <div>, <p>, <a>.
  • Attribute: Egy elem attribútumai, mint például id, class, stb.
  • Text: Az elemek közötti szöveg.

DOM navigáció

document objektum

A document objektum az egész HTML dokumentumot képviseli, és ez az, amin keresztül a DOM-ot manipulálhatjuk.

Példák: 

console.log(document.title); // A dokumentum címe
console.log(document.URL);   // A dokumentum URL-je

Elem hivatkozás

Készítsünk egy egyszerű HTML fájlt!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Selectors példa</title>
</head>
<body>
    <div id="example-id">Ez az ID alapú kiválasztás példája.</div>
    <p class="example-class">Ez a querySelector példája.</p>
    <p class="example-class">Ez szintén egy elem a querySelectorAll példához.</p>
</body>
</html>

getElementById

Az id attribútum alapján keres egyetlen elemet.

const myDiv = document.getElementById("myDiv");
console.log(myDiv.textContent); // "Ez egy div azonosítóval"
myDiv.style.color = "blue"; // A szöveg kékké válik

Eredmény

A #myDiv szövege kékre változik.

querySelector

Az első olyan elemet adja vissza, ami illeszkedik a CSS-szerű szelektorra.

const firstParagraph = document.querySelector(".myClass");

firstParagraph.style.fontWeight = "bold"; // Félkövér lesz a szöveg

Eredmény

Az első p.myClass szövege félkövér lesz.

querySelectorAll

Minden olyan elemet visszaad, ami illeszkedik a CSS-szerű szelektorra (NodeList formájában).

const allParagraphs = document.querySelectorAll(".myClass");

allParagraphs.forEach((paragraph) => {
    paragraph.style.fontWeight = "bold";
});

Eredmény

Az összes p.myClass szövege félkövér lesz.

Stílus módosítása

A DOM-on keresztül módosíthatjuk az elemek stílusát.

Példa

const myElement = document.getElementById("myElement");
myElement.style.color = "red";
myElement.style.backgroundColor = "yellow";
myElement.style.fontSize = "24px";
Művelet JavaScript kód Leírás
Szöveg színe element.style.color = "red"; Beállítja az elem szövegének színét.
Háttérszín element.style.backgroundColor = "yellow"; Beállítja az elem háttérszínét.
Betűméret element.style.fontSize = "20px"; Beállítja az elem szövegének betűméretét.
Szélesség element.style.width = "200px"; Beállítja az elem szélességét.
Magasság element.style.height = "100px"; Beállítja az elem magasságát.
Szegély színe element.style.borderColor = "blue"; Megváltoztatja az elem szegélyének színét.
Szegély vastagság element.style.borderWidth = "2px"; Megváltoztatja az elem szegélyének vastagságát.
Szegély stílusa element.style.borderStyle = "dashed"; Beállítja az elem szegélyének stílusát (pl. solid, dashed, dotted).
Szövegközépre igazítás element.style.textAlign = "center"; Középre igazítja az elem szövegét.
Láthatóság element.style.display = "none"; Elrejti az elemet.
Láthatóvá tétel element.style.display = "block"; Láthatóvá teszi az elemet (általában block vagy inline).
Szöveg dőlt stílusban element.style.fontStyle = "italic"; A szöveg dőlt formázású lesz.
Szöveg vastag stílusban element.style.fontWeight = "bold"; A szöveg vastag betűstílusú lesz.
Átlátszóság element.style.opacity = "0.5"; Az elem áttetszőségét állítja (érték: 0.0 - 1.0).
Szövegárnyék element.style.textShadow = "2px 2px 5px gray"; Árnyékot ad a szövegnek (X, Y eltolás, elmosás, szín).
Térköz (padding) element.style.padding = "10px"; Beállítja az elem belső térközét.
Margó (margin) element.style.margin = "15px"; Beállítja az elem külső margóját.
Pozíció (fix) element.style.position = "fixed"; Az elem pozícióját fixre állítja, a képernyőhöz igazítva.
Elhelyezkedés element.style.top = "50px"; element.style.left = "20px"; Megadja az elem pozícióját (csak akkor működik, ha a position meg van adva).

Feladatok

Színezés feladat

Van egy HTML dokumentumod, amely több azonos osztályú <p> elemet tartalmaz. Írj egy JavaScript kódot, amely az összes ilyen <p> elemet zöldre színezi!

<!DOCTYPE html>
<html>
<head>
<title>Színezés Feladat</title>
</head>
<body>
<p class="color">Ez egy szöveg 1.</p>
<p class="color">Ez egy szöveg 2.</p>
<p class="color">Ez egy szöveg 3.</p>
<p>Ez más szöveg.</p>
<script>

</script>
</body>
</html>
Számolás feladat

Készíts egy HTML oldalt, ahol különböző típusú elemek találhatóak (pl. <div>, <p>, <span>). Írj egy JavaScript kódot, amely megszámolja és kiírja a konzolra, hogy hány <p> és hány <span> elem található az oldalon.

<!DOCTYPE html>
<html>
<head>
<title>Számolás Feladat</title>
</head>
<body>
<div>Ez egy div.</div>
<p>Ez egy paragrafus.</p>
<span>Ez egy span.</span>
<p>Ez még egy paragrafus.</p>
<span>Még egy span.</span>
<div>Másik div.</div>
<script>

</script>
</body>
</html>
Dinamikus lista frissítés

Van egy HTML lista (<ul>), amely tartalmaz néhány <li> elemet. Írj egy JavaScript kódot, amely az összes <li> elemet megváltoztatja úgy, hogy a tartalmuk elé egy sorszámot illeszt (pl. "1. Alma", "2. Körte", stb.).

<!DOCTYPE html>
<html>
<head>
<title>Dinamikus Lista</title>
</head>
<body>
<ul>
    <li>Alma</li>
    <li>Körte</li>
    <li>Banán</li>
</ul>
<script>

</script>
</body>
</html>
Amerikai zászló

Készítsd el az amerikai zászlót úgy, hogy ne módosítsd a HTML kódot, kizárólag JavaScriptet használj!

szamologep
Minta

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title>Amerikai zászló</title>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>

    </script>
</body>
</html>