Differences

This shows you the differences between two versions of the page.

--- tanszek:oktatas:web_technologia_alapjai:js_dom [2025/03/10 13:04] – kissa
+++ tanszek:oktatas:web_technologia_alapjai:js_dom [2025/03/12 12:54] (current) – [Elemek kiválasztása] kissa
@@ Line 1: / Line 1: @@
-===== DOM manipuláció JavaScript segítségével =====
+====== DOM manipuláció JavaScript segítségével ======
 A Document Object Model (DOM) a weboldalak szerkezetét írja le egy hierarchikus fa formájában, amelyen keresztül a JavaScript hozzáférhet és módosíthatja az oldal tartalmát és szerkezetét. A DOM manipuláció az egyik legfontosabb eszköz a dinamikus weboldalak fejlesztésében, mivel lehetővé teszi az elemek hozzáadását, eltávolítását, módosítását, valamint az eseménykezelést.
-==== Document Object Model ====
+===== Document Object Model =====
 A **DOM (Document Object Model)** egy platformfüggetlen, objektumalapú reprezentációja egy HTML- vagy XML-dokumentumnak. A DOM egy fa struktúrában írja le az oldal elemeit, ahol minden HTML-címke egy csomópontként (**node**) jelenik meg, és hierarchikus kapcsolatban áll a többi elemmel. A DOM-on keresztül JavaScript segítségével elérhetjük és módosíthatjuk az oldal tartalmát és szerkezetét.
 A DOM egy objektummodell, amelyben minden HTML-elem egy objektumként létezik. Például egy egyszerű HTML-oldal:
-<code html>
+<sxh html>
 <html>
   <head>
@@ Line 14: / Line 14: @@
   <body>
     <h1>A heading</h1>
-    <a href="#>Link text</a>
+    <a href="#">Link text</a>
   </body>
 </html>
-</code>
+</sxh>
 A DOM ezt az oldalt a következő fastruktúraként kezeli:
@@ Line 38: / Line 38: @@
   * Stílusokat és attribútumokat módosítsunk (pl. ''element.style'', ''setAttribute()'')
+===== DOM manipulációs technikák =====
-. Alapvető DOM manipulációs technikák bemutatása (25 perc)
+A DOM elérésére a globális ''document'' objektumon keresztül van lehetőség, melynek dokumentációja itt található meg: https://developer.mozilla.org/en-US/docs/Web/API/Document
-Elemek kiválasztása
-getElementById
+A következő bekezdések a teljesség igénye nélkül mutatnak be néhány gyakran használt metódust.
-getElementsByClassName
-getElementsByTagName
-querySelector
-querySelectorAll
-Tartalom módosítása
-innerText, textContent
+==== Elemek kiválasztása ====
-innerHTML
+A DOM-ban található csomópontok elérését a következő függvények biztosítják:
-Attribútumok módosítása
-setAttribute, getAttribute
+  * ''getElementById(id)'' – Visszaadja az első olyan elemet, amelynek ''id'' attribútuma megegyezik a megadott értékkel. Ha nincs ilyen elem, null értéket ad vissza.
-classList.add, classList.remove, classList.toggle
+  * ''getElementsByClassName(className)'' – Egy ''HTMLCollection''-t ad vissza, amely tartalmazza az összes olyan elemet, amely rendelkezik a megadott osztálynévvel.
-Új elemek létrehozása és hozzáadása
+  * ''getElementsByTagName(tagName)'' – Egy ''HTMLCollection''-t ad vissza, amely tartalmazza az összes megadott típusú HTML elemet.
+  * ''querySelector(selector)'' – Az első olyan elemet adja vissza, amely illeszkedik a megadott CSS-szelektorhoz. Ha nincs találat, null-t ad vissza.
+  * ''querySelectorAll(selector)'' – Egy ''NodeList''-et ad vissza, amely tartalmazza az összes olyan elemet, amely megfelel a megadott CSS-szelektornak.
-createElement
+<sxh html>
-appendChild, prepend
+<!DOCTYPE html>
-insertBefore
+<html lang="hu">
-Eseménykezelés
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM - Elem kiválasztás</title>
+</head>
+<body>
+    <h1 id="title">Főcím</h1>
+    <p class="text">Ez egy bekezdés.</p>
+    <p class="text">Ez egy másik bekezdés.</p>
+    <div>
+        <span>Span 1</span>
+        <span>Span 2</span>
+    </div>
-addEventListener
+    <script>
-Példa: gombra kattintáskor szöveg megváltoztatása
+        // Egy adott ID-val rendelkező elem kiválasztása
-Stílus módosítása JavaScriptből
+        let titleElement = document.getElementById("title");
+        console.log(titleElement.textContent); // Főcím
-element.style.property
+        // Osztály alapján több elem kiválasztása
-Dinamikus osztályváltás classList-tel
+        let textElements = document.getElementsByClassName("text");
+        console.log(textElements[0].textContent); // Ez egy bekezdés.
-. Példa (10 perc)
+        // Összes adott típusú elem kiválasztása
-Én mutatok egy példát, amely jól illusztrálja az eddig tanultakat.
+        let spans = document.getElementsByTagName("span");
+        console.log(spans.length); // 2
-Bemutatott feladat: Egyszerű interaktív lista
+        // Az első találat kiválasztása CSS-szelektorral
-👉 Feladat:
+        let firstParagraph = document.querySelector(".text");
+        console.log(firstParagraph.textContent); // Ez egy bekezdés.
-Van egy <ul> lista pár kezdeti elemmel.
+        // Az összes találat kiválasztása CSS-szelektorral
-Egy <button> megnyomására egy új elem hozzáadódik a listához.
+        let allParagraphs = document.querySelectorAll(".text");
-Ha egy listaelemre kattintanak, az pirosra változik.
+        allParagraphs.forEach(p => console.log(p.textContent));
+        // Ez egy bekezdés.
+        // Ez egy másik bekezdés.
+    </script>
+</body>
+</html>
+</sxh>
-<code html>
+==== Tartalom módosítása ====
+A DOM-ban található csomópontok tartalmát a következő tulajdonságok segítségével lehet elérni, illetve módosítani:
+  * ''innerText'' és ''textContent'' – Mindkettő a szöveges tartalom lekérésére vagy módosítására szolgál, de különbség köztük, hogy az ''innerText'' figyelembe veszi a CSS láthatósági beállításait, míg a ''textContent'' minden szöveget visszaad, függetlenül a stílusoktól.
+  * ''innerHTML'' – Az elem HTML tartalmának beállítására vagy lekérésére szolgál. Vigyázni kell vele, mert ha külső bemenetet tartalmaz, az alkalmazás sérülékennyé válhat az XSS támadásokkal szemben.
+<sxh html>
 <!DOCTYPE html>
 <html lang="hu">
@@ Line 85: / Line 110: @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DOM Manipuláció</title>
+    <title>DOM tartalom módosítása</title>
     <style>
-        .highlight { color: red; }
+        .hidden {
+            display: none;
+        }
     </style>
 </head>
 <body>
-    <ul id="myList">
+    <h1 id="title">Eredeti <span class="hidden">cím</span></h1>
-        <li>Első elem</li>
+    <p id="paragraph">Ez egy <strong>bekezdés</strong> HTML formázással.</p>
-        <li>Második elem</li>
+    <p id="hiddenText" class="hidden">Ez egy rejtett szöveg.</p>
-    </ul>
-    <button id="addItem">Új elem hozzáadása</button>
     <script>
-        document.getElementById('addItem').addEventListener('click', function() {
+        // innerText: figyelembe veszi a szöveg egyes részeinek láthatóságát
-            let newItem = document.createElement('li');
+        let title = document.getElementById("title");
-            newItem.textContent = "Új elem";
+        console.log(title.innerText); // Eredeti
-            document.getElementById('myList').appendChild(newItem);
+        title.innerText = "Új cím";
+        // textContent: nem veszi figyelembe a CSS láthatóságot
+        let hiddenText = document.getElementById("hiddenText");
+        console.log(hiddenText.textContent); // Ez egy rejtett szöveg
+        // innerHTML: a HTML tartalmat is kezeli
+        let paragraph = document.getElementById("paragraph");
+        console.log(paragraph.innerHTML); // Ez egy <strong>bekezdés</strong> HTML formázással.
+        paragraph.innerHTML = "Ez egy <strong>új bekezdés</strong> módosított HTML tartalommal.";
+    </script>
+</body>
+</html>
+</sxh>
+==== Eseménykezelés ====
+A DOM-ban található csomópontok eseményeinek (pl. kattintás, dupla kattintás, szövegmező fókuszba kerülése, drag&drop műveletek stb.) kezeléséhez a következő függvényt használhatjuk:
+  * ''addEventListener(event, callback)'' – Eseményfigyelőt (callback függvényt) ad az elemhez, amely a megadott esemény (event) bekövetkeztekor lefut.
+<sxh html>
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eseménykezelés példa</title>
+</head>
+<body>
+    <input type="text" id="name-input" placeholder="Írd be a neved ...">
+    <button id="submit-btn">Küldés</button>
+    <script>
+        // Szövegmező fókusz eseménykezelője
+        document.getElementById("name-input").addEventListener("focus", function() {
+            this.style.borderColor = "blue";
         });
-        document.getElementById('myList').addEventListener('click', function(event) {
+        // Gombra kattintás eseménykezelője
-            if (event.target.tagName === 'LI') {
+        document.getElementById("submit-btn").addEventListener("click", function() {
-                event.target.classList.toggle('highlight');
+            let inputValue = document.getElementById("name-input").value;
-            }
+            alert("Hello, " + inputValue);
         });
     </script>
 </body>
 </html>
-</code>
+</sxh>
+==== Attribútumok és stílus módosítása ====
+A DOM csomópontjainak attribútumait és stílusát a következő függvényekkel lehet elérni és módosítani:
+  * ''setAttribute(name, value)'', ''getAttribute(name)'' – Az elem attribútumainak beállítására, valamint lekérdezésére szolgálnak.
+  * ''classList.add(className)'', ''classList.remove(className)'', ''classList.toggle(className)'' – Osztályok hozzáadására, eltávolítására és állapotváltására használható.
+  * ''element.style'' – Az elem CSS-stílusának közvetlen módosítására használható.
+<sxh html>
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Attribútumok és stílus módosítása</title>
+    <style>
+        .highlight {
+            background-color: yellow;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <button id="my-button">Szövegkiemelés</button>
+    <p id="my-paragraph" class="text">Ez egy bekezdés.</p>
+    <script>
+        let button = document.getElementById("my-button");
+        let paragraph = document.getElementById("my-paragraph");
+        // setAttribute és getAttribute használata
+        button.setAttribute("title", "Ez a gomb kiemeli a bekezdést vagy eltávolítja a kiemelést."); // Tooltip szöveg beállítása
+        console.log(button.getAttribute("title")); // Ez a gomb kiemeli a bekezdést vagy eltávolítja a kiemelést.
+        // classList használata
+        paragraph.classList.add("highlight"); // Kiemeli a bekezdést a highlight osztály hozzáadásával
+        setTimeout(() => {
+            paragraph.classList.remove("highlight"); // 2 másodperc elteltével eltávolítja a kiemelést
+        }, 2000);
+        button.addEventListener("click", () => {
+            paragraph.classList.toggle("highlight"); // Ha rajta van a highlight osztály, eltávolítja; ha nincs, hozzáadja
+        });
+        // style attribútum használata
+        paragraph.style.color = "blue"; // Szöveg színének megváltoztatása
+        paragraph.style.fontSize = "20px"; // Betűméret növelése
+    </script>
+</body>
+</html>
+</sxh>
+==== Új elemek létrehozása és hozzáadása ====
+A következő metódusokkal új csomópontokat hozhatunk létre, és adhatunk hozzá a DOM-hoz:
+  * ''createElement(tagName)'' – Egy új HTML elemet hoz létre a megadott tag-névvel.
+  * ''appendChild(node)'', ''prepend(node)'' – Az ''appendChild'' az elem végéhez, a ''prepend'' az elejéhez ad hozzá egy új gyerekelemet.
+  * ''insertBefore(newNode, referenceNode)'' – Egy új elemet szúr be egy másik adott elem elé.
+<sxh html>
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Új elemek létrehozása és hozzáadása</title>
+</head>
+<body>
+    <div id="container">
+        <p>Ez az eredeti bekezdés.</p>
+    </div>
+    <button id="add-btn">Új elem hozzáadása</button>
+    <script>
+        let container = document.getElementById("container");
+        let button = document.getElementById("add-btn");
+        button.addEventListener("click", () => {
+            // createElement használata
+            let newParagraph = document.createElement("p");
+            newParagraph.textContent = "Ez egy új bekezdés.";
+            // appendChild használata (hozzáadja a végére)
+            container.appendChild(newParagraph);
+            // prepend használata (hozzáadja az elejére)
+            let firstParagraph = document.createElement("p");
+            firstParagraph.textContent = "Ez egy bekezdés az elején.";
+            container.prepend(firstParagraph);
+            // insertBefore használata (új elem beszúrása egy másik elé)
+            let middleParagraph = document.createElement("p");
+            middleParagraph.textContent = "Ez egy köztes bekezdés.";
+            let referenceNode = container.children[1]; // Az első bekezdés után helyezzük el
+            container.insertBefore(middleParagraph, referenceNode);
+        });
+    </script>
+</body>
+</html>
+</sxh>
-==== Feladat ====
+===== Feladat =====
 A feladat egy egyszerű, dinamikus teendő lista készítése.
@@ Line 121: / Line 285: @@
   * Legyen egy „Hozzáadás” gomb, melynek lenyomásakor a beírt szöveg kerüljön fel egy ''<ul>'' listára.
   * A listán szereplő elemekre kattintva azok legyenek áthúzva (CSS: ''text-decoration: line-through'').
-  * Legyen egy „Törlés” gomb minden elem mellett, amely törli az adott teendőt listából.
   * Az oldal elemeinek formázásához használj CSS stílusokat!
 Az elkészült megoldást töltsd fel a GitHub repository-dba!