úterý 24. února 2004

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ů.

Objektová struktura části dokumentu

(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 < 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>.....
 

Pokud jste použili pro první a druhý příklad prohlížeč Internet Explorer(6.0), pak počet dětí vždy odpovídal třem. V případě prohlížeče Mozilla(1.5) nebo Opera(7.0) byl počet dětí v prvním příkladu 7 a v druhém 3. Tento rozdíl se projevuje díky rozdílnému zpracování bílých znaků(white space), které jsou představovány konci řádků. Zatímco Mozilla a Opera interpretují konce řádků jako nové textové uzly, Internet Explorer je za textové uzly nepovažuje. Otázkou zůstává jaké chování považovat za správné ignorovat či neignorovat.

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í
Rozhraní nodeName nodeValue attributes
Attr name of attribute value of attribute null
CDATASection #cdata-section content of the CDATA Section null
Comment #comment content of the comment null
Document #document null null
DocumentFragment #document-fragment null null
DocumentType document type name null null
Element tag name null NamedNodeMap
Entity entity name null null
EntityReference name of entity referenced null null
Notation notation name null null
ProcessingInstruction target entire content excluding the target null
Text #text content of the text node null

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