|
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
 Temat numeru: Przejdź do innych artykułów:
|
NEXT 4/2008 - Zbudować dobry DOM
manipulacja treścią stron XHTML za pomocą JavaScriptu
Data: 18 marzec 2008
Identyfikator: 080447
Możliwości JavaScriptu wykraczają daleko poza tworzenie animacji wizualnie ożywiających witrynę. Zastosowany do przetwarzania plików XML stanowi podstawę popularnej dziś techniki AJAX. U jej podstaw leży zaś bardzo przydatna funkcja – dynamiczna zmiana zawartości stron, bo przecież XHTML to też XML. Strona 1 z 2
Strona XHTML jest poprawna nie tylko wtedy, gdy ładnie wygląda, a poszczególne elementy nie rozsuwają się w którejś przeglądarce. Poprawny dokument to ten, którego spójność zachowana jest na poziomie semantyki kodu. To zaś już niełatwe zadanie, ponieważ przysparza webmasterom wielu problemów. Co to oznacza w praktyce? Ogólnie mówiąc, poprawne używanie znaczników, ale rozumiane na wielu płaszczyznach. Po pierwsze, stosowanie np. nagłówków (tagi <h1>, <h2> etc.) zgodnie ze znaczeniem obejmowanego przez nie tekstu na stronie (czyli po nagłówku pierwszego rzędu nie powinien bezpośrednio występować nagłówek rzędu trzeciego/czwartego). Po drugie, co wciąż nie jest na 100 proc. przestrzegane, kolejność znaczników otwarcia i zamknięcia elementów powinna być ściśle zachowana, zgodnie z wytycznymi standardu XHTML, co oznacza choćby pełne zawieranie się jednych tagów wewnątrz innych. Na niespójność – DOM
JavaScript od dawna pozwalał na wstawianie w kodzie już wyświetlonej strony nowej treści – początkowo poleceniem document.write() wykonywanym w miejscu, gdzie treść miała być dodana. Metoda ta, prosta i skuteczna, ma jednak poważną wadę: nie zapewnia kontroli nad spójnością kodu strony. Oczywiście, jeśli stosowana będzie do wklejenia prostego komunikatu:
Właśnie dlatego stworzono DOM (Document Object Model) – warstwę abstrakcji pozwalającą operować na reprezentacji kodu XHTML, a nie na kodzie jako takim. Java- Script wyposażono zaś w narzędzia ułatwiające te czynności, choć w porównaniu z użyciem document.write() mogą się one wydać niesamowitym przerostem formalizmu. Zobaczmy zatem, jak stworzyć dynamiczny spis treści na stronie. Budowa i zarządzanie drzewem DOM Poprawna strona XHTML ma znaczniki ułożone w strukturze drzewiastej. Wierzchołkiem jest #document, wirtualny węzeł reprezentujący cały dokument, jego jedynym dzieckiem oczywiście <html>, jego dziećmi – <head> i <body> itd. Taka zależność oznacza łatwość operacji na wybranych elementach. Po drzewie można swobodnie nawigować, odnajdując rodziców (parents) wybranego obiektu, iterować po jego dzieciach (children), a także sąsiadach, dzieciach tego samego rodzica (siblings). Reprezentację strony z oznaczeniami wzajemnych ról obiektów przedstawia ilustracja otwierająca artykuł.
Taki podział oznacza także, że pojedynczy tag jest najmniejszą jednostką, którą można operować z poziomu drzewa DOM. Jednocześnie usunięcie wybranego obiektu usuwa wszystkie jego dzieci. Warto pamiętać przy tym, że zgodnie ze specyfikacją XHTML nawet elementy nieujęte explicite znacznikiem są domyślnie opakowywane tzw. anonimowym tagiem. W taki sposób potraktowany będzie np. łańcuch „Hej!” w poniższym kodzie:
Ocena:
 (aby ocenić, musisz się zalogować w serwisie)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ę. |
Aktualności NEXT
del.icio.us
Wykop mnie
Digg this story
dodajdo.com
Copyright © 1999-2012 INTERIA.PL Sp. z o.o., wszystkie prawa zastrzeżone. Korzystanie z portalu oznacza akceptację Regulaminu webmaster@nextmag.pl