Ugrás a fő tartalomhoz

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';

4. Stílusok módosítása

CSS tulajdonságok módosítása

const doboz = document.getElementById('doboz');

// Egy stílus beállítása
doboz.style.backgroundColor = 'blue';
doboz.style.width = '200px';
doboz.style.marginTop = '20px';

// Több stílus egyszerre
Object.assign(doboz.style, {
backgroundColor: 'blue',
width: '200px',
marginTop: '20px'
});

5. Elemek létrehozása és törlése

Új elem létrehozása

// Új elem létrehozása
const ujElem = document.createElement('div');
ujElem.textContent = 'Új elem';
ujElem.className = 'my-class';

// Elem hozzáadása a dokumentumhoz
document.body.appendChild(ujElem);

Elem törlése

// Elem törlése
const torlendoElem = document.getElementById('torlendo');
torlendoElem.remove();

// Vagy a szülőelemen keresztül
const szulo = torlendoElem.parentNode;
szulo.removeChild(torlendoElem);

6. Események kezelése

Eseményfigyelők hozzáadása

const gomb = document.getElementById('gomb');

// Click esemény
gomb.addEventListener('click', function(event) {
alert('A gombra kattintottak!');
});

// Modern szintaxis arrow function-nel
gomb.addEventListener('click', (event) => {
alert('A gombra kattintottak!');
});

Gyakori események

// Egér események
elem.addEventListener('mouseenter', () => {/* ... */});
elem.addEventListener('mouseleave', () => {/* ... */});

// Billentyűzet események
document.addEventListener('keydown', (e) => {/* ... */});
document.addEventListener('keyup', (e) => {/* ... */});

// Űrlap események
form.addEventListener('submit', (e) => {
e.preventDefault(); // Alapértelmezett működés megakadályozása
/* ... */
});

Próbáld ki!

Interaktív szerkesztő
function DOMDemo() {
  const [szoveg, setSzoveg] = React.useState('Eredeti szöveg');
  const [szin, setSzin] = React.useState('black');
  
  return (
    <div className="border p-4 rounded">
      <p id="szoveg" style={{color: szin}} className="text-lg mb-4">{szoveg}</p>
      <button 
        className="bg-blue-500 text-white px-4 py-2 rounded mr-2"
        onClick={() => setSzoveg('Módosított szöveg!')}>
        Szöveg módosítása
      </button>
      <button 
        className="bg-green-500 text-white px-4 py-2 rounded mr-2"
        onClick={() => setSzin(szin === 'black' ? 'red' : 'black')}>
        Szín váltása
      </button>
    </div>
  );
}
Eredmény
Loading...

7. Gyakorlati példa: Dinamikus lista

HTML:

<ul id="lista"></ul>
<button onclick="hozzaad()">Új elem hozzáadása</button>

JavaScript:

function hozzaad() {
const lista = document.getElementById('lista');
const ujElem = document.createElement('li');
ujElem.textContent = `Új elem ${lista.children.length + 1}`;

// Törlés gomb hozzáadása
const torlesGomb = document.createElement('button');
torlesGomb.textContent = 'Törlés';
torlesGomb.onclick = () => ujElem.remove();

ujElem.appendChild(torlesGomb);
lista.appendChild(ujElem);
}

8. Feladatok

1. Feladat - Szövegszerkesztő

Készíts egy egyszerű szövegszerkesztőt, ahol egy gombbal lehet váltani a szöveg félkövér és normál stílusa között!

let isBold = false;
const szoveg = document.getElementById('szoveg');

function toggleBold() {
isBold = !isBold;
szoveg.style.fontWeight = isBold ? 'bold' : 'normal';
}

2. Feladat - Színváltó doboz

Készíts egy dobozt, ami kattintásra véletlenszerű színűre változik!

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

const doboz = document.getElementById('doboz');
doboz.addEventListener('click', () => {
doboz.style.backgroundColor = getRandomColor();
});

9. Ellenőrző kérdések

  1. Mi a DOM és mire használjuk?
  2. Mi a különbség a textContent és innerHTML között?
  3. Hogyan tudunk új elemet létrehozni és a DOM-hoz adni?
  4. Mi a különbség a querySelector és getElementById között?
  5. Hogyan adhatunk hozzá eseményfigyelőt egy elemhez?

10. További tanulási források


A következő leckében gyakorlati alkalmazásokat fogunk készíteni, ahol az eddig tanult DOM manipulációs technikákat valós példákon keresztül alkalmazzuk.