Programowanie DOM: Manipuluj stronami internetowymi za pomocą kodu

Ujawnienie: Twoje wsparcie pomaga utrzymać działanie witryny! Pobieramy opłatę za polecenie niektórych usług, które zalecamy na tej stronie.


Document Object Model lub DOM opisuje, w jaki sposób każdy element na stronie HTML odnosi się do samego dokumentu.

Zasadniczo każda strona HTML, XHTML lub XML po przesłaniu do sieci staje się dokumentem. DOM traktuje te dokumenty jako strukturę drzewa. Sam dokument jest najwyższą strukturą, a każdy element na stronie jest reprezentowany jako obiekt.

Oznacza to, że każdy obraz, każdy akapit, każdy nagłówek itd. To osobny obiekt, który ma swój własny związek z dokumentem.

Wywołując konkretny element po nazwie, twórcy stron internetowych mogą go modyfikować. Oznacza to, że twórcy stron internetowych mogą pobierać i ustawiać swoje właściwości.

DOM umożliwia także dodawanie i usuwanie elementów lub obiektów. Wreszcie pozwala programistom na przechwytywanie i reagowanie na działania użytkownika lub przeglądarki, skutecznie radząc sobie z wydarzeniami.

Krótka historia DOM

Historia DOM sięga czasów wojen przeglądarkowych i wydania pierwszych języków skryptowych.

Gdy zarówno Netscape Navigator, jak i Microsoft Internet Explorer wydały własne wersje JavaScript, programiści potrzebowali interfejsu, który umożliwiałby dostęp do elementów strony za pomocą tych języków skryptowych.

Oczywiście każda przeglądarka miała własną metodę, ale spowodowało to wiele problemów ze zgodnością, ponieważ producenci przeglądarek próbowali się prześcignąć, dodając nowe funkcje.

W końcu W3C zaczął pracować nad specyfikacją dla DOM XML, zwanego także DOM poziomu 1, który miał być przenośny we wszystkich przeglądarkach.

Miał również działać dla każdego języka programowania, który mógłby manipulować dokumentami XML. Ta specyfikacja została przyjęta jako standard pod koniec 1998 r. Obecna wersja to DOM 4, zalecenie W3C z 2015 r.

Dwa widoki DOM

DOM składa się z dwóch części; rdzeń i HTML. Rdzeń jest podstawą części HTML i służy do reprezentowania funkcjonalności dokumentów XML do manipulowania strukturą dokumentu, jego elementami i atrybutami.

Część HTML określa określone elementy HTML i ich funkcjonalność. Jako taki DOM jest postrzegany zarówno jako API, jak i obiekt.

DOM jako interfejs API

Jako interfejs programowania aplikacji (API) służy zarówno do dokumentów HTML, jak i XML. Daje nam standardowy zestaw obiektów używanych w tych dokumentach, a także służy jako model tego, jak można łączyć te obiekty, uzyskiwać do nich dostęp i nimi manipulować.

DOM jako obiekt

Model obiektowy w DOM odnosi się do faktu, że dokumenty i elementy są zdefiniowane jako obiekty. W tym sensie identyfikuje:

  • Interfejsy i obiekty używane do reprezentowania dokumentu i manipulowania nim
  • Ich zachowanie i atrybuty
  • Ich relacje.

Struktura DOM

Strukturalnie DOM bardzo przypomina dokument, który modeluje. Każdy element dokumentu jest postrzegany jako obiekt lub węzeł zorganizowany w sposób hierarchiczny.

Każdy węzeł ma funkcję i tożsamość, a każdy węzeł może mieć również dowolną liczbę węzłów potomnych. Najczęstsze węzły to elementy, tekst i atrybuty.

Węzły elementu

Węzły elementów to pojedyncze znaczniki lub pary znaczników w kodzie HTML. Mogą mieć węzły potomne, które mogą być innymi elementami lub węzłami tekstowymi.

Węzły tekstowe

Węzły tekstowe to rzeczywista zawartość pomiędzy znacznikami HTML. Zwykle mają węzeł nadrzędny i czasami węzły rodzeństwa, ale nie mogą mieć własnych węzłów podrzędnych.

Węzły atrybutów

Węzły atrybutów są nieco wyjątkowe. Nie mają węzła nadrzędnego, podrzędnego ani rodzeństwa, ale reprezentują atrybuty zdefiniowane w tagach HTML, takie jak atrybut href w tagach a lub atrybuty src w tagach img.

Nowy atrybut można utworzyć za pomocą document.createAttribute (), a następnie można przypisać go do węzła elementu i ustawić jego wartość. Innym sposobem odwoływania się do atrybutów jest bezpośredni dostęp do atrybutów elementu za pomocą metody getAttribute () i metody setAttribute () w celu ustawienia jego wartości.

Mówiąc o atrybutach, warto wspomnieć, że większość atrybutów używanych z tagami HTML jest stosunkowo prosta i składa się z jednej wartości dla określonej właściwości powiązanej z tym tagiem. Istnieją jednak również atrybuty stylu, które mogą być bardziej złożone.

Atrybuty stylu są stosowane za pomocą CSS. Możesz go użyć do zastosowania stylów do poszczególnych znaczników, wszystkich znaczników określonego typu lub możesz przypisać atrybuty stylu za pomocą klas.

Aby jeszcze bardziej skomplikować sprawę, style dla określonego elementu można dziedziczyć z dowolnego z tych źródeł. Możesz także manipulować i zmieniać te style, zmieniając atrybut stylu znacznika lub używając atrybutów klasy znacznika.

Może to jednak zmienić wszystkie parametry stylu elementu, a w niektórych przypadkach nie jest to praktyczne, zwłaszcza jeśli chcesz zmienić tylko jeden parametr stylu.

Na szczęście atrybuty stylu różnią się od innych atrybutów. Są zdefiniowane jako obiekty i mają właściwości dla każdego możliwego parametru. Do tych właściwości można następnie uzyskać dostęp, zaktualizować i w inny sposób nimi manipulować.

Korzystanie z DOM

Ponieważ każdy dokument jest także obiektem, służy on jako punkt wyjścia do manipulowania innymi węzłami w nim. Do tych węzłów potomnych można uzyskać dostęp i nimi manipulować przy użyciu następujących metod:

  • getElementById ()
  • getElementsByTagName ()
  • createElement ()
  • createAttribute ()
  • createTextNode ().

Możesz także dynamicznie dodawać, aktualizować i usuwać węzły za pomocą następujących metod:

  • insertBefore ()
  • replaceChild ()
  • removeChild ()
  • appendChild ()
  • cloneNode ().

DOM jest powiązany bezpośrednio z HTML, CSS i JavaScript, ponieważ odzwierciedla tagi i atrybuty zdefiniowane przez te standardy, a także służy jako interfejs API dla skryptów po stronie klienta.

Zasoby

Poniższa lista zasobów zawiera szczegółowy przegląd DOM i są odpowiednie zarówno dla początkujących, jak i zaawansowanych użytkowników. Dołączona jest także lista referencyjna oraz zasoby z przykładami.

  • JavaScript i seria DOM: jest to bardzo szczegółowa seria samouczków opisujących szczegółowo użycie JavaScript do manipulowania DOM.
  • JavaScript DOM Tutorials: zestaw interaktywnych samouczków, które uczą jak uzyskiwać dostęp do DOM i manipulować nim z JavaScript. Zakłada się wcześniejszą znajomość JavaScript, jednak warto wspomnieć, że nie są używane żadne konkretne biblioteki.
  • Węzły DOM: bardzo dokładny przegląd węzłów DOM odpowiedni dla początkujących, którzy chcą zapoznać się ze strukturą DOM i jakie węzły zawiera.
  • JavaScript DOM – ćwiczenia, praktyka, rozwiązanie: zestaw różnych ćwiczeń obejmujących DOM, od prostych ćwiczeń po te bardziej złożone.
  • W3C Document Object Model (DOM): ten przewodnik opublikowany przez W3C oferuje wprowadzający i przyjazny dla początkujących przegląd DOM, historii i sposobu jego działania.
  • Wprowadzenie do DOM: krótkie wprowadzenie koncepcyjne do DOM opublikowane przez Mozilla Developer Network, które wyjaśnia, w jaki sposób zapewnia strukturę dokumentów HTML i XML oraz w jaki sposób można uzyskać do niego dostęp.
  • W3C DOM4: najnowsza rekomendacja DOM autorstwa W3C z 2015 roku, która zawiera przegląd i szczegółowe specyfikacje DOM.
  • Referencje DOM: przydatna lista referencji opublikowana przez Microsoft Developer Network, w tym właściwości, metody, zdarzenia i wiele innych.

Książki

Jeśli wolisz uczyć się z książek, istnieje wiele opcji. Książki na liście szczegółowo opisują DOM, jego działanie i manipulowanie dokumentami.

  • DOM Scripting: Web Design with JavaScript and Document Object Model (2005), autor: Jeremy Keith: ta książka zapewnia szybkie i łatwe odniesienie dla tych, którzy nie są ekspertami w dziedzinie kodu, ale chcą szybko nauczyć się i korzystać z JavaScript i DOM, aby dodać funkcjonalność ich stron internetowych. Zawiera mnóstwo przykładów i prowadzi czytelników przez budowanie kilku rzeczywistych projektów.
  • Document Object Model (2002), autor: Joe Marini: autor tej książki pomaga poznać pojęcia, projekt, teorię i pochodzenie DOM. W całej książce będziesz używać DOM do sprawdzania, nawigacji i manipulowania węzłami i treściami dokumentu; następnie naucz się budować przydatne aplikacje, które można łatwo przenieść do dowolnej implementacji zgodnej z DOM bez konieczności ponownego kodowania.
  • DOM Enlightenment: Exploring JavaScript and the Modern DOM (2013), autor: Cody Lindley: z pomocą tej książki nauczysz się, jak efektywniej manipulować HTML, wykonując skrypty na Document Object Model (DOM) bez korzystania z biblioteki DOM. Dzięki wielu łatwym do strawienia przykładom autor przedstawia kompletny przegląd nowoczesnych koncepcji DOM, aby zademonstrować, jak działają różne obiekty węzłów.

Idź naprzód i przejdź przez DOM

Zrozumienie DOM jest jedną z podstawowych koncepcji każdego początkującego programisty.

Najlepsze jest to, że nie potrzebujesz żadnych specjalnych narzędzi, aby zacząć z niego korzystać. Wszystko czego potrzebujesz to skrypt i preferowana przeglądarka. Po utworzeniu skryptu i umieszczeniu go na stronie internetowej można rozpocząć korzystanie z interfejsu API dla elementów dokumentu lub okna do manipulowania dokumentem na różne sposoby.

Powyższe zasoby będą służyć jako solidny punkt wyjścia do przejścia przez DOM.

Dalsza lektura i zasoby

Mamy więcej przewodników, samouczków i infografik związanych z kodowaniem i tworzeniem stron internetowych:

  • Komponowanie dobrego HTML: jest to solidne wprowadzenie do pisania poprawnie sformatowanego HTML i korzystania z oprogramowania weryfikującego HTML.
  • CSS3 – wprowadzenie, przewodniki i zasoby: jest to świetne miejsce do rozpoczęcia nauki układu strony.
  • Zasoby ASP.NET: w tym przewodniku zapoznasz się z platformą Microsoft .NET do tworzenia stron internetowych.

HTML dla początkujących – najlepszy przewodnik

Jeśli naprawdę chcesz nauczyć się języka HTML, stworzyliśmy artykuł o długości książki HTML dla początkujących – przewodnik po języku ostatecznym.

I to naprawdę najlepszy przewodnik; zabierze cię od samego początku do opanowania.

HTML dla początkujących - najlepszy przewodnik
HTML dla początkujących – najlepszy przewodnik

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map