Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace:
tanszek:oktatas:web_technologia_alapjai:js_dom

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tanszek:oktatas:web_technologia_alapjai:js_dom [2025/03/10 12:42] – kissatanszek: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.
  
-{{:tanszek:oktatas:web_technologia_alapjai:pasted:20250310-124112.png?400}} aasdasd+===== 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.
  
-1. Bevezetés (5 perc) +A DOM egy objektummodell, amelyben minden HTML-elem egy objektumként létezik. Például egy egyszerű HTML-oldal:
-Mi a DOM (Document Object Model)? +
-Miért fontos a DOM manipuláció a webfejlesztésben? +
-Alapfogalmak: +
-document objektum +
-DOM-fák +
-Elemtípusok (node, element, attribute, text)+
  
-2. Alapvető DOM manipulációs technikák bemutatása (25 perc) +<sxh html> 
-Elemek kiválasztása+<html> 
 +  <head> 
 +    <title>My title</title> 
 +  </head> 
 +  <body> 
 +    <h1>A heading</h1> 
 +    <a href="#">Link text</a> 
 +  </body> 
 +</html> 
 +</sxh>
  
-getElementById +A DOM ezt az oldalt a következő fastruktúraként kezeli:
-getElementsByClassName +
-getElementsByTagName +
-querySelector +
-querySelectorAll +
-Tartalom módosítása+
  
-innerText, textContent +{{:tanszek:oktatas:web_technologia_alapjai:pasted:20250310-124112.png?400}}
-innerHTML +
-Attribútumok módosítása+
  
-setAttribute, getAttribute +A ''document'' objektum a teljes HTML-dokumentumot képviseli, és az egyik legfontosabb kiindulópont a DOM manipuláció során. Segítségével elérhetjük az oldal elemeit, új elemeket hozhatunk létre, módosíthatjuk a tartalmat, és kezelhetjük az eseményeket. A DOM többféle csomópontot tartalmaz, de a legfontosabbak a következők: 
-classList.add, classList.remove, classList.toggle +  * **Node** (csomópont): Minden, ami a DOM fában található, egy csomópont (node). A csomópontok különböző típusúak lehetnek, például elemek, attribútumok vagy szövegek. 
-Új elemek létrehozása és hozzáadása+  * **Element** (elem): Az element típusú csomópontok a tényleges HTML-elemeket képviselik (pl. ''div'', ''p'', ''h1'' stb.). 
 +    * Példa: **<p>**Ez egy bekezdés.**</p>** 
 +  * **Attribute** (attribútum): Az attribute típusú csomópontok egy HTML-elem tulajdonságait tárolják (pl. ''id'', ''class'', ''src'', ''href'' stb.). 
 +    * Példa: <p **id="main-text"**>Ez egy fontos bekezdés.</p> 
 +  * **Text** (szöveg): A text típusú csomópontok a HTML-elemek belső szöveges tartalmát tárolják. 
 +    * Példa: <p>**Ez egy bekezdés.**</p>
  
-createElement +A DOM lehetővé teszi, hogy JavaScript segítségével: 
-appendChild, prepend +  * Elemeket válasszunk ki és módosítsunk (pl. ''document.getElementById()'', ''document.querySelector()'') 
-insertBefore +  * Új elemeket hozzunk létre és illesszünk be (pl. ''createElement()'', ''appendChild()'') 
-Eseménykezelés+  * Eseménykezelőket hozzunk létre (pl. ''addEventListener()'') 
 +  * Stílusokat és attribútumokat módosítsunk (pl. ''element.style'', ''setAttribute()'')
  
-addEventListener +===== DOM manipulációs technikák =====
-Példa: gombra kattintáskor szöveg megváltoztatása +
-Stílus módosítása JavaScriptből+
  
-element.style.property +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
-Dinamikus osztályváltás classList-tel+
  
-3. Példa (10 perc) +A következő bekezdések a teljesség igénye nélkül mutatnak be néhány gyakran használt metódust.
-Én mutatok egy példát, amely jól illusztrálja az eddig tanultakat.+
  
-Bemutatott feladat: Egyszerű interaktív lista +==== Elemek kiválasztása ==== 
-👉 Feladat:+A DOM-ban található csomópontok elérését a következő függvények biztosítják:
  
-Van egy <ul> lista pár kezdeti elemmel. +  * ''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. 
-Egy <button> megnyomására egy új elem hozzáadódik a listához. +  * ''getElementsByClassName(className)'' – Egy ''HTMLCollection''-t ad vissza, amely tartalmazza az összes olyan elemet, amely rendelkezik a megadott osztálynévvel. 
-Ha egy listaelemre kattintanak, az pirosra változik.+  * ''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.
  
-<code html>+<sxh html>
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="hu"> <html lang="hu">
Line 57: Line 59:
     <meta charset="UTF-8">     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DOM Manipuláció</title>+    <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> 
 + 
 +    <script> 
 +        // Egy adott ID-val rendelkező elem kiválasztása 
 +        let titleElement = document.getElementById("title"); 
 +        console.log(titleElement.textContent); // Főcím 
 + 
 +        // Osztály alapján több elem kiválasztása 
 +        let textElements = document.getElementsByClassName("text"); 
 +        console.log(textElements[0].textContent); // Ez egy bekezdés. 
 + 
 +        // Összes adott típusú elem kiválasztása 
 +        let spans = document.getElementsByTagName("span"); 
 +        console.log(spans.length); // 2 
 + 
 +        // Az első találat kiválasztása CSS-szelektorral 
 +        let firstParagraph = document.querySelector(".text"); 
 +        console.log(firstParagraph.textContent); // Ez egy bekezdés. 
 + 
 +        // Az összes találat kiválasztása CSS-szelektorral 
 +        let allParagraphs = document.querySelectorAll(".text"); 
 +        allParagraphs.forEach(p => console.log(p.textContent)); 
 +        // Ez egy bekezdés. 
 +        // Ez egy másik bekezdés. 
 +    </script> 
 +</body> 
 +</html> 
 +</sxh> 
 + 
 + 
 +==== 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"> 
 +<head> 
 +    <meta charset="UTF-8"> 
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 +    <title>DOM tartalom módosítása</title>
     <style>     <style>
-        .highlight { color: red; }+        .hidden { 
 +            display: none; 
 +        }
     </style>     </style>
 </head> </head>
 <body> <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>     <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>     </script>
 </body> </body>
 </html> </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.  A feladat egy egyszerű, dinamikus teendő lista készítése. 
Line 93: Line 285:
   * Legyen egy „Hozzáadás” gomb, melynek lenyomásakor a beírt szöveg kerüljön fel egy ''<ul>'' listára.   * 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'').   * 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 oldal elemeinek formázásához használj CSS stílusokat!
  
 Az elkészült megoldást töltsd fel a GitHub repository-dba! Az elkészült megoldást töltsd fel a GitHub repository-dba!
tanszek/oktatas/web_technologia_alapjai/js_dom.1741610544.txt.gz · Last modified: 2025/03/10 12:42 by kissa