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.