HTML és DOM: a struktúra, amivel a JavaScript dolgozik

Becsült olvasási idő: 10–12 perc

Kulcsfogalmak: HTML · DOM · document · id · class · defer · semantics A HTML elsősorban struktúrát és jelentést ír le. A böngésző ezt feldolgozza, majd létrehoz belőle egy programból elérhető objektumstruktúrát: a DOM-ot.

HTML source
   ↓
browser parses
   ↓
DOM
   ↓
JavaScript can inspect and modify it

Mi az a DOM?

A DOM jelentése Document Object Model. Egyszerűsítve egy fa, amelyben a dokumentum elemei objektumként jelennek meg.

document
└─ html
   ├─ head
   └─ body
      └─ main
         └─ section#stage
            ├─ div#signal
            ├─ header
            ├─ dl.readout
            └─ div.controls

A HTML-forrás és a DOM összefügg, de nem azonos fogalom: a HTML szöveges leírás, a DOM a böngésző által létrehozott, programozható objektummodell.

Mi az a document?

A document az aktuálisan megnyitott HTML-dokumentumhoz tartozó böngészős objektum.

const signal = document.querySelector("#signal");

Ennek jelentése: keresd meg az aktuális dokumentumban az első elemet, amely illeszkedik a #signal CSS-szelektorra.

A document nem ECMAScript-kulcsszó. A böngésző Web API-ja adja nekünk.

querySelector()

A querySelector() CSS-szelektorral keres.

document.querySelector("#signal");
document.querySelector(".signal");
document.querySelector("button");
document.querySelector("#stage .signal");

Az első megfelelő DOM-elemet adja vissza. Ha nem talál semmit, az eredmény null.

Ez fontos hibakeresésnél: egy elgépelés, például #singal, már azt jelenti, hogy nincs meg a várt elem.

id és class

Az id egy dokumentumon belüli egyedi azonosítónak való:

<div id="signal"></div>

A class újrahasználható kategória:

<div class="card"></div>
<div class="card"></div>

A Signal Labban praktikus minta, hogy ugyanazon az elemen mindkettő lehet:

<section id="stage" class="stage">

Az id jól használható egy konkrét elem JavaScriptből való elérésére; a class jól használható vizuális és szerkezeti kategóriákhoz.

A head szerepe

A <head> többnyire nem a dokumentum fő látható tartalma, hanem metaadatokat és erőforrás-kapcsolatokat tartalmaz.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Signal Lab 01 — Behaviour</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>

A charset karakterkódolást ad meg. A viewport a mobilos megjelenéshez fontos. A link csatolja a CSS-t. A script betölti a JavaScriptet.

Miért defer?

A defer azt kéri, hogy a külső script letöltése ne blokkolja a HTML feldolgozását, és a kód csak a dokumentum feldolgozása után fusson le.

Ez azért praktikus, mert a scriptünk rögtön DOM-elemeket keres:

const stage = document.querySelector("#stage");

Ha a DOM megfelelő része még nem létezne, nem kapnánk meg a várt elemet.

Szemantikus elemek

A main, section, header, dl, dt, dd, button nem csak dobozok. Jelentést is közvetítenek a böngészőnek és a segítő technológiáknak.

Például a readout értékpárokhoz jól illik a description list:

<dl class="readout">
  <div>
    <dt>INPUT X</dt>
    <dd id="xValue">0</dd>
  </div>
</dl>

HTML → JavaScript kapcsolat

A lényeg nem az, hogy a HTML külön tantárgy legyen, hanem hogy értsd a rendszerben betöltött szerepét:

HTML source
   ↓
DOM
   ↓ querySelector()
JavaScript reference
   ↓
event / state / render
   ↓
DOM changes

Ellenőrző kérdések

1. Mi a különbség a HTML-forrás és a DOM között?
2. Miért a document objektumon keresünk HTML-elemet?
3. Mit ad vissza a querySelector(), ha nincs találat?
4. Miért hasznos a defer ebben a projektben?