środa, 23 maj 2012
NEXT / Artykuły / NEXT 5/2008 / Artykuły z NEXT 5/2008 / Po ścieżce do węzła
administracja   bezpieczeństwo   biuro   druk/skan   e-mail   film   firma   fotografia   grafika komputerowa   gry   hacking   internet   jak kupować   karty graficzne   komórki   komunikatory   laptopy   linux   mobilność   monitory   multimedia   muzyka   nauka   nawigacja   open-source   oprogramowanie   optymalizacja   p2p   pamięć masowa   peryferia   płyty główne   podkręcanie   porady   prawo   procesory   programowanie   przeglądarki www   sieci komputerowe   spam   sprzęt   systemy operacyjne   telekomunikacja   testy   testy pojedyncze   webmaster   windows   wirusy   www   wywiad  
Dodaj nas do Cafe News
NEXT 5/2008 - okładka





Temat numeru:
Przejdź do innych artykułów:

NEXT 5/2008 - Po ścieżce do węzła

Po ścieżce do węzła - ikonka nawigacja w drzewie DOM: XPath

Data: 22 kwiecień 2008
Identyfikator: 080557

Document Object Model kryje wiele ciekawych rozwiązań usprawniających zarządzanie witryną internetową. Niektóre z nich są mniej znane i rzadko używane na co dzień, ale po dotarciu do nich przez programistę często awansują do roli niezbędnika. Czy jest nim także XPath?

Strona 1 z 2
< Poprzednia 1 2 Następna >

DOM a XPath

Mimo że składnia XPath formalnie wchodzi w ramy standardu DOM Level 3, istnieje kilka różnic w sposobie traktowania drzewa dokumentu XML w obu schematach adresowania. Do najważniejszych należą:
  • XPath nie stosuje (i nie obsługuje) pseudonazw, np. #document do adresowania węzłów nienazwanych w dokumencie wprost.
  • Wartością węzła w XPath jest string powstały po złączeniu wszystkich wartości tagów typu tekstowego, będących dziećmi tego węzła, a nie NULL (pusty string), jak w DOM-ie.
  • XPath ignoruje wszelkie deklaracje typu dokumentu (DTD – Document Type Definition), otwierające poprawne strony XHTML, wyświetlane w podglądzie drzewa DOM.

Główną funkcją języka programowania jest dostarczenie autorowi projektu efektywnego narzędzia do realizacji postawionego przed nim zadania. Ponieważ oczekiwania użytkowników co do programów, także aplikacji webowych, są coraz większe, a moce przerobowe programistów mniej więcej stałe, dobry język programowania musi być rozwijany i wyposażany w nowe opcje skracające czas tworzenia kodu. Tak się dzieje z JavaScriptem, który systematycznie uaktualniany jest o obsługę również rozwijającego się standardu DOM.

XPath – ścieżka trzeciego stopnia

Podstawowe narzędzia służące do wyboru konkretnych elementów i operacji na nich to np. funkcja getElementById(), zaimplementowana w JavaScripcie już dawno. W poprzednim numerze korzystaliśmy z niej, pisząc kod dynamicznie generujący spis treści. Biorąc pod uwagę, że oprócz tej opcji podobne funkcje oferuje jeszcze jedynie getElementsByTagName(), daje to w efekcie mały zasób narzędzi. Czemu nie użyć analogicznego, uniwersalnego mechanizmu selektorów, jakim dysponuje język CSS?

Takim rozszerzeniem DOM, wprowadzonym w wersji trzeciej, jest właśnie XPath (XML Path Language) – system notacji służący do wybierania niemal dowolnych węzłów, np. wszystkich potomków drugiego poziomu wybranego elementu. Taki schemat selekcji jest też bardziej naturalny dla użytkownika, bo główny wybór dokonywany jest na bazie nazw tagów XHTML, a nie ich atrybutów, np. id. Załóżmy, że fragment strony internetowej, na której operujemy, wygląda tak jak poniżej:

<html><body>
<div id="rec">
<p>Witam! </p>
<h1 class="text">1.</h1>
<p>To jest tekst wstępu</p>
<h2> 1.1.</h2>
<p> Tekst paragrafu 1.1 </p>
<img src="pic0.png" />
<p> Tekst paragrafu 1.2 </p>
<h2> 1.2.</h2>
<p> Tekst 1 paragrafu 1.2
<img src="pic1.jpg" />
<img src="pic2.jpg" />
</p>
<p> Tekst 2 paragrafu 1.2 </p>
<p> Tekst 3 paragrafu 1.2 </p>
<h2> 1.3.</h2>
<p> Tekst 1 paragrafu 1.3 </p>
<p> Tekst 2 paragrafu 1.3 </p>
</div>
</body></html>

Zadanie jest proste: jak wybrać pierwsze dwa paragrafy będące treścią drugiego podtytułu <h2>? Aby móc tego dokonać, używając tylko metody getElementById(), przynajmniej każdy tag <h2> musiałby mieć nadany identyfikator, i to nie dowolny, a w pewien sposób usystematyzowany, choćby przez uwzględnienie w nim liczby porządkowej. Inaczej przy wyborze konkretnych tagów trzeba by pobrać całą ich listę metodą getElementsByTagName(), po czym dopiero po niej iterować do żądanych elementów.

Selektory XPath

W notacji XPath występują praktycznie dwa podstawowe elementy: ścieżki i osie (ang. Axes). Ścieżkę do konkretnych elementów tworzy się w sposób nieco podobny do adresowania katalogów na dysku twardym w Linuksie. Jest to o tyle trafne porównanie, że podobnie jak w tym systemie, w XPath występują ścieżki względne i bezwzględne, a ich znaczenie jest bardzo zbliżone do uniksowych. Należy pamiętać jedynie, że ostatni element ścieżki odnosi się do wszystkich znaczników o danej nazwie na danym poziomie drzewa DOM. Najprostszy selektor ma zatem postać:

nazwa_tagu

np. div – i wybiera wszystkie takie tagi. Jest to zarazem najprostszy przykład ścieżki względnej, liczonej zawsze od węzła bieżącego – tak jak w przypadku katalogów. Ścieżkę można rozbudowywać w głąb drzewa przy użyciu ukośnika. Odnosząc to do podanego przykładu, jeśli bieżącym węzłem jest <body>, selektor div/h2 wybierze podpunkty 1.1, 1.2 oraz 1.3. Ścieżki bezwzględne tworzy się w analogiczny sposób, ale rozpoczynając je od ukośnika, który w XPath oznacza zawsze węzeł główny (root) przetwarzanego dokumentu. Notacja tego typu ma jednak zastosowanie praktycznie tylko w przypadkach przetwarzania osobnych dokumentów XML, nie zaś stron XHTML, gdzie węzeł główny jest zawsze ten sam – <html> i jest on rzadko modyfikowany.

Ciekawszą funkcję realizuje podwójny ukośnik, nakazujący wybór wszystkich wystąpień danego typu znaczników poniżej wskazanego węzła, czyli dzieci dowolnego poziomu. I tak, selektor div//p wybierze zarówno pierwszy paragraf („Witam!”), jak i pozostałe – „To jest tekst wstępu”, „Tekst 1” itd. Podobnie jak w Uniksie/Linuksie, w notacji względnej dostępne są również selektor bieżącego elementu - . (kropka) oraz rodzica - .. (dwie kropki). Analogicznie do CSS istnieje również sposób wyboru tagów o konkretnych atrybutach – przez użycie znaku @. I tak, aby wybrać tylko paragrafy klasy txt w całym dokumencie, należy użyć ścieżki //p[@class='txt']. W taki sam sposób można wybrać tagi ze zdefiniowanym konkretnym atrybutem, bez badania jego wartości, np. div/h1[@name]. Można również używać znaków wybierających dowolny ciąg, np. *. Selektor div//p[@*] wybierze zatem wszystkie paragrafy z ustawionym przynajmniej jednym artybutem, nieważne, jakim ani na jaką wartość, ale ominie puste tagi <p>.


Ocena: +++++    (aby ocenić, musisz się zalogować w serwisie)

< Poprzednia 1 2 Następna >

Podobne artykuły:

Komentarze:

Redakcja nie ponosi odpowiedzialności za treść komentarzy.
Nikt jeszcze nie skomentował.
Niezalogowany

Aby mieć dostęp do niektórych części serwisu NEXT (np. forum dyskusyjnego, oceny numeru, newslettera), musisz posiadać konto w naszym serwisie. Zachęcamy do darmowej rejestracji!

Jeżeli posiadasz już konto w serwisie, to zaloguj się.

Copyright © 1999-2012 INTERIA.PL Sp. z o.o., wszystkie prawa zastrzeżone.
Korzystanie z portalu oznacza akceptację Regulaminu
webmaster@nextmag.pl