Dokumentumszerkezet és DOM

Célok

A lecke végére el tudod magyarázni, mi az a DOM és miben különbözik a szerver által küldött HTML-forrástól, fel tudsz rajzolni egy rövid HTML-részlet dokumentumfáját, és érted, miért számít, hogy az elem a jelentését is kifejezze, ne csak a kinézetét.

Miért nem elég a HTML-szöveg?

A szerver HTML-szöveget küld. Ahhoz, hogy egy program (a böngésző, a CSS, a JavaScript, a képernyőolvasó) dolgozni tudjon vele, nem karakterek sorozataként, hanem strukturált modellként kell látnia: mi tartalmaz mit, melyik elem melyiknek a gyermeke. A szövegből felépített modell a DOM: a dokumentum faalakú, programból elérhető és módosítható modellje a böngésző memóriájában.

A HTML-forrásból dokumentumfa lesz

A böngésző a kapott szöveget elemzi (parse-olja), és egymásba ágyazott csomópontokból (node) álló fát épít. A gyökér a dokumentum, alatta a html, majd a head és a body, aztán a tartalmi elemek.

<main>
  <article>
    <h1>Megnyílt a kurzusjelentkezés</h1>
    <p>A jelentkezés péntekig tart.</p>
    <a href="/kurzusok">Kurzusok</a>
  </article>
</main>

flowchart TB
    D[Dokumentum] --> M[main]
    M --> A[article]
    A --> H[h1]
    A --> P[p]
    A --> L[a]

Az ábra a fő elemek szülő–gyermek kapcsolatát mutatja. A tényleges DOM szöveges csomópontokat és további részleteket is tartalmaz: a „Megnyílt a kurzusjelentkezés” szöveg például a h1 elem gyermekeként önálló szövegcsomópont.

A fa nem egy másik HTML-fájl: élő modell. A HTML-elemzés hozza létre, a JavaScript később módosíthatja, a CSS pedig a fa elemeire vonatkozik. A szülő–gyermek viszony a CSS és a JavaScript számára is fontos: egy stílusszabály célba vehet például minden article alatti bekezdést, a JavaScript pedig megkereshet egy elemet, és megváltoztathatja a tartalmát. Az MDN szerint a DOM lehetővé teszi, hogy a program megváltoztassa a dokumentum szerkezetét, stílusát és tartalmát.

Forrás és aktuális DOM

A szervertől kapott HTML-forrás és a böngésző pillanatnyi DOM-ja nem mindig azonos:

• A böngésző a hibás vagy hiányos HTML-t a szabvány szabályai szerint javítva értelmezi.
• A JavaScript új elemet szúrhat be, szöveget cserélhet, elemet távolíthat el.

A kurzusoldalon például egy állapotjelző kezdetben ezt mondja: „Nincs kiválasztott kurzus”. A felhasználó választása után a JavaScript a DOM-ban ezt írja át: „Webprogramozás 1. kiválasztva”. A szerver által küldött forrásfájl ettől nem változik. A „Forrás megtekintése” és a fejlesztői eszköz Elements (Inspector) nézete ezért eltérő tartalmat mutathat: az előbbi az érkezett szöveget, az utóbbi a jelenlegi modellt.

flowchart LR
    S["HTML-forrás (szerverről)"] -->|elemzés| D["DOM (memóriában)"]
    J[JavaScript] -->|módosítja| D
    D -->|megjelenítés| K[Képernyő]

A szemantikus elem többet mond a kinézetnél

A h1 főcímet, a p bekezdést, az a hivatkozást jelöl, a main a fő tartalmi régió, az article önálló tartalmi egység. Az elemválasztás tehát nem pusztán vizuális döntés: egy szöveg nem attól lesz címsor, hogy nagy betűvel jelenik meg, hanem attól, hogy a HTML-ben címsor. A képernyőolvasók, a keresők és más programok erre a szerkezetre támaszkodnak. Ezt hívjuk szemantikus HTML-nek: az elemek a jelentésüket fejezik ki.

Szerkezet és hierarchia

• A címsorok (h1–h6) hierarchiát adnak: egy főcím alatt alcímek tagolják a tartalmat.
• A hivatkozás szövege legyen önmagában érthető; a „kattints ide” nem mondja meg, hova vezet.
• Az űrlapmezők címkéi (label) megmondják, milyen adatot vár a mező.

Ezek mind azt szolgálják, hogy a tartalom jelentése olvasható legyen, ne csak a látványa.

A fejlesztői eszköz Elements nézete

A böngésző fejlesztői eszközének Elements (Firefoxban Inspector) nézete az aktuális dokumentumfát mutatja: egy elem kijelölésekor látható a helye a fában, az attribútumai és a rá ható stílusok. A Network panel ezzel szemben azt, hogy milyen erőforrás érkezett. A két nézet együtt segít eldönteni, hogy egy szöveg a szerver válaszában volt-e, vagy a betöltés után épült fel. (Ez következtetés, nem teljes bizonyíték a belső működésre, de jó kiindulópont.)

Végigvezetett példa: a kurzushír a Kurzuspontban

A kurzushír oldalán a szerver az article elemet küldi címmel, szöveggel és hivatkozással. Ezután a JavaScript a lap tetejére beszúr egy „Új kurzus érkezett” értesítést. A következőt tapasztaljuk:

Nézet	Mit mutat?
Forrás megtekintése	Csak az article-t, értesítés nélkül
Elements nézet	Az article-t és az utólag beszúrt értesítést is
Képernyő	Mindkettőt, a stílusoknak megfelelően

A tanulság: a keresőrobot vagy a képernyőolvasó nem biztos, hogy a JavaScript által később beszúrt tartalmat is látja. Ezért érdemes a fontos tartalmat már a szerver válaszában elhelyezni.

Gyakori tévhitek

Állítás	Pontosítás
„A DOM ugyanaz a fájl, amit a szerver küldött.”	A DOM a böngésző aktuális, változtatható belső modellje.
„A nagy betűs szöveg automatikusan címsor.”	A vizuális méret nem helyettesíti a megfelelő elemet.
„Minden kattintható elem gomb.”	A natív gomb szemantikája és billentyűzetes viselkedése külön tulajdonság.
„A forrás és az Elements nézet mindig azonos.”	A feldolgozás és a JavaScript miatt eltérhetnek.
„A szemantikus HTML csak a keresőknek fontos.”	Minden programnak, amely az oldalt értelmezi, így a segítő technológiáknak is.

Röviden

• A DOM a böngésző memóriájában élő, faalakú dokumentummodell, amelyet a HTML-elemzés hoz létre.
• A JavaScript módosíthatja, ezért a DOM eltérhet a szerver által küldött forrástól.
• A szemantikus elemek a jelentést fejezik ki, nem csak a kinézetet.
• A fontos tartalom lehetőleg ne csak utólagos JavaScripttől függjön.

Ellenőrző kérdések

1. Rajzold fel a fát: <ul><li>Egy</li><li>Kettő</li></ul>!
2. Miért különbözhet a „Forrás megtekintése” és az Elements nézet?
3. Miért jobb egy button elem, mint egy gombnak formázott div?
4. Mit jelent az, hogy a DOM „élő”?

Tanulási források

• Document Object Model (MDN) — a DOM bevezetése angolul.
• Basic HTML syntax (MDN) — az elemek és attribútumok felépítése.