„DOM” to termin, który jest często używany w projektowaniu i programowaniu stron internetowych typu front-end. To skrót od „Document Object Model” i jest to podstawowa część stron internetowych.
Choć DOM jest ważny, wiele osób go nie rozumie. W rzeczywistości możesz programować strony internetowe przez lata, nie ucząc się o tym zbyt wiele. Jednak wraz z postępem technologii front-end zrozumienie DOM staje się coraz ważniejsze.
Zrozumienie kontraktu DOM
W programowaniu obiektowym istnieje konstrukcja zwana interfejsem. Interfejs sam w sobie nic nie robi. Zamiast tego tworzy kontrakt. Mówi, że wszystko może wchodzić w interakcje z czymkolwiek innym, o ile jest zgodne z zasadami kontraktu interfejsu.
Posiadanie interfejsu pozwala dowolnej części programu na interakcję z dowolną inną częścią programu w kontrolowany i przewidywalny sposób. Interfejs umożliwia również współpracę jednej części programu z dowolną inną częścią, nawet jeśli nie wie nic o części programu po drugiej stronie interfejsu.
Interfejs jest jak gniazdko elektryczne w ścianie. Twoje urządzenie nie musi wiedzieć, skąd pochodzi moc, o ile napięcie jest prawidłowe. Transformator na rogu nie musi wiedzieć, co zasila. Wystarczy, że wyśle do domu prąd o odpowiednim napięciu.
DOM jest warstwą interfejsu między stroną internetową a kodem, który ją tworzy i zmienia. Kiedy odwiedzasz witrynę internetową, widzisz, jak przeglądarka renderuje DOM tej witryny. Kiedy piszesz HTML, w rzeczywistości programujesz używając API DOM (interfejs programowania).
Standard DOM jest utrzymywany przez organizację o nazwie Konsorcjum World Wide Weblub W3C. Stworzyli bardzo szczegółowa dokumentacja definiująca DOM standard.
W tym momencie możesz pomyśleć, że nie wykonują zbyt dobrej pracy. W końcu jest tak wiele problemów spowodowanych przez problemy ze zgodnością z różnymi przeglądarkami.
Problem nie dotyczy standardu. Chodzi o same przeglądarki. Wiele przeglądarek dodało do swojej implementacji DOM funkcjonalność niezgodną ze standardami W3C. Czasami ta funkcjonalność staje się popularna i zostaje zaimplementowana w standardzie DOM, zmuszając inne przeglądarki do nadrobienia zaległości.
Innym problemem jest to, że niektórzy ludzie nadal używają starszych wersji przeglądarek, które nie mają wbudowanego najnowszego standardu DOM. Czasami przeglądarki nie implementują poprawnie standardu.
Jaka jest struktura DOM
Możesz myśleć o DOM jak o drzewie. Plik elementem jest pień, a wszystkie elementy w jego wnętrzu to gałęzie. Kiedy zagnieżdżasz elementy HTML wewnątrz elementu nadrzędnego, w rzeczywistości tworzysz gałęzie z tej gałęzi. Właściwym terminem dla każdej gałęzi jest „węzeł”.
Struktura drzewa tworzy logiczne relacje między węzłami, takie jak drzewo genealogiczne. Każdy węzeł może mieć rodzica i przodków, z których się rozgałęzia. Mogą mieć rodzeństwo. Węzły mogą mieć dzieci i potomków. Myślenie w tych kategoriach bardzo pomaga, gdy używa się JavaScript i CSS do interakcji z DOM.
Jak HTML współdziała z DOM
DOM definiuje się poprzez utworzenie obiektu dokumentu z interfejsem dokumentu. Twój kod HTML to najbardziej bezpośredni sposób na utworzenie dokumentu. HTML zapewnia prosty sposób definiowania dokumentu bez konieczności wykonywania tradycyjnego programowania.
Jeśli dopiero zaczynasz korzystać z HTML, oto pięć wskazówek, jak się z nim zapoznać.
HTML jest podstawą każdej strony internetowej. Jeśli jesteś początkującym, pozwól, że przeprowadzimy Cię przez podstawowe kroki do zrozumienia języka HTML.
HTML jest prostszy i bardziej wybaczający niż tradycyjne języki programowania. Ułatwia interakcję z DOM dla początkujących projektantów stron internetowych.
Jak CSS współdziała z DOM
Gdy HTML ustrukturyzuje dokument DOM, CSS może nadać temu dokumentowi styl. Aby to zrobić, musi być w stanie znaleźć elementy, które chcesz stylizować. Robi to na kilka sposobów.
Możesz uzyskać dostęp do węzłów dokumentów, odwołując się do elementów według nazwy, na przykład i. CSS może również uzyskać bezpośredni dostęp do elementów, korzystając z odwołań klasa i ID nazwy. Styl klasowy jest stosowany do kilku elementów, dzięki czemu można stylizować je wszystkie w tym samym czasie. I odwrotnie, stylizacja identyfikatora stosuje zmiany tylko do pojedynczego elementu.
Możesz także uzyskać dostęp do struktury drzewa genealogicznego za pomocą CSS i dostroić dostęp, aby uzyskać większą kontrolę. Selektory CSS pozwalają wybrać wiele elementów i dają zestaw sztuczek umożliwiających ich znalezienie. Możesz wyszukiwać dzieci według ich pochodzenia, kombinacji klas i nie tylko.
Jak JavaScript współdziała z DOM
JavaScript ma największą kontrolę nad dokumentem, ponieważ JavaScript jest rzeczywistym językiem programowania z obiektami, kontrolą przepływu, zmiennymi itp. DOM zapewnia kilka interfejsów, które umożliwiają JavaScriptowi manipulowanie dokumentem, elementami i innymi węzłami.
Związane z: Co to jest JavaScript?
JavaScript może dodawać i usuwać węzły, a także zmieniać ich styl. A JavaScript może obserwować zdarzenia w dokumencie, takie jak najeżdżanie myszą na element, klikanie i naciskanie klawiszy.
JavaScript może wyszukiwać i poruszać się po drzewie dokumentów w bardzo podobny sposób do CSS. Potrafi znaleźć elementy według identyfikatora i klasy. I może pobierać listy elementów podrzędnych jako tablice.
Przyszłość tworzenia stron internetowych i DOM
Internet bardzo się zmienił od samego początku. Na początku JavaScript był używany głównie do efektów specjalnych i prostych prezentacji danych. Większość stron internetowych to niewiele więcej niż cyfrowe broszury. Jednak AJAX wszystko to zmienił.
AJAX umożliwia witrynom aktualizowanie danych wyświetlanych z serwera w locie bez ponownego ładowania strony. Przed AJAX każdą zmianę danych można było zobaczyć tylko wtedy, gdy strona została ponownie załadowana lub użytkownik przeszedł na inną stronę.
Po AJAX, aplikacje internetowe stały się coraz bardziej popularne. Internet nie jest już zbiorem prostych statycznych witryn internetowych i kilku aplikacji o wysokiej funkcjonalności, takich jak eBay. Obecnie internet jest prawie drugim systemem operacyjnym, pełnym wysoce funkcjonalnych aplikacji.
Wraz ze wzrostem oczekiwań użytkowników technologia musi nadążać. JavaScript nie jest najpotężniejszym ani najszybszym językiem. Cierpi również na kilka problemów, takich jak błędy liczb zmiennoprzecinkowych, które sprawiają, że jest mniej pożądany dla programistów. W tym miejscu pojawia się WebAssembly.
WebAssembly zapewnia wiele korzyści wynikających z kodu natywnego w przeglądarce, w tym lepszą prędkość i lepszy dostęp do sprzętu. Pozwoli programistom używać innych języków do tworzenia stron internetowych, takich jak C ++ i Rust.
Ale nawet pomimo ogromnych ulepszeń, które przyniesie WebAssembly, DOM nadal będzie istniał, zapewniając spójny interfejs między kodem a tym, co jest wyświetlane w przeglądarce.
Zmniejsz zmęczenie oczu i wydłuż żywotność baterii, przełączając program Microsoft Outlook w tryb ciemny.
- Programowanie
- HTML
- CSS
- Model obiektu dokumentu
Lee jest pełnoetatowym koczownikiem i politykiem o wielu pasjach i zainteresowaniach. Niektóre z tych pasji obracają się wokół produktywności, rozwoju osobistego i pisania.
Zapisz się do naszego newslettera
Dołącz do naszego biuletynu, aby otrzymywać wskazówki techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Jeszcze jeden krok…!
Potwierdź swój adres e-mail w wiadomości e-mail, którą właśnie wysłaliśmy.
