JavaScript DOM manipuláció
1. Mi a DOM?
A DOM (Document Object Model) egy programozási interfész, amely lehetővé teszi a HTML dokumentum elemeinek elérését és módosítását JavaScriptből. A DOM a weboldalt egy fastruktúraként ábrázolja, ahol minden HTML elem egy csomópont (node).
A DOM fa struktúrája:
document
└── html
├── head
│ ├── title
│ └── meta
└── body
├── h1
├── p
└── div
2. Elemek kiválasztása
Elem kiválasztása azonosító alapján
// Egy elem kiválasztása ID alapján
const elem = document.getElementById('myId');
Elemek kiválasztása osztály alapján
// Elemek kiválasztása osztály alapján
const elemek = document.getElementsByClassName('myClass');
Modern kiválasztók
// Az első megfelelő elem kiválasztása
const elem = document.querySelector('.myClass');
// Az összes megfelelő elem kiválasztása
const elemek = document.querySelectorAll('.myClass');
3. Tartalom módosítása
Szöveges tartalom módosítása
const elem = document.getElementById('myId');
// Szöveg módosítása
elem.textContent = 'Új szöveg';
// HTML tartalom módosítása
elem.innerHTML = '<strong>Kiemelt szöveg</strong>';
Attribútumok módosítása
const kep = document.querySelector('img');
// Attribútum beállítása
kep.setAttribute('src', 'uj-kep.jpg');
kep.setAttribute('alt', 'Új kép leírása');
// Vagy közvetlenül
kep.src = 'uj-kep.jpg';
kep.alt = 'Új kép leírása';