Kihagyás

JavaScript DOM

JavaScript HTML-be ágyazása

A JavaScript kódot a HTML dokumentum <script> elemében vagy külső fájlban helyezhetjük el. A <script> elemet a <head> vagy a <body> részben is elhelyezhetjük, de a legjobb gyakorlat a <body> végén elhelyezni, hogy a dokumentum többi része előbb betöltődjön.

Példa

HTML-be ágyazott JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript példa</title>
</head>
<body>
    <h1>Üdvözöllek!</h1>
    <script>
    document.write('Hello, World!');
    </script>
</body>
</html>

Bevezetés a DOM-ba

A DOM (Document Object Model) egy interfész, amely a HTML vagy XML dokumentum szerkezetét írja le. A böngészők a DOM-on keresztül biztosítanak hozzáférést a dokumentum struktúrájához, amely fa formájában van ábrázolva.

A DOM fa a következő elemekből áll:

  • Element: HTML elemek, mint például <div>, <p>, <a>.
  • Attribute: Egy elem attribútumai, mint például id, class, stb.
  • Text: Az elemek közötti szöveg.

DOM navigáció

document objektum

A document objektum az egész HTML dokumentumot képviseli, és ez az, amin keresztül a DOM-ot manipulálhatjuk.

Példák: 

console.log(document.title); // A dokumentum címe
console.log(document.URL);   // A dokumentum URL-je

Elemszintű navigáció

A DOM fastruktúrán belül lehetőségünk van különböző irányokban navigálni:

  • parentNode: Szülő elem.
  • childNodes: Gyerek elemek.
  • firstChild és lastChild: Első és utolsó gyerek elem.
  • nextSibling és previousSibling: Következő és előző testvér elem.

Példa: 

let elem = document.querySelector('div');
console.log(elem.parentNode); // Szülő elem
console.log(elem.childNodes); // Gyerek elemek

Elemmódosítás

Elem kiválasztása

  • getElementById(): Egy elem kiválasztása ID alapján.
  • getElementsByClassName(): Elemek kiválasztása osztály alapján.
  • getElementsByTagName(): Elemek kiválasztása tag név alapján.
  • querySelector(): Az első elem kiválasztása egy CSS szelektor alapján.
  • querySelectorAll(): Minden olyan elem kiválasztása, amely megfelel egy CSS szelektornak.

Példa

let elem = document.getElementById('myElement');
let divs = document.getElementsByTagName('div');
let specificElem = document.querySelector('.myClass');

Attribútumok kezelése

  • getAttribute(): Egy attribútum értékének lekérése.
  • setAttribute(): Egy attribútum beállítása.
  • removeAttribute(): Egy attribútum eltávolítása.

Példa

let link = document.querySelector('a');
let href = link.getAttribute('href');
link.setAttribute('href', 'https://ujurl.hu');

Tartalom módosítása

  • innerHTML: Egy elem HTML tartalmának módosítása.
  • textContent: Egy elem szöveges tartalmának módosítása.

Példa

let elem = document.querySelector('p');
elem.innerHTML = '<strong>Új tartalom</strong>';
elem.textContent = 'Csak szöveg';

Új elemek létrehozása

Elem létrehozása és hozzáadása

  • createElement(): Új elem létrehozása.
  • appendChild(): Egy elem hozzáadása a szülőhöz.
  • insertBefore(): Egy elem beszúrása egy másik elé.

Példa

let newDiv = document.createElement('div');
newDiv.textContent = 'Ez egy új div';
document.body.appendChild(newDiv);

Stílusok kezelése

Inline stílusok

Az elemek stílusát a style objektummal lehet módosítani.

Példa: 

let elem = document.querySelector('div');
elem.style.backgroundColor = 'blue';
elem.style.width = '100px';
elem.style.height = '100px';

CSS osztályok kezelése

  • classList.add(): Osztály hozzáadása.
  • classList.remove(): Osztály eltávolítása.
  • classList.toggle(): Osztály ki-/bekapcsolása.

Példa: 

let elem = document.querySelector('div');
elem.classList.add('myClass');
elem.classList.remove('anotherClass');
elem.classList.toggle('hidden');

Eseménykezelés

Események hozzáadása

  • addEventListener(): Esemény figyelő hozzáadása.
  • Eseménytípusok: click, mouseover, mouseout, keydown, stb.

Példa: 

let button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('A gombra kattintottál!');
});

Események eltávolítása

  • removeEventListener(): Esemény figyelő eltávolítása.

Példa: 

function handleClick() {
  console.log('Gombra kattintottak');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

DOM Manipuláció Haladóbb Szinten

DOM Fragmentek

DOM fragmenteket akkor használunk, ha több elemet szeretnénk egyszerre hozzáadni a DOM-hoz, anélkül, hogy minden egyes műveletnél újrarenderelné a böngésző.

Példa: 

let fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  let newDiv = document.createElement('div');
  newDiv.textContent = 'Elem ' + i;
  fragment.appendChild(newDiv);
}
document.body.appendChild(fragment);

Template-ek használata

A HTML