DOM jest często nazywany drzewem DOM, ponieważ składa się z drzewa obiektów zwanych węzłami. Dowiedziałeś się, czym jest Document Object Model (DOM), jak uzyskać dostęp do obiektu dokumentu i zmienić jego właściwości za pomocą konsoli, a także poznaliśmy różnicę między kodem źródłowym HTML a DOM.
W tym podręczniku znajdziesz terminologię HTML niezbędną do pracy z JavaScript i DOM, dowiesz się, czym jest drzewo i węzły DOM i naucz się identyfikować najczęstsze typy węzłów. Możesz także utworzyć program JavaScript w konsoli, aby interaktywnie modyfikować model DOM.
Terminologia HTMLZrozumienie terminów HTML i JavaScript ma kluczowe znaczenie dla pracy z modelem DOM. Rzućmy okiem na główne warunki.
Spójrz na ten element HTML:
Dom
Ma kotwicę, która jest linkiem do pliku index.html.
Wszystko pomiędzy znacznikami otwierającymi i zamykającymi jest elementem HTML.
Wróćmy do pliku index.html z poprzedniego samouczka:
Nauka DOM-u
Obiektowy model dokumentu
Najłatwiejszym sposobem uzyskania dostępu do elementu za pomocą JavaScript jest użycie atrybutu id. Dodajmy powyższy link do pliku index.html z id="nav".
...
Obiektowy model dokumentu
Dom
...
Załaduj (lub odśwież) stronę w oknie przeglądarki i spójrz na DOM, aby upewnić się, że kod został zaktualizowany.
Następnie użyj metody getElementById(), aby uzyskać dostęp do całego elementu. Wpisz w konsoli:
document.getElementById("nav");
Dom
Metoda getElementById() pobierze cały element. Teraz zamiast wpisywać ten obiekt i metodę za każdym razem, gdy chcesz uzyskać dostęp do łącza nawigacyjnego, możesz umieścić element w zmiennej, aby ułatwić sobie pracę.
niech navLink = document.getElementById("nav");
Zmienna navLink zawiera kotwicę. Tutaj możesz łatwo zmieniać atrybuty i wartości. Na przykład, aby zmienić lokalizację linku, zmień atrybut href:
navLink.href = "https://www.wikipedia.org";
Możesz także zmienić tekst, ponownie przypisując właściwość textContent:
navLink.textContent = "Przejdź do Wikipedii";
Teraz, jeśli obejrzysz ten element w konsoli lub sprawdzisz tag Elementy, zobaczysz, jak został zaktualizowany.
łącze nawigacyjne;
Przejdź do Wikipedii
Zmiany zostaną odzwierciedlone również na froncie.
Odświeżenie strony zwróci wszystkie oryginalne wartości.
W tym momencie powinieneś zrozumieć, jak korzystać z metody document, aby uzyskać dostęp do elementu, jak przypisać element do zmiennej oraz jak zmienić właściwości i wartości elementu.
Węzły drzewa i DOMWszystkie elementy w DOM są zdefiniowane jako węzły. Istnieje wiele rodzajów węzłów, ale są trzy główne, z którymi będziesz pracować najczęściej:
Kiedy element HTML jest elementem DOM, nazywany jest węzłem elementu. Każdy pojedynczy tekst poza elementem jest węzłem tekstowym i Komentarz HTML– węzeł komentarza. Oprócz tych trzech typów węzłów, sam obiekt dokumentu jest węzłem dokumentu, który jest węzłem głównym wszystkich innych węzłów.
DOM składa się ze struktury drzewiastej zagnieżdżonych węzłów, często nazywanej drzewem DOM. Zapewne wiesz, czym jest drzewo genealogiczne – jest to schematyczne przedstawienie więzi rodzinnych, na które składają się rodzice, dzieci i najbliższa rodzina. Węzły w DOM są również nazywane węzłami nadrzędnymi i podrzędnymi na podstawie ich relacji z innymi węzłami.
Na przykład utwórz plik nodes.html. dodaj do niego węzeł tekstowy, a także węzły komentarzy i elementów.
Nauka o węzłach
Węzeł elementu
Węzeł tekstowy.
Węzeł elementu html jest elementem nadrzędnym. head i body to węzły potomne HTML. body zawiera trzy węzły potomne i wszystkie są na tym samym poziomie — typ węzła nie ma wpływu na poziom zagnieżdżenia.
Uwaga: Podczas pracy z DOM generowanym przez HTML, dopełnienie kod źródłowy HTML tworzy wiele pustych węzłów tekstowych, które nie będą widoczne na karcie Elementy DevTools. Więcej na ten temat pod linkiem.
Definicja typu węzłaKażdy węzeł w dokumencie ma typ, do którego dostęp można uzyskać za pomocą właściwości nodeType. Mozilla Developer Network ma zaktualizowaną listę wszystkich stałych typów węzłów. Poniżej znajduje się tabela najpopularniejszych typów węzłów.
Na karcie Elementy w Narzędziach deweloperskich możesz zauważyć, że za każdym razem, gdy klikniesz i wybierzesz dowolną linię w modelu DOM, obok niej pojawi się wartość == 0 USD. To jest bardzo wygodnym sposobem uzyskać dostęp do bieżącego aktywnego elementu.
W konsoli node.html kliknij pierwszy element w treści (h1).
Za pomocą konsoli znajdź typ wybranego węzła za pomocą właściwości nodeType.
$0.nodeType;
1
Wybierając element h1, zobaczysz 1 jako wynik, który odnosi się do ELEMENT_NODE. Zrób to samo z innymi węzłami, a zwrócą odpowiednio 3 i 8.
Wiedząc, jak uzyskać dostęp do elementu, możesz zobaczyć typ węzła bez podświetlania elementów w DOM.
typ dokumentu.body.node;
1
Oprócz właściwości nodeType można również użyć właściwości nodeValue, aby uzyskać wartość węzła tekstowego lub komentarza, oraz właściwości nodeName, aby uzyskać znacznik elementu.
Zmiana DOM za pomocą zdarzeńDo tej pory widziałeś, jak zmienić DOM w konsoli, a wiadomo, że takie zmiany są tymczasowe; za każdym razem, gdy strona jest odświeżana, wszystkie zmiany są tracone. W tobie zaktualizowano kolor tła strony w konsoli. Spróbuj połączyć to, czego nauczyłeś się w tym samouczku, z tym, co już wiesz, aby utworzyć interaktywny przycisk zmieniający kolor tła.
Wróć do pliku index.html i dodaj element przycisku z identyfikatorem. Należy również dodać link do nowego pliku w nowym katalogu js js/scripts.js.
Nauka DOM-u
Obiektowy model dokumentu
Zmień kolor tła
Zdarzenie w JavaScript to czynność wykonywana przez użytkownika. Użytkownik najeżdża na element, klika go lub naciska określony klawisz na klawiaturze - to wszystko są zdarzenia. W tym konkretnym przypadku przycisk musi wykonać akcję, gdy użytkownik go kliknie. Aby to zrobić, musisz dodać detektor zdarzeń. Utwórz plik scripts.js i zapisz go w nowym katalogu js. Musisz zdefiniować element przycisku w pliku i przypisać go do zmiennej.
Za pomocą metody addEventListener() przycisk będzie nasłuchiwał kliknięć i wykonywał swoją funkcję po kliknięciu.
...
button.addEventListener("kliknięcie", () => (
// akcja zostanie przeniesiona tutaj
});
Wewnątrz funkcji należy umieścić kod z poprzedniej instrukcji, aby zmienić kolor tła na fuksja.
...
Tak wygląda skrypt:
niech button = document.getElementById("changeBackground");
button.addEventListener("kliknięcie", () => (
document.body.style.backgroundColor = "fuksja";
});
Zapisz i zamknij plik. Odśwież stronę index.html w przeglądarce. Kliknij nowy przycisk, a kolor tła strony zmieni się.
Tagi: ,Głównym narzędziem pracy i dynamicznych zmian na stronie jest DOM (Document Object Model) - model obiektowy wykorzystywany w dokumentach XML/HTML.
Zgodnie z modelem DOM dokument jest hierarchią.
Każdy znacznik HTML tworzy oddzielny element węzła, każdy fragment tekstu tworzy element tekstowy i tak dalej.
Mówiąc najprościej, DOM jest reprezentacją dokumentu jako drzewa znaczników. To drzewo jest utworzone przez zagnieżdżoną strukturę tagów oraz fragmentów tekstu strony, z których każdy tworzy osobny węzeł.
Najprostszy DOMNa początek zbudujmy drzewo DOM dla następnego dokumentu.
Nagłówek Piękny dokument
Najbardziej zewnętrznym tagiem jest , więc drzewo zaczyna od niego rosnąć.
Wewnątrz znajdują się dwa węzły: i - stają się węzłami potomnymi dla .
Formularz tagów węzły elementów(węzeł elementu). Przesłano tekst węzły tekstowe(węzeł tekstowy). Oba są węzłami równorzędnymi drzewa DOM.
Bardziej skomplikowany przykładRozważ teraz bardziej istotną stronę:
O łosiach Prawda o łosiach.
Elementem głównym hierarchii jest html . Ma dwóch potomków. Pierwsza to głowa, druga to ciało. I tak dalej, każdy zagnieżdżony tag jest dzieckiem powyższego tagu:
Na tym rysunku węzły-elementy są zaznaczone na niebiesko, elementy tekstowe są zaznaczone na czarno.
Drzewo tworzą niebieskie elementy węzłów - znaczniki HTML.
A tak wygląda drzewo, jeśli narysujesz je bezpośrednio na stronie HTML:
Nawiasem mówiąc, drzewo na tym rysunku nie uwzględnia tekstu składającego się tylko ze białych znaków. Na przykład taki węzeł tekstowy powinien pojawić się zaraz po . DOM, który nie zawiera takich „pustych” węzłów, nazywa się „znormalizowany”.
Spójrzmy na nieco bardziej złożony dokument.
Dokument danych
Górny tag to html , ma elementy potomne head i body i tak dalej. Rezultatem jest drzewo tagów:
Atrybuty
W tym przykładzie węzły mają atrybuty: style , class , id . Ogólnie rzecz biorąc, atrybuty są również uważane za węzły w DOM, których rodzicem jest element DOM, w którym są określone.
Jednak w programowaniu internetowym te dżungle zwykle nie są wspinane, a atrybuty są uważane po prostu za właściwości węzła DOM, które, jak zobaczymy później, mogą być ustawiane i zmieniane na żądanie programisty.
Właściwie jest to tajemnica, ale DOCTYPE jest również węzłem DOM i znajduje się w drzewie DOM po lewej stronie kodu HTML (fakt ten jest ukryty na rysunku).
PS Co do tajemnicy - oczywiście żart, ale tak naprawdę nie wszyscy o tym wiedzą. Trudno sobie wyobrazić, gdzie taka wiedza może się przydać...
Normalizacja w różnych przeglądarkachPodczas analizowania kodu HTML Internet Explorera natychmiast tworzy znormalizowane DOM, który nie tworzy węzłów z pustego tekstu.
Firefox ma inne zdanie, tworzy element DOM z każdego fragmentu tekstu.
Dlatego w przeglądarce Firefox drzewo tego dokumentu wygląda następująco:
Na rysunku, dla zwięzłości, węzły tekstowe są po prostu oznaczone skrótem. ciało ma 7 dzieci zamiast 3.
Opera też ma się czym pochwalić. Może dodać dodatkowy pusty element „tylko od siebie”.
Aby to zobaczyć, otwórz dokument. Zwraca liczbę węzłów podrzędnych elementu document.body , w tym węzłów tekstowych.
Dostaję 3 dla IE, 7 dla Firefoksa i 8 (!?) dla Opery.
W praktyce ta niezgodność nie stwarza dużych problemów, ale trzeba o tym pamiętać. Na przykład różnica może objawiać się w przypadku wyliczania węzłów drzewa.
Siła DOM-uPo co nam oprócz pięknych rysunków hierarchiczny model DOM?
Bardzo prosta:
Każdy element DOM jest obiektem i zapewnia właściwości umożliwiające manipulowanie jego zawartością, dostęp do rodziców i dzieci.
Obiekt document służy do manipulacji DOM.
Korzystając z document , możesz uzyskać żądany element drzewa i zmienić jego zawartość.
Na przykład ten kod pobiera pierwszy element ze znacznikiem ol, usuwa kolejno dwa elementy listy, a następnie dodaje je w odwrotnej kolejności:
Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)
Aby zobaczyć przykład działania takiego skryptu - kliknij na tekst na stronie łosia
W starszych podręcznikach i skryptach możesz zobaczyć modyfikacje kodu HTML strony, wywołując bezpośrednio document.write .
We współczesnych skryptach ta metoda prawie nigdy nie jest używana poprawna aplikacja można policzyć na palcach.
Unikaj document.write.. Chyba że naprawdę wiesz, co robisz (i po co czytasz tutorial - jesteś już guru)
Przyjrzyjmy się bliżej metodom dostępu i właściwościom elementów DOM.
Dostęp do elementówCały dostęp i zmiany w DOM pochodzą z obiektu dokumentu.
Zacznijmy od szczytu drzewa.
dokument.dokumentElementGórna etykieta. W przypadku poprawnej strony HTML będzie to .
treść dokumentuZnacznik, jeśli występuje w dokumencie (musi być).
W poniższym przykładzie kliknięcie przycisku spowoduje wyświetlenie tekstowej reprezentacji obiektów document.documentElement i document.body. Sam ciąg zależy od przeglądarki, chociaż obiekty są wszędzie takie same.
funkcja go() ( alert(document.documentElement) alert(document.body) )
Typy elementów DOMKażdy element DOM ma swój typ. Jego numer jest przechowywany w atrybucie elem.nodeType
W sumie w DOM występuje 12 rodzajów elementów.
Zwykle używany jest tylko jeden: Node.ELEMENT_NODE , którego numer to 1. Elementom tego typu odpowiadają znaczniki HTML.
Czasami przydatny jest również typ Node.TEXT_NODE, który jest równy 3. Są to elementy tekstowe.
Inne rodzaje w programowanie javascript nie są używane.
W poniższym przykładzie po kliknięciu przycisku zostaną wydrukowane typy document.documentElement , a następnie typ ostatniego elementu potomnego węzła document.body. Jest to węzeł tekstowy.
funkcja go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Tekst
PrzykładNa przykład tak wyglądałby dokument z powyższego przykładu w przeglądarce, gdyby każdy widoczny element został otoczony numerem nodeType w prawym górnym rogu.
... Dane
Tutaj pokazane są tylko elementy wewnątrz ciała, ponieważ są one jedynymi wyświetlanymi na stronie. Dla elementów typu 1 (znaczniki) odpowiedni znacznik jest wskazany w nawiasach, dla elementów tekstowych (typu 3) jest to tylko liczba.
Elementy potomnePoniższy przykład przechodzi przez wszystkie elementy podrzędne document.body .
For(var i=0; i CIAŁO
stylTa właściwość kontroluje styl. Jest to podobne do ustawiania stylu w CSS.
Na przykład możesz ustawić element.style.width :
Kod źródłowy tego przycisku:
Jeść główna zasada zamienniki - jeśli atrybut CSS ma łączniki, to aby ustawić styl, należy je zastąpić duże litery listy.
Na przykład, aby ustawić właściwość Z-index na 1000, należy ustawić:
element.style.zIndex = 1000
wewnętrzny HTMLTa właściwość była kiedyś obsługiwana tylko w IE. Jest teraz obsługiwany przez wszystkie nowoczesne przeglądarki.
Zawiera cały kod HTML wewnątrz węzła i można go zmienić.
Właściwość innerHTML służy głównie do dynamicznej zmiany zawartości strony, na przykład:
Document.getElementById("footer").innerHTML = "Cześć!"
Być może innerHTML jest jedną z najczęściej używanych właściwości elementu DOM.
Nazwa klasyTa właściwość określa klasę elementu. Jest to całkowicie analogiczne do atrybutu „class” HTML.
Elem.className = "nowa klasa"
onclick , onkeypress, onfocus ...A inne właściwości zaczynające się od „on…” przechowują odpowiednie funkcje obsługi zdarzeń. Na przykład możesz przypisać obsługę zdarzenia onclick.
Aby uzyskać więcej informacji na temat tych właściwości i programów obsługi zdarzeń, zobacz
Praca z modelem DOM
Każdy obiekt Window ma właściwość document, która odnosi się do obiektu Document. Ten obiekt Document nie jest samodzielnym obiektem. Jest centralnym obiektem bogatego interfejsu API znanego jako Document Object Model (DOM), który określa sposób dostępu do treści dokumentu.
Przegląd DOM-uDocument Object Model (DOM) to podstawowy interfejs programowania aplikacji, który zapewnia możliwość pracy z zawartością dokumentów HTML i XML. Interfejs programowania aplikacji DOM (API) nie jest szczególnie skomplikowany, ale istnieje wiele funkcji architektonicznych, o których należy wiedzieć.
Przede wszystkim należy zrozumieć, że zagnieżdżone elementy dokumentów HTML lub XML są reprezentowane jako drzewo obiektów DOM. Widok drzewa dokumentu HTML zawiera węzły reprezentujące elementy lub znaczniki, takie jak i
I węzły reprezentujące wiersze tekstu. Dokument HTML może również zawierać węzły reprezentujące komentarze HTML. Rozważ następujący prosty dokument HTML:
Przykładowy dokument To jest dokument HTML
Przykład prosty tekst.
Reprezentacja DOM tego dokumentu jest pokazana na poniższym diagramie:
Dla tych, którzy nie są jeszcze zaznajomieni ze strukturami drzew w programowaniu komputerowym, warto wiedzieć, że terminologia do ich opisu została zapożyczona z drzew genealogicznych. Nazywa się węzeł bezpośrednio nad danym węzłem rodzicielski w odniesieniu do tego węzła. Węzły znajdujące się o jeden poziom poniżej innego węzła są spółki zależne w odniesieniu do tego węzła. Nazywane są węzły, które znajdują się na tym samym poziomie i mają tego samego rodzica siostrzany. Węzły znajdujące się o dowolną liczbę poziomów poniżej innego węzła są jego dziećmi. Rodzic, dziadek i wszelkie inne węzły powyżej tego węzła są jego przodkami.
Każdy prostokąt na tym diagramie jest węzłem dokumentu, który jest reprezentowany przez obiekt Node. Zwróć uwagę, że na rysunku pokazano trzy różne rodzaje węzły. Korzeń drzewa to węzeł Dokument, który reprezentuje cały dokument. Węzły reprezentujące elementy HTML to węzły typu Element, a węzły reprezentujące tekst to węzły typu Tekst. Document, Element i Text są podklasami klasy Node. Document i Element to dwie najważniejsze klasy w DOM.
Typ węzła i jego podtypy tworzą hierarchię typów pokazaną na poniższym diagramie. Zwróć uwagę na formalne różnice między ogólnymi typami Document i Element oraz typami HTMLDocument i HTMLElement. Typ Document reprezentuje dokument HTML i XML, a klasa Element reprezentuje element tego dokumentu. Podklasy HTMLDocument i HTMLElement reprezentują w szczególności dokument HTML i jego elementy:
Na tym schemacie należy również zauważyć, że duża liczba podtypy klasy HTMLElement reprezentujące konkretne typy elementów HTML. Każdy z nich definiuje właściwości JavaScript, które odzwierciedlają atrybuty HTML określonego elementu lub grupy elementów. Niektóre z tych konkretnych klas definiują dodatkowe właściwości lub metody, które nie odzwierciedlają składni języka znaczników HTML.
Wybieranie elementów dokumentuDziałanie większości programów klienckich na JavaScript w jakiś sposób związane z manipulacją elementami dokumentu. Podczas wykonywania programy te mogą wykorzystywać zmienną globalną document, która odwołuje się do obiektu Document. Jednak, aby wykonać jakąkolwiek manipulację na elementach dokumentu, program musi w jakiś sposób uzyskać lub wybrać obiekty Element, które odnoszą się do tych elementów dokumentu. DOM definiuje kilka sposobów wybierania elementów. Możesz wybrać element lub elementy dokumentu:
przez wartość atrybutu id;
przez wartość atrybutu name;
według nazwy znacznika;
według nazwy klasy lub klas CSS;
zgodnie z pewnym Selektor CSS.
Wszystkie te techniki selekcji elementów opisano w poniższych podsekcjach.
Wybieranie elementów według wartości atrybutu idWszystkie elementy HTML mają atrybuty id. Wartość tego atrybutu musi być unikalna w obrębie dokumentu — żadne dwa elementy w tym samym dokumencie nie mogą mieć tej samej wartości atrybutu id. Wybierz pozycję wg wyjątkowa wartość atrybut id można wykonać za pomocą metody getElementById() obiektu Document:
Var sekcja1 = document.getElementById("sekcja1");
Jest to najłatwiejszy i najczęstszy sposób wybierania elementów. Jeśli skrypt musi być w stanie manipulować określonym zestawem elementów dokumentu, przypisz wartości do atrybutów id tych elementów i skorzystaj z możliwości wyszukiwania ich według tych wartości.
W wersje internetowe Eksplorator poniżej metody getElementById() IE8 wyszukuje wartości atrybutów id w sposób bez uwzględniania wielkości liter, a także zwraca elementy pasujące do wartości atrybutu name.
Wybieranie elementów według wartości atrybutu nameAtrybut name HTML był pierwotnie przeznaczony do nazywania elementów formularza, a wartość tego atrybutu była używana podczas przesyłania danych formularza na serwer. Podobnie jak atrybut id, atrybut name przypisuje elementowi nazwę. Jednak w przeciwieństwie do id, wartość atrybutu name nie musi być unikalna: wiele elementów może mieć tę samą nazwę jednocześnie, co jest dość powszechne w przypadku przycisków opcji i formularzy pól wyboru. Ponadto, w przeciwieństwie do id, atrybut name jest dozwolony tylko w niektórych elementach HTML, w tym w formularzach, elementach formularzy oraz elementach i .
Możesz wybrać elementy HTML na podstawie wartości ich atrybutów name za pomocą metody getElementsByName() obiektu Document:
Var radiobuttons = document.getElementsByName("ulubiony_kolor");
Metoda getElementsByName() nie jest zdefiniowana przez klasę Document, ale przez klasę HTMLDocument, więc jest dostępna tylko w dokumentach HTML i nie jest dostępna w dokumentach XML. Zwraca obiekt NodeList, który zachowuje się jak tablica obiektów Element tylko do odczytu.
W IE metoda getElementsByName() zwraca również elementy, których wartości atrybutu id pasują do podanej wartości. Aby zapewnić kompatybilność z różne wersje przeglądarek, musisz uważać przy wyborze wartości atrybutów i nie używać tych samych ciągów dla wartości atrybutów name i id.
Wybieranie elementów według typuMetoda getElementsByTagName() obiektu Document umożliwia wybranie wszystkich elementów HTML lub XML określonego typu (lub według nazwy znacznika). Na przykład, aby uzyskać obiekt podobny do tablicy tylko do odczytu, zawierający obiekty Element wszystkich elementów w dokumencie, możesz wykonać następujące czynności:
var spans = document.getElementsByTagName("rozpiętość");
Podobnie jak metoda getElementsByName(), metoda getElementsByTagName() zwraca obiekt NodeList. Elementy dokumentu są zawarte w tablicy NodeList w tej samej kolejności, w jakiej pojawiają się w dokumencie, tj. pierwszy element
W dokumencie możesz wybrać:
Var firstParagraph = document.getElementsByTagName("p");
W nazwach znaczników HTML nie jest rozróżniana wielkość liter, a zastosowanie metody getElementsByTagName() do dokumentu HTML powoduje porównanie z nazwą znacznika bez uwzględniania wielkości liter. Na przykład zmienna spans utworzona powyżej będzie również zawierać wszystkie elementy zapisane jako .
Listę węzłów zawierającą wszystkie elementy dokumentu można uzyskać, przekazując symbol wieloznaczny „*” do metody getElementsByTagName().
Ponadto klasa Element definiuje również metodę getElementsByTagName(). Działa dokładnie tak samo jak wersja metody w klasie Document, ale wybiera tylko elementy będące dziećmi elementu, na którym metoda jest wywoływana. Oznacza to, że znajdź wszystkie elementy w pierwszym elemencie
Jest to możliwe w następujący sposób:
Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("rozpiętość");
Ze względów historycznych klasa HTMLDocument definiuje specjalne właściwości umożliwiające dostęp do określonych typów węzłów. Nieruchomości obrazy, formy I spinki do mankietów na przykład odnoszą się do obiektów, które zachowują się jak tablice tylko do odczytu zawierające elementy , I (ale tylko te tagi , które mają atrybut href). Te właściwości odnoszą się do obiektów HTMLCollection, które są bardzo podobne do obiektów NodeList, ale dodatkowo mogą być indeksowane przez wartości atrybutów id i name.
Obiekt HTMLDocument definiuje również właściwości synonimiczne embed i plugins, które są kolekcjami elementów HTMLCollection. Właściwość anchors jest niestandardowa, ale można jej używać do uzyskiwania dostępu do elementów A, który ma atrybut name, ale nie ma atrybutu href. Właściwość scripts jest zdefiniowana przez standard HTML5 i jest zbiorem elementów HTMLCollection.
Ponadto obiekt HTMLDocument definiuje dwie właściwości, z których każda odnosi się nie do kolekcji, ale do pojedynczego elementu. Właściwość document.body reprezentuje element dokumentu HTML, a właściwość document.head reprezentuje plik . Te właściwości są zawsze zdefiniowane w dokumencie: nawet jeśli w oryginalnym dokumencie nie ma elementów i, przeglądarka domyślnie je utworzy. Właściwość documentElement obiektu Document odnosi się do elementu głównego dokumentu. W dokumentach HTML zawsze reprezentuje rozszerzenie .
Wybieranie elementów według klasy CSSWartością atrybutu class HTML jest lista zero lub więcej identyfikatorów oddzielonych spacjami. Umożliwia definiowanie zestawów powiązanych elementów dokumentu: wszystkie elementy, które mają ten sam identyfikator w atrybucie class, są częścią tego samego zestawu. Klasa słowa jest zarezerwowana w JavaScript, więc JavaScript po stronie klienta używa właściwości className do przechowywania wartości atrybutu class HTML.
Zazwyczaj atrybut class jest używany w połączeniu z kaskadowymi arkuszami stylów CSS w celu zastosowania wspólnego stylu wyświetlania do wszystkich elementów zestawu. Jednak dodatkowo standard HTML5 definiuje metodę getElementsByClassName(), która umożliwia wybieranie zestawów elementów dokumentu na podstawie identyfikatorów w ich atrybutach klasy.
Podobnie jak metoda getElementsByTagName() metoda getElementsByClassName() może być wywoływana zarówno w dokumentach HTML, jak i elementach HTML, i zwraca „aktywny” obiekt NodeList zawierający wszystkie elementy podrzędne dokumentów lub elementów, które spełniają kryteria wyszukiwania.
Metoda getElementsByClassName() przyjmuje pojedynczy argument łańcuchowy, ale sam łańcuch może zawierać wiele identyfikatorów oddzielonych spacjami. Wszystkie elementy, których atrybuty klasy zawierają wszystkie określone identyfikatory, zostaną uznane za dopasowane. Kolejność identyfikatorów nie ma znaczenia. Należy zauważyć, że zarówno w atrybucie class, jak i argumencie metody getElementsByClassName() identyfikatory klas są oddzielone spacjami, a nie przecinkami.
Poniżej przedstawiono kilka przykładów użycia metody getElementsByClassName():
// Znajdź wszystkie elementy z klasą "warning" var warnings = document.getElementsByClassName("warning"); // Znajdź wszystkich potomków elementu o id "log" // z klasami "error" i "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("Błąd krytyczny");
Wybieranie elementów za pomocą selektorów CSSKaskadowe arkusze stylów CSS mają bardzo potężne konstrukcje składniowe zwane selektorami, które umożliwiają opisywanie elementów lub zestawów elementów w dokumencie. Wraz ze standaryzacją selektorów CSS3 definiuje inny standard W3C znany jako Selectors API Metody JavaScriptu aby uzyskać elementy pasujące do określonego selektora.
Kluczem do tego interfejsu API jest metoda querySelectorAll() obiektu Document. Pobiera pojedynczy argument łańcuchowy z selektorem CSS i zwraca obiekt NodeList reprezentujący wszystkie elementy w dokumencie pasujące do selektora.
Oprócz metody querySelectorAll() obiekt document definiuje również metodę querySelector(), metodyczny querySelectorAll(), z tą różnicą, że zwraca tylko pierwszy (w kolejności dokumentu) pasujący element lub null, jeśli nie ma pasujących elementów.
Te dwie metody są również zdefiniowane przez klasę Elements. Kiedy są wywoływane na elemencie, cały dokument jest przeszukiwany pod kątem dopasowania do danego selektora, a następnie wynik jest filtrowany tak, że pozostają tylko potomkowie użytego elementu. Takie podejście może wydawać się sprzeczne z intuicją, ponieważ oznacza, że ciąg selektora może zawierać przodków dopasowywanego elementu.
Struktura dokumentu i nawigacja po dokumenciePo wybraniu elementu dokumentu czasami konieczne jest odnalezienie powiązanych strukturalnie części dokumentu (element nadrzędny, rodzeństwo, element podrzędny). Obiekt Document można traktować jako drzewo obiektów Node. Typ węzła definiuje właściwości, które umożliwiają poruszanie się po takim drzewie. Istnieje inny interfejs aplikacji do poruszania się po dokumencie, jako drzewo obiektów Element.
Dokumenty jako drzewa węzłówObiekt Document, jego obiekty Element oraz obiekty Text reprezentujące fragmenty tekstu w dokumencie są obiektami Node. Klasa Node definiuje następujące ważne właściwości:
węzeł nadrzędnyWęzeł nadrzędny tego węzła lub null dla węzłów, które nie mają elementu nadrzędnego, na przykład Document.
węzły potomneCzytelny obiekt podobny do tablicy (NodeList), który zapewnia reprezentację węzłów podrzędnych.
pierwsze dziecko, ostatnie dzieckoPierwszy i ostatni węzeł podrzędny lub null, jeśli dany węzeł nie ma elementów podrzędnych.
następnyRodzeństwo, poprzedniRodzeństwoNastępne i poprzednie węzły równorzędne. Węzły bratnie to dwa węzły, które mają tego samego rodzica. Ich kolejność odpowiada kolejności w dokumencie. Te właściwości łączą węzły na podwójnie połączonej liście.
typ węzłaTyp tego węzła. Węzły typu Dokument mają w tej właściwości wartość 9. Węzły typu Element - wartość 1. Węzły typu Text - wartość 3. Węzły typu Komentarze - wartość 8 oraz węzły typu DocumentFragment - wartość 11.
wartość węzłaZawartość tekstowa węzłów Tekst i Komentarz.
Nazwa węzłaNazwa znacznika elementu, w którym wszystkie znaki są konwertowane na wielkie litery.
Dzięki tym właściwościom klasy Node można odwoływać się do drugiego węzła podrzędnego pierwszego węzła podrzędnego obiektu Document, jak pokazano poniżej:
Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling
Powiedzmy, że dany dokument wygląda tak:
Przetestuj Witaj świecie!
Wtedy drugim węzłem podrzędnym pierwszego węzła podrzędnego będzie element . Zawiera wartość 1 we właściwości nodeType i wartość „BODY” we właściwości nodeName.
Należy jednak pamiętać, że ten interfejs API jest niezwykle wrażliwy na zmiany w tekście dokumentu. Na przykład, jeśli dodasz pojedynczy znak nowej linii między znacznikami i w tym dokumencie, ten znak nowej linii stanie się pierwszym węzłem podrzędnym (węzłem tekstowym) pierwszego węzła podrzędnego, a drugim węzłem podrzędnym będzie element, a nie element .
Dokumenty jako drzewa elementówGdy najważniejsze są same elementy dokumentu, a nie znajdujący się w nich tekst (i odstępy między nimi), o wiele wygodniej jest użyć interfejsu API, który pozwala interpretować dokument jako drzewo obiektów elementów, ignorując tekst i Komentarze, które są również częścią dokumentu.
Pierwszą częścią tego interfejsu API jest właściwość children obiektów Element. Podobnie jak właściwość childNodes, jej wartością jest obiekt NodeList. Jednak w przeciwieństwie do właściwości childNodes, lista dzieci zawiera tylko obiekty Element.
Należy zauważyć, że węzły Tekst i Komentarz nie mają węzłów podrzędnych. Oznacza to, że opisana powyżej właściwość Node.parentNode nigdy nie zwraca węzłów Text ani Comment. Wartością właściwości parentNode dowolnego obiektu Element będzie zawsze inny obiekt Element lub korzeń drzewa, obiekt Document lub DocumentFragment.
Drugą częścią interfejsu API nawigacji po elementach dokumentu są właściwości obiektu Element, podobne do właściwości uzyskiwania dostępu do węzłów potomnych i siostrzanych obiektu Node:
pierwszy ElementDziecko, ostatni ElementDzieckoPodobny do właściwości firstChild i lastChild, ale zwraca elementy potomne.
następny elementSibling, poprzedniElementSiblingPodobny do właściwości nextSibling i previousSibling, ale zwraca elementy rodzeństwa.
liczba elementów podrzędnychLiczba elementów podrzędnych. Zwraca taką samą wartość jak właściwość children.length.
Te właściwości dostępu dzieci i rodzeństwa są ujednolicone i zaimplementowane we wszystkich aktualne przeglądarki oprócz IE.
Obiektowy model dokumentu lub „DOM” jest interfejs oprogramowania dostęp do elementów stron internetowych. Zasadniczo jest to interfejs API strony, który umożliwia odczytywanie i manipulowanie zawartością, strukturą i stylami strony. Zobaczmy, jak to działa i jak to działa.
Jak zbudowana jest strona internetowa?Proces przekształcania źródłowego dokumentu HTML w renderowaną, stylizowaną i interaktywną stronę nazywa się „krytyczną ścieżką renderowania”. Chociaż proces ten można podzielić na kilka etapów, jak opisałem w artykule Zrozumienie krytycznej ścieżki renderowania, kroki te można z grubsza podzielić na dwa etapy. W pierwszym przypadku przeglądarka analizuje dokument, aby określić, co ostatecznie zostanie wyświetlone na stronie, aw drugim przypadku przeglądarka renderuje.
Wynikiem pierwszego etapu jest tak zwane „drzewo renderowania”. Drzewo renderowania jest widokiem Elementy HTMLa, które będą wyświetlane na stronie, oraz powiązane z nimi style. Aby zbudować to drzewo, przeglądarka potrzebuje dwóch rzeczy:
DOM to obiektowa reprezentacja oryginalnego dokumentu HTML. Ma pewne różnice, jak zobaczymy poniżej, ale zasadniczo jest to próba przekształcenia struktury i zawartości dokumentu HTML w model obiektowy, które mogą być używane przez różne programy.
Struktura obiektów DOM jest reprezentowana przez tak zwane „drzewo węzłów”. Jest tak nazwany, ponieważ można go traktować jako drzewo z jednym rodzicem, które rozgałęzia się na wiele gałęzi potomnych, z których każda może mieć liście. W tym przypadku „element” nadrzędny to element główny, „gałęzie” podrzędne to elementy zagnieżdżone, a „liście” to zawartość elementów.
Weźmy jako przykład ten dokument HTML:
Moja pierwsza strona internetowa Witaj, świecie!
Jak się masz?
Ten dokument można przedstawić jako następujące drzewo węzłów:
W powyższym przykładzie wygląda na to, że DOM jest odwzorowaniem 1:1 oryginalnego dokumentu HTML. Jednak, jak powiedziałem, są różnice. Aby w pełni zrozumieć, czym jest DOM, musimy przyjrzeć się temu, czym on nie jest.
DOM nie jest kopią oryginalnego kodu HTMLChociaż DOM jest tworzony z dokumentu HTML, nie zawsze jest dokładnie taki sam. Istnieją dwa przypadki, w których DOM może różnić się od oryginalnego kodu HTML.
1. Gdy HTML zawiera błędy znacznikówDOM to interfejs umożliwiający dostęp do rzeczywistych (tj. już wyrenderowanych) elementów dokumentu HTML. W procesie tworzenia DOM przeglądarka sama może naprawić niektóre błędy w kodzie HTML.
Rozważ ten dokument HTML jako przykład:
Witaj świecie!
W dokumencie brakuje i elementów, co jest wymogiem dla HTML. Ale jeśli spojrzymy na wynikowe drzewo DOM, zobaczymy, że zostało to naprawione:
Oprócz tego, że jest interfejsem do przeglądania zawartości dokumentu HTML, sam DOM może być również modyfikowany.
Możemy na przykład utworzyć dodatkowe węzły dla DOM za pomocą Javascript.
Var newParagraph = document.createElement("p"); varparagrafContent = document.createTextNode("Jestem nowy!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);
Ten kod zmieni DOM, ale zmiany nie zostaną odzwierciedlone w dokumencie HTML.
DOM nie jest tym, co widzisz w przeglądarce (tj. drzewem renderowania)W oknie przeglądarki widać drzewo renderowania, które, jak powiedziałem, jest kombinacją DOM i CSSOM. Tym, co odróżnia DOM od drzewa renderowania, jest to, że to drugie składa się tylko z tego, co ostatecznie zostanie wyrenderowane na ekranie.
Ponieważ drzewo renderowania dotyczy tylko tego, co jest wyświetlane, wyklucza elementy, które są wizualnie ukryte. Na przykład elementy, które mają style z display: none .
Witaj świecie!
DOM będzie zawierał element
Jednak drzewo renderowania, a tym samym to, co jest widoczne w rzutni, nie zostanie uwzględnione w tym elemencie.
Ta różnica jest nieco mniejsza, ponieważ DevTools Element Inspector zapewnia najbliższe przybliżenie DOM, jaki mamy w przeglądarce. Jednak inspektor DevTools zawiera Dodatkowe informacje, którego nie ma w DOM.
Najlepszym tego przykładem są pseudoelementy CSS. Pseudoelementy utworzone za pomocą selektorów ::before i ::after są częścią CSSOM i drzewa renderowania, ale technicznie nie są częścią DOM. Dzieje się tak, ponieważ DOM jest generowany tylko z oryginalnego dokumentu HTML, bez stylów zastosowanych do elementu.
Mimo że pseudoelementy nie są częścią DOM, znajdują się w naszym inspektorze elementów devtools.
Streszczenie DOM to interfejs do dokumentu HTML. Jest używany przez przeglądarki jako pierwszy krok do określenia, co renderować w widocznym obszarze, oraz przez kod JavaScript do zmiany zawartości, struktury lub stylu strony.
wewnętrzny HTML
vartext = element.innerHTML;
element.innerHTML = "";
Przypisanie nowego innerHTML nadpisuje kod, nawet jeśli nowa wartość zostanie dodana do bieżącej (+=). Skrypty dodane w ten sposób nie są wykonywane.
zewnętrzny HTML
Zawiera cały element i nie można go modyfikować. Technicznie rzecz biorąc, zapis do tej właściwości tworzy nowy element, który zastępuje stary. Odwołania do starego elementu w zmiennych nie ulegają zmianie.
dane
textNode.data - zawartość węzłów tekstowych i komentarzy
tekst Treść
element.textContent - tekst wewnątrz elementu bez znaczników.
Istnieje również niestandardowa właściwość innerText, która ma wiele wspólnego z textContent .
ukryty
element.ukryty = prawda
Ukryty atrybut nie jest obsługiwany w IE11.
Większość standardowych atrybutów w DOM staje się właściwościami obiektu:
element.id = "identyfikator"
Dla atrybutów niestandardowych nie jest tworzona żadna właściwość (nieokreślona)
Możesz tworzyć własne właściwości DOM:
element.myData = (imię: "Jan", nazwisko: "Kowalski");
i metody:
element.myFunc = function()(alert this.nodeName);
Działa to, ponieważ węzły DOM są zwykłymi obiektami JavaScript. Te niestandardowe właściwości i metody nie mają wpływu na wyświetlanie tagu i są widoczne tylko w JavaScript.
Dostęp do atrybutów tagów:
element.hasAttribute(nazwa)
element.getAttribute(nazwa)
element.setAttribute(nazwa, wartość)
element.removeAttribute(nazwa)
element.attributes to pseudotablica atrybutów.
W atrybutach nie jest rozróżniana wielkość liter (html), a we właściwościach jest rozróżniana wielkość liter (javaScript).
Wartość atrybutu jest zawsze łańcuchem.
Atrybut: a.getAttribute("href") - wyświetla dokładnie to, co jest w kodzie HTML
Właściwość: a.href - może różnić się od wartości atrybutu
Najczęściej właściwość zależy od atrybutu, ale nie odwrotnie. Zmiana właściwości nie ma wpływu na atrybut.
Atrybut class ma dwie właściwości:
nazwa klasy - ciąg
lista klas — obiekt
metody obiektu classList:
element.classList.contains("class") - sprawdza czy obiekt zawiera daną klasę
element.classList.add("klasa")
element.classList.remove("klasa")
element.classList.toggle("klasa")
classList jest pseudo-tablicą, można ją iterować dla pętli.
atrybuty danychNiestandardowe atrybuty danych są dostępne nie tylko jako atrybuty, ale także za pośrednictwem właściwości zestawu danych
data-about = "pewna wartość"
element.zbiór.danych.o
rodzic.zawiera(dziecko) - prawda czy fałsz
sprawdza, czy węzeł potomny jest zagnieżdżony w rodzicu
nodeA.compareDocumentPosition(nodeB) — udostępnia informacje o zawartości i względnej kolejności elementów. Zwracana wartość to maska bitowa:
Dodawanie i usuwanie węzłówvardiv = document.createElement("div")
document.createTextNode("tekst")
parent.appendChild(element) - element jest dodawany na koniec rodzica
parent.insertBefore(element, nextSibling) - element jest dodawany przed nextSibling
parent.insertBefore(element, parent.firstChild) - dodany na początku
parent.insertBefore(element, null) - działa jak appendChild
Wszystkie metody wstawiania zwracają wstawiony węzeł.
Podczas przenoszenia elementu nie trzeba najpierw usuwać go ze starego miejsca, metody wstawiania robią to automatycznie.
element.insertAdjacentHTML(where, html) - wstaw dowolny kod HTML w dowolnym miejscu dokumentu. Gdzie określa, gdzie wstawić html w odniesieniu do elementu - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(gdzie, nowyElement)
element.insertAdjacentText(gdzie, tekst)
dwie ostatnie metody nie są obsługiwane w przeglądarce Firefox
node.append(...nodes) - wstawia węzły na końcu węzła ,
node.prepend(...nodes) - wstawia węzły na początku węzła ,
node.after(...nodes) - wstawia węzły po węźle ,
node.before(...nodes) - wstawia węzły przed node ,
node.replaceWith(...nodes) - Wstawia węzły zamiast node .
tutaj węzły to węzły lub łańcuchy w dowolnej liczbie i kombinacji, oddzielone przecinkami.
var fragment = document.createDocumentFragment() - symuluje węzeł DOM, który znika po wstawieniu do dokumentu, pozostawiając tylko jego dzieci. W nowoczesne przeglądarki Niepolecane.
element.cloneNode(true) - głęboka kopia elementu
element.cloneNode(false) - kopiuj bez dzieci
parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - usuwa element bezpośrednio, bez odniesienia do rodzica.
Metody zwracają hosta zdalnego
