Poznáváme DOM V. — Procházíme

V minulé části seriálu jsme se podívali na základní metody určené k získání časti dokumentu. V tomto díle se podíváme na rozhraní Node, které nám nabízí zajímavou sadu metod a atributů určenou k procházení dokumentu. Práce s dokumentem skrze toto rozhraní je velice jednoduchá pokud si dokument představíme jako stromovou strukturu spojených uzlů.

Obrázek se nepodařilo načíst. Objektová struktura části dokumentu

↗ Medium

(plný náhled obrázku)

Rozhraní Node

atribut childNodes

Kolekce NodeList, která obsahuje všechny dceřiné uzly, jednoduchá ukázka nám je pomůže vypsat.

                  
      <ul id="fooList">
         <li>foo</li>
         <li>hoo</li>
         <li><a href="http://bar.com">bar</a></li>
      </ul>
  .
  .
  .
                    
  function printChild(){
      ulElement = document.getElementById("fooList"); 
      childNodes = ulElement.childNodes;
      for(foo = 0; foo &lt; childNodes.length; foo++){
         document.write(childNodes[foo]);                        
      }
      document.writeln("Počet dětí:" + foo);
  }       

Podle použitého prohlížeče se Vám na obrazovku vypíše určitý počet objektů resp. dětí. Nyní zkusme ten samý příklad na stejných elementech ovšem bez oddělovače řádku.

<ul id=“fooList”><li>foo</li><li>hoo</li>…

atribut firstChild

První dceřiný uzel aktuálního uzlu, pokud žádný takový neexistuje vrací se hodnota null.

atribut lastChild

Poslední dceřiný uzel aktuálního uzlu, pokud žádný takový neexistuje vrací se hodnota null.

atribut previousSibling

Nejbližší předchozí sesterský uzel aktuálního uzlu, pokud žádný takový neexistuje vrací se hodnota null.

atribut nextSibling

Nejbližší následující sesterský uzel aktuálního uzlu, pokud žádný takový neexistuje vrací se hodnota null.

atribut parentNode

Rodič tohoto uzlu. Všechny uzly kromě Attr, Document, DocumentFragment, Entity a Notation mohou mít rodiče. Pokud žádný takový neexistuje vrací jse hodnota null.

atribut attributes

NamedNodeMap(kolekce) obsahující atributy tohoto uzlu pokud je zároveň uzlem typu Element nebo hodnotu code>null.

atribut nodeName

Jméno tohoto uzlu, závisí na jeho typu.

atribut nodeValue

Hodnota tohoto uzlu, závisí na jeho typu.

atribut nodeType

Kód reprezentující uzel tohoto typu.

Hodnoty posledních čtyř atributů se odvijí od jejich typu. Abych uvedl tuto větu na pravou míru, je důležité si uvědomit fakt, že rozhraní Node je pouze základní rozhraní, které každý uzel dokumentu implementuje viz. obrázek. Všechny uzly ovšem implementují další rozhraní, které blíže specifikuje jejich povahu. Například uzly HTML dokumentu implementují rozhraní Element nebo rozhraní jenž je z něj odvozeno. Právě specifičtější rozhraní určuje onen typ uzlu. V konkrétním uzlu, který bude zároveň implementovat rozhraní Element bude atribut nodeName obsahovat jméno tagu a atribut nodeValue hodnotu null. Pokud budeme mít uzel s rozhraním Text bude nodeValue obsahovat hodnotu konstantu #text a nodeValue skutečný text daného uzlu.

Hodnoty atributů nodeName, nodeValue a attributes podle typu rozhraní

Výčet atributů a metod rozhraní Node je mnohem širší než je nezbytně nutné pro tento článek, případné zájemce bych odkázal přímo na specifikaci. Ještě přidávám jednoduchou ukázku atributů firstChild, lastChild, previousSibling, nextSibling a parentNode.

Související články

• (Dagblog 4.1.2004) Poznáváme DOM I
• (Dagblog 5.1.2004) Poznáváme DOM II. — struktura dokumentu a objektový model
• (Dagblog 12.1.2004) Poznáváme DOM III. — moduly a úrovně
• (Dagblog 29.1.2004) Poznáváme DOM Poznáváme DOM IV. — Procházíme dokument
• (Dagblog 24.2.2004) Poznáváme DOM Poznáváme DOM V. — Procházíme dokument II.