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 18:19] – [DOM manipulációs technikák] 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. 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 (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.
  
Line 38: Line 38:
   * Stílusokat és attribútumokat módosítsunk (pl. ''element.style'', ''setAttribute()'')   * Stílusokat és attribútumokat módosítsunk (pl. ''element.style'', ''setAttribute()'')
  
-==== DOM manipulációs technikák ====+===== DOM manipulációs technikák =====
  
 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 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
Line 44: Line 44:
 A következő bekezdések a teljesség igénye nélkül mutatnak be néhány gyakran használt metódust. A következő bekezdések a teljesség igénye nélkül mutatnak be néhány gyakran használt metódust.
  
-=== Elemek kiválasztása ===+==== Elemek kiválasztása ====
 A DOM-ban található csomópontok elérését a következő függvények biztosítják: A DOM-ban található csomópontok elérését a következő függvények biztosítják:
  
Line 62: Line 62:
 </head> </head>
 <body> <body>
- 
     <h1 id="title">Főcím</h1>     <h1 id="title">Főcím</h1>
     <p class="text">Ez egy bekezdés.</p>     <p class="text">Ez egy bekezdés.</p>
Line 99: Line 98:
  
  
-=== Tartalom módosítása ===+==== 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: 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:
  
Line 119: Line 118:
 </head> </head>
 <body> <body>
- 
     <h1 id="title">Eredeti <span class="hidden">cím</span></h1>     <h1 id="title">Eredeti <span class="hidden">cím</span></h1>
     <p id="paragraph">Ez egy <strong>bekezdés</strong> HTML formázással.</p>     <p id="paragraph">Ez egy <strong>bekezdés</strong> HTML formázással.</p>
Line 143: Line 141:
 </sxh> </sxh>
  
-=== Attribútumok és stílus módosítása ===+==== 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"; 
 +        }); 
 + 
 +        // Gombra kattintás eseménykezelője 
 +        document.getElementById("submit-btn").addEventListener("click", function() { 
 +            let inputValue = document.getElementById("name-input").value; 
 +            alert("Hello, " + inputValue); 
 +        }); 
 +    </script> 
 +</body> 
 +</html> 
 +</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: A DOM csomópontjainak attribútumait és stílusát a következő függvényekkel lehet elérni és módosítani:
  
Line 195: Line 226:
 </sxh> </sxh>
  
-=== Új elemek létrehozása és hozzáadása ===+==== Ú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: A következő metódusokkal új csomópontokat hozhatunk létre, és adhatunk hozzá a DOM-hoz:
  
Line 247: Line 278:
 </sxh> </sxh>
  
-=== Eseménykezelés === +===== Feladat =====
-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"; +
-        }); +
- +
-        // Gombra kattintás eseménykezelője +
-        document.getElementById("submit-btn").addEventListener("click", function() { +
-            let inputValue = document.getElementById("name-input").value; +
-            alert("Hello, " + inputValue); +
-        }); +
-    </script> +
-</body> +
-</html> +
-</sxh> +
-==== Feladat ====+
  
 A feladat egy egyszerű, dinamikus teendő lista készítése.  A feladat egy egyszerű, dinamikus teendő lista készítése. 
tanszek/oktatas/web_technologia_alapjai/js_dom.1741630798.txt.gz · Last modified: 2025/03/10 18:19 by kissa