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:22] – 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 98: 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 141: Line 141:
 </sxh> </sxh>
  
-=== Eseménykezelés ===+==== 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:  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: 
  
Line 174: Line 174:
 </sxh> </sxh>
  
-=== Attribútumok és stílus módosítása ===+==== 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 226: 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 278: Line 278:
 </sxh> </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. 
tanszek/oktatas/web_technologia_alapjai/js_dom.1741630969.txt.gz · Last modified: 2025/03/10 18:22 by kissa