5.1. fejezet¶

HTML DOM¶

Valószínűleg mindenkinek feltűnt, hogy a HTML dokumentumok lényegében HTML objektumok (tagek) egymásba ágyazásából épülnek fel. Ezek az objektumok egy hierarchikus fastruktúrát alkotnak a dokumentumban.

Amikor egy weboldal betöltődik, akkor a böngésző elkészíti a HTML objektumokból az úgynevezett dokumentum-objektum modellt - ezt a továbbiakban röviden csak DOM-nak fogjuk nevezni. A DOM fa (DOM tree) segítségével könnyen szemléltethetjük a HTML elemek hierarchikus viszonyait. Nézzünk egy egyszerű példát DOM fára!

Példa: Egy egyszerű HTML kód és a hozzá tartozó DOM fa

<!DOCTYPE html>
<html lang="hu">
   <head>
      <title>DOM példa</title>
      <meta charset="UTF-8"/>
   </head>
   <body>
      <h1>Az oldal címe</h1>
      <img src="my-image.png" alt="Valami klassz kép"/>
      <p>
         <a href="https://u-szeged.hu">SZTE</a>
      </p>
   </body>
</html>

HTML objektumok viszonyai¶

Ahhoz, hogy a továbbiakban egyszerűen tudjunk beszélni a HTML objektumok viszonyairól, bevezetünk néhány fogalmat.

Ha az A objektum közvetlenül tartalmazza a B objektumot, akkor azt mondjuk, hogy az A objektum a B objektum szülője, a B objektum pedig A gyereke. Például a fenti kódban és az ahhoz tartozó DOM fában a <body> objektum a <h1>, <img> és <p> elemek szülője, vagy másképp mondva: a <h1>, <img> és <p> elemek a <body> gyerekei. Az viszont például nem igaz, hogy az <a> objektum a <body> gyereke lenne, hiszen itt a tartalmazás nem közvetlen.

Ha az A és B objektumok szülője megegyezik, akkor A és B egymás testvérei. Például a fenti kódban és az ahhoz tartozó DOM fában a <h1>, <img> és <p> objektumok egymás testvérei, hiszen mindhárom objektum szülője a <body>.

A DOM fa tetején lévő, szülővel nem rendelkező elemet gyökérelemnek nevezzük. A teljes HTML DOM-ban ez a gyökérelem mindig a <html> tag lesz (ugyanis ebbe ágyazunk be minden további HTML elemet).

A DOM gyakorlati jelentősége¶

Hamarosan látni fogjuk, hogy CSS-ben használunk olyan szelektorokat is, amelyek egymáshoz való DOM-beli viszonyaik alapján jelölnek ki HTML objektumokat.

Emellett a webes világban gyakran előfordul, hogy azután szeretnénk manipulálni a DOM-fát, miután a weboldal betöltődött (pl. szeretnénk egy objektumot módosítani vagy törölni, esetleg egy új objektumot akarunk a fába beszúrni). Erre biztosítanak lehetőséget a JavaScript DOM-műveletei. Ezen a kurzuson nem tárgyaljuk a JavaScriptet, viszont haladóbb kurzusokon részletesen tanulhatunk a különböző DOM-manipulációs lehetőségekről.

Utolsó frissítés: 2024-08-16 16:51:30