Orientácia v DOM

DOM nám umožňuje robiť čokoľvek s prvkami a ich obsahom, ale najprv musíme získať zodpovedajúci DOM objekt, dostať ho do premennej a potom sme schopní ho upraviť.

Všetky operácie na DOM začínajú objektom dokumentu. Z neho môžeme pristupovať k akémukoľvek uzlu.

Tu je obrázok odkazov, ktoré umožňujú prechádzanie medzi uzlami DOM:

documentElement a body

Najvyššie uzly stromu sú dostupné priamo ako vlastnosti dokumentu:

<html> = document.documentElement

<body> = document.body

<head> = document.head

Potomkovia: childNodes, firstChild, lastChild

Odteraz budeme používať dva výrazy:

  • Detské uzly (alebo deti) – prvky, ktoré sú priamymi potomkami. Inými slovami, sú vnorené presne v danom elemente. Napríklad <head> a <body> sú deti elementu <html>.
  • Potomkovia – všetky prvky, ktoré sú vnorené v danom elemente, vrátane detí, ich detí a tak ďalej.

Napríklad tu <body> má deti <div> a <ul> (a niekoľko prázdnych textových uzlov):

<html>
<body>
  <div>Začiatok</div>

  <ul>
    <li>
      <b>Informácia</b>
    </li>
  </ul>
</body>
</html>

… A ak sa pýtame na všetkých potomkov <body>, potom dostaneme priame deti <div>, <ul> a tiež ďalšie vnorené elementy ako <li> (je to dieťa <ul>) a <b> dieťa <li>) – celý podstrom.

Kolekcia childNodes poskytuje prístup ku všetkým podradeným uzlom, vrátane textových uzlov.

Nižšie uvedený príklad zobrazuje deti document.body:

<html>
<body>
  <div>Začiatok</div>

  <ul>
    <li>Informácia</li>
  </ul>

  <div>End</div>

  <script>
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
    }
  </script>
</body>
</html>

Prosím všimnite si zaujímavý detail. Ak spustíme vyššie uvedený príklad, posledný zobrazený prvok je <script>. Dokument má v skutočnosti viac vecí, ale v okamihu vykonania skriptu ho prehliadač ešte nečítal, takže ho skript nevidí.

Vlastnosti firstChild a lastChild umožňujú rýchly prístup k prvým a posledným deťom.

Sú to len skratky. Ak existujú podradené uzly, potom platí vždy nasledovné:

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

K dispozícii je tiež špeciálna funkcia elem.hasChildNodes() na kontrolu, či existujú nejaké podradené uzly.

Súrodenci a nadradené elementy

Súrodenci alebo susedia sú uzly, ktoré sú deťmi toho istého priameho nadraden0ho elementu – rodiča. Napríklad <head> a <body> sú súrodenci:

  • O <body> sa hovorí, že je „ďalší“ alebo „pravý“ súrodenec <head>,
  • Hovorí sa, že <head> je „predchádzajúci“ alebo „ľavý“ súrodenec <body>.

Rodič je dostupný ako parentNode.

Ďalší uzol v tom istom rodičovi (nasledujúci súrodenec) je nextSibling a predchádzajúci je previousSibling.

Napríklad:

<html><head></head><body><script>
  // rodič <body> je <html>
  alert( document.body.parentNode === document.documentElement ); // true

  // po <head> ide <body>
  alert( document.head.nextSibling ); // HTMLBodyElement

  // pred <body> ide <head>
  alert( document.body.previousSibling ); // HTMLHeadElement
</script></body></html>

Navigácia podľa elementov

Vyššie uvedené navigačné vlastnosti sa vzťahujú na všetky uzly. Napríklad v childNodes môžeme vidieť textové uzly, uzly elementov a dokonca aj uzly komentárov, ak existujú.

Ale pre mnohé úlohy nechceme textové ani komentovacie uzly. Chceme manipulovať s uzlami elementov, ktoré reprezentujú tagy a tvoria štruktúru stránky.

Pozrime sa teda na ďalšie navigačné odkazy, ktoré berú do úvahy len elementárne uzly:

Odkazy sú podobné tým, ktoré sú uvedené vyššie, len so slovom Element vnútri:

  • children – iba tie deti, ktoré sú elementárnymi uzlami.
  • firstElementChild, lastElementChild – prvé a posledné dieťa prvku.
  • previousElementSibling, nextElementSibling – susedné elementy.
  • parentElement – nadradený – rodičovský prvok.
<html>
<body>
  <div>Začiatok</div>

  <ul>
    <li>Informácia</li>
  </ul>

  <div>Koniec</div>

  <script>
    for (let elem of document.body.children) {
      alert(elem); // DIV, UL, DIV, SCRIPT
    }
  </script>
  ...
</body>
</html>

Ďalšie odkazy: tabuľky

Určité typy DOM prvkov môžu poskytnúť ďalšie vlastnosti, špecifické pre ich typ, pre pohodlie.

Tabuľky sú skvelým príkladom a dôležitým prípadom.

Element <table> podporuje (okrem vyššie uvedených) tieto vlastnosti:

  • table.rows – kolekcia prvkov <tr> tabuľky.
  • table.caption / tHead / tFoot – odkazy na prvky <caption>, <thead>, <tfoot>.
  • table.tBodies – kolekcia prvkov <tbody> (môže byť mnoho podľa štandardu).

<thead>, <tfoot>, <tbody> elementy poskytujú vlastnosti riadkov:

  • tbody.rows – kolekcia <tr> vnútri.

<tr>:

  • tr.cells – kolekcia <td> a <th> buniek v danom <tr>.
  • tr.sectionRowIndex – pozícia (index) vo vnútri <thead> / <tbody> / <tfoot>.
  • tr.rowIndex – číslo <tr> v tabuľke ako celku (vrátane všetkých riadkov tabuľky).

<td> a <th>:

  • td.cellIndex – číslo bunky vo vnútri <tr>.

Príklad použitia:

<table id="table">
  <tr>
    <td>one</td><td>two</td>
  </tr>
  <tr>
    <td>three</td><td>four</td>
  </tr>
</table>

<script>
  // obsah prvého riadku a druhej bunky v riadku - rows a cells sú polia a tie sa indexujú od 0 NIE OD 1!!!
  alert( table.rows[0].cells[1].innerHTML ) // "two"
</script>