Obejrzyj film i skorzystaj z tych interaktywnych samouczków, aby poznać podstawy wyświetlania i zmieniania modelu DOM strony za pomocą Narzędzi deweloperskich w Chrome.
W tym samouczku zakładamy, że znasz różnicę między DOM a HTML. Więcej informacji znajdziesz w sekcji Dodatek: HTML a DOM.
Wyświetl węzły DOM
Drzewo DOM panelu Elementy to miejsce, w którym wykonuje się wszystkie działania związane z DOM w Narzędziach deweloperskich.
Sprawdzanie węzła
Jeśli interesuje Cię konkretny węzeł DOM, zbadaj to szybki sposób na otwarcie Narzędzi deweloperskich i sprawdzenie tego węzła.
- Kliknij prawym przyciskiem myszy Michał Anioł poniżej i wybierz Zbadaj.
- Michał Anioł
- Rafał
Otworzy się panel Elementy w Narzędziach deweloperskich.
Tabela
<li>Michelangelo</li>
jest wyróżniona w drzewie DOM.
- Kliknij ikonę Zbadaj w lewym górnym rogu Narzędzi deweloperskich.
Poniżej kliknij tekst Tokio.
- Tokio
Bejrut
W drzewie DOM wyróżniony jest element
<li>Tokyo</li>
.
Sprawdzanie węzła to też pierwszy krok w kierunku wyświetlenia i zmiany jego stylów. Przeczytaj artykuł Pierwsze kroki z wyświetlaniem i zmienianiem kodu CSS.
Poruszanie się po drzewie DOM za pomocą klawiatury
Po wybraniu węzła w drzewie DOM możesz poruszać się po drzewie DOM za pomocą klawiatury.
Kliknij prawym przyciskiem myszy Ringo poniżej i wybierz Zbadaj. W drzewie DOM wybrano
<li>Ringo</li>
.- George
- Ringo
- Paul
John
Naciśnij 2 razy klawisz strzałki w górę. Wybrano:
<ul>
.Naciśnij klawisz strzałki w lewo. Lista
<ul>
zwija się.Jeszcze raz naciśnij klawisz strzałki w lewo. Wybrano element nadrzędny węzła
<ul>
. W tym przypadku jest to węzeł<li>
zawierający instrukcje kroku 1.Naciśnij 3 razy klawisz strzałki w dół, aby ponownie wybrać zwiniętą listę
<ul>
. Powinien wyglądać tak:<ul>...</ul>
Naciśnij klawisz strzałki w prawo. Lista zostanie rozwinięta.
Przewiń, aby pokazać
Podczas wyświetlania drzewa DOM czasami zainteresuje Cię węzeł DOM, który nie znajduje się obecnie w widocznym obszarze. Załóżmy na przykład, że przewiniesz stronę na sam dół i interesuje Cię węzeł <h1>
u góry strony. Przewiń widok do widoku: umożliwia szybką zmianę położenia widocznego obszaru w celu lepszego obejrzenia węzła.
Kliknij prawym przyciskiem myszy Magritte poniżej i wybierz Zbadaj.
- Magritte'a
- Soutine
Przejdź do sekcji Dodatek: przewiń, aby zobaczyć u dołu tej strony. Postępuj zgodnie z instrukcjami.
Po wykonaniu instrukcji podanych na dole strony wróć do tego miejsca.
Pokaż linijki
Za pomocą linijek znajdujących się nad lub po lewej stronie widocznego obszaru możesz zmierzyć szerokość i wysokość elementu po najechaniu na niego kursorem myszy w panelu Elementy.
Włącz linijki na jeden z dwóch sposobów:
- Naciśnij Control+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu poleceń, wpisz
Show rulers on hover
i naciśnij Enter. - Wybierz Ustawienia > Preferencje > Elementy > Pokaż linijki po najechaniu.
Jednostka rozmiaru linijek to piksele.
Wyszukaj węzły
Drzewo DOM można przeszukiwać według ciągu znaków, selektora CSS lub selektora XPath.
- Ustaw kursor na panelu Elementy.
- Naciśnij Control+F lub Command+F (Mac). Pasek wyszukiwania otworzy się u dołu drzewa DOM.
Wpisz
The Moon is a Harsh Mistress
. Ostatnie zdanie jest wyróżnione w drzewie DOM.
Jak już wspomnieliśmy, pasek wyszukiwania obsługuje też selektory CSS i XPath.
Panel Elementy wybiera pierwszy pasujący wynik w drzewie DOM i wyświetla go w widocznym obszarze. Domyślnie dzieje się to podczas pisania. Jeśli zawsze pracujesz z długimi zapytaniami, możesz skonfigurować uruchamianie w Narzędziach deweloperskich tylko po naciśnięciu Enter.
Aby uniknąć niepotrzebnych przeskoków między węzłami, odznacz pole wyboru Ustawienia > Preferencje > Globalne > Szukaj podczas pisania.
Edytuj DOM
Możesz na bieżąco edytować model DOM i sprawdzać, jak zmiany wpływają na stronę.
Edytuj treść
Aby edytować zawartość węzła, kliknij dwukrotnie zawartość w drzewie DOM.
Kliknij prawym przyciskiem myszy Michelle poniżej i wybierz Zbadaj.
- Smaż
- Michelle
W drzewie DOM kliknij dwukrotnie
Michelle
. Inaczej mówiąc, kliknij dwukrotnie tekst między<li>
a</li>
. Tekst jest podświetlony na niebiesko, co oznacza, że został wybrany.Usuń
Michelle
, wpiszLeela
, a następnie naciśnij Enter, aby potwierdzić zmianę. Tekst powyżej zmieni się z Michelle na Leela.
Edytuj atrybuty
Aby edytować atrybuty, kliknij dwukrotnie ich nazwę lub wartość. Aby dowiedzieć się, jak dodać atrybuty do węzła, wykonaj instrukcje opisane poniżej.
Kliknij prawym przyciskiem myszy Howard poniżej i wybierz Zbadaj.
- Howard
- Vince
Kliknij dwukrotnie
<li>
. Tekst zostanie podświetlony, aby wskazać, że węzeł został wybrany.Naciśnij klawisz strzałki w prawo, dodaj spację, wpisz
style="background-color:gold"
, a następnie naciśnij Enter. Kolor tła węzła zmieni się na złoty.
Możesz też użyć opcji Edytuj atrybut prawym przyciskiem myszy.
Edytuj typ węzła
Aby edytować typ węzła, kliknij go dwukrotnie i wpisz nowy typ.
Kliknij prawym przyciskiem myszy Połącz poniżej i wybierz Zbadaj.
- Dziekan
- Myszy
- Tadeusz
- Brock
Kliknij dwukrotnie
<li>
. Tekstli
jest wyróżniony.Usuń
li
, wpiszbutton
i naciśnij Enter. Węzeł<li>
zmieni się w węzeł<button>
.
Edytuj jako HTML
Aby edytować węzły jako HTML z podświetleniem składni i autouzupełnianiem, w menu węzła wybierz Edytuj jako HTML.
Kliknij prawym przyciskiem myszy Leonard poniżej i wybierz Zbadaj.
- Pens
- Howard
- Radek
- Leonard
W panelu Elementy kliknij prawym przyciskiem myszy bieżący węzeł i w menu wybierz Edytuj jako HTML.
Naciśnij Enter, aby zacząć nowy wiersz i wpisać
<l
. Narzędzie deweloperskie wyróżnia składnię HTML i automatycznie uzupełnia tagi.Wybierz element
li
z menu autouzupełniania i wpisz>
. Narzędzia deweloperskie automatycznie dodają za kursorem zamykający tag</li>
.Wpisz w tagu
Sheldon
i naciśnij Control / Command + Enter, aby zastosować zmiany.
Zduplikuj węzeł
Możesz zduplikować element, klikając opcję Powiel element prawym przyciskiem myszy.
Kliknij prawym przyciskiem myszy Nana poniżej i wybierz Zbadaj.
- Ognisko toaletek
- Nana
- Orlando
- Biały szum
W panelu Elementy kliknij prawym przyciskiem myszy
<li>Nana</li>
i w menu wybierz Duplikuj element.Wróć na stronę. Element listy został natychmiast zduplikowany.
Możesz też użyć skrótów klawiszowych: Shift + Alt + strzałka w dół (Windows i Linux) lub Shift + Option + strzałka w dół (MacOS).
Zrób zrzut ekranu węzła
Możesz zrobić zrzut ekranu dowolnego węzła w drzewie DOM, korzystając z funkcji Zrób zrzut ekranu węzła.
Kliknij prawym przyciskiem myszy dowolny obraz na tej stronie i wybierz Zbadaj.
W panelu Elementy kliknij prawym przyciskiem myszy adres URL obrazu i w menu wybierz Zrób zrzut ekranu węzła.
Zrzut ekranu zostanie zapisany w pobranych plikach.
Zmień kolejność węzłów DOM
Przeciągnij węzły, aby zmienić ich kolejność.
Kliknij prawym przyciskiem myszy Elvis Presley poniżej i wybierz Zbadaj. Zwróć uwagę, że to ostatni element na liście.
- Stevie Wonder
- Tom Waits
- Kuba Sienkiewicz
- Elvisa Presleya
W drzewie DOM przeciągnij ikonę
<li>Elvis Presley</li>
na górę listy.
Wymuś stan
Możesz wymusić pozostawienie węzłów w stanach takich jak :active
, :hover
, :focus
, :visited
i :focus-within
.
Najedź kursorem na Władca much poniżej. Kolor tła zmieni się na pomarańczowy.
- Władca much
- Zbrodnia i kara
- Moby Dicka
Kliknij prawym przyciskiem myszy Władca much powyżej i wybierz Zbadaj.
Kliknij prawym przyciskiem myszy
<li class="demo--hover">The Lord of the Flies</li>
i wybierz Force State (Stan) > :hover. Jeśli nie widzisz tej opcji, zobacz Dodatek: brakujące opcje. Kolor tła pozostaje pomarańczowy, mimo że w rzeczywistości nie najedziesz kursorem na węzeł.
Ukryj węzeł
Aby ukryć węzeł, naciśnij H.
Kliknij prawym przyciskiem myszy Gwiazdki: moje miejsce docelowe poniżej i wybierz Zbadaj.
- Hrabia Monte Cristo
- Gwiazdy jako cel podróży
Naciśnij klawisz H. Węzeł jest ukryty. Możesz też kliknąć węzeł prawym przyciskiem myszy i użyć opcji Ukryj element.
Ponownie naciśnij klawisz H. Węzeł jest ponownie wyświetlany.
Usunięcie węzła
Aby usunąć węzeł, naciśnij Delete.
Kliknij prawym przyciskiem myszy Podstawy poniżej i wybierz Zbadaj.
- Ilustrowany człowiek
- Przez szkło
- Podstawowy
Naciśnij klawisz Delete. Węzeł został usunięty. Możesz też kliknąć węzeł prawym przyciskiem myszy i wybrać opcję Usuń element.
Naciśnij Control + Z lub Command + Z (Mac). Ostatnia czynność zostanie cofnięta, a węzeł pojawi się ponownie.
Dostęp do węzłów w konsoli
Narzędzia deweloperskie udostępniają kilka skrótów, które umożliwiają dostęp do węzłów DOM z poziomu konsoli lub pobieranie do nich odwołań w języku JavaScript.
Utwórz odwołanie do obecnie wybranego węzła za pomocą polecenia $0
Przy badaniu węzła tekst == $0
znajdujący się obok węzła oznacza, że możesz odwołać się do tego węzła w konsoli za pomocą zmiennej $0
.
Kliknij prawym przyciskiem myszy Lewa ręka ciemności poniżej i wybierz Zbadaj.
- Lewa ręka Ciemności
- Wydma
Aby otworzyć panel konsoli, naciśnij klawisz Escape.
Wpisz
$0
i naciśnij klawisz Enter. Wynik wyrażenia wskazuje, że$0
zwraca wartość<li>The Left Hand of Darkness</li>
.Najedź kursorem na wynik. Węzeł jest wyróżniony w widocznym obszarze.
Kliknij
<li>Dune</li>
w drzewie DOM, ponownie wpisz w konsoli$0
i jeszcze raz naciśnij Enter. Teraz$0
przyjmuje wartość<li>Dune</li>
.
Zapisz jako zmienną globalną
Jeśli musisz wielokrotnie się do niego odwoływać, zapisz go jako zmienną globalną.
Kliknij prawym przyciskiem myszy Wielki sen poniżej i wybierz Zbadaj.
- Wielki sen
- Długie pożegnanie
Kliknij prawym przyciskiem myszy
<li>The Big Sleep</li>
w drzewie DOM i wybierz Zapisz jako zmienną globalną. Jeśli nie widzisz tej opcji, zobacz Dodatek: brakujące opcje.Wpisz
temp1
w konsoli i naciśnij Enter. Wynik wyrażenia wskazuje, że zmienna jest zwracana do węzła.
Skopiuj ścieżkę JS
Skopiuj ścieżkę JavaScript do węzła, gdy chcesz się do niego odwołać w teście automatycznym.
Kliknij prawym przyciskiem myszy Bracia Karamazow poniżej i wybierz Zbadaj.
- Bracia Karamazow
- Zbrodnia i kara
Kliknij prawym przyciskiem myszy
<li>The Brothers Karamazov</li>
w drzewie DOM i wybierz Kopiuj > Kopiuj ścieżkę JS. Wyrażeniedocument.querySelector()
, które odnosi się do węzła, zostało skopiowane do schowka.Naciśnij Control+V lub Command+V (Mac), aby wkleić wyrażenie w konsoli.
Aby sprawdzić wyrażenie, naciśnij Enter.
Przerwij zmiany DOM
Narzędzia deweloperskie umożliwiają wstrzymanie kodu JavaScriptu na stronie, gdy JavaScript modyfikuje DOM. Zobacz Punkty przerwania zmiany DOM.
Dalsze kroki
Obejmuje to większość funkcji związanych z DOM w Narzędziach deweloperskich. Pozostałe możesz poznać, klikając prawym przyciskiem myszy węzły w drzewie DOM i eksperymentując z innymi opcjami, których nie omówiliśmy w tym samouczku. Zobacz też Skróty klawiszowe w panelu Elementy.
Odwiedź stronę główną Narzędzi deweloperskich w Chrome, aby poznać wszystko, co jeszcze można zrobić za pomocą Narzędzi deweloperskich.
Jeśli chcesz skontaktować się z zespołem Narzędzi deweloperskich lub uzyskać pomoc od społeczności DevTools, wejdź na stronę Społeczność.
Dodatek: HTML a DOM
Ta sekcja szybko wyjaśnia różnice między HTML a DOM.
Gdy wysyłasz żądanie dotyczące strony takiej jak https://example.com
w przeglądarce, serwer zwraca kod HTML w ten sposób:
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>
Przeglądarka analizuje kod HTML i tworzy drzewo obiektów:
html
head
title
body
h1
p
script
To drzewo obiektów (węzłów) reprezentujących zawartość strony nosi nazwę DOM. Obecnie wygląda tak samo jak kod HTML, ale załóżmy, że skrypt, do którego odwołuje się strona u dołu kodu HTML, uruchamia ten kod:
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);
Ten kod usuwa węzeł h1
i dodaje do DOM kolejny węzeł p
. Cały DOM wygląda teraz tak:
html
head
title
body
p
script
p
Kod HTML strony różni się teraz od jej DOM. Inaczej mówiąc, HTML reprezentuje początkową zawartość strony, a element DOM – jej bieżącą zawartość. Gdy JavaScript dodaje, usuwa lub edytuje węzły, DOM staje się inny niż HTML.
Więcej informacji znajdziesz w artykule Wprowadzenie do DOM.
Dodatek: przewiń, aby pokazać
Stanowi on kontynuację sekcji Przewiń do widoku. Aby wypełnić tę sekcję, postępuj zgodnie z instrukcjami poniżej.
- Węzeł
<li>Magritte</li>
nadal powinien być wybrany w drzewie DOM. Jeśli go nie widzisz, wróć do sekcji Przewiń do widoku i zacznij od początku. Kliknij prawym przyciskiem myszy węzeł
<li>Magritte</li>
i wybierz Przewiń do widoku. Widoczny obszar przewija się z powrotem, dzięki czemu widać węzeł Magritte. Jeśli nie widzisz opcji Przewiń do widoku, zapoznaj się z sekcją Dodatek: brakujące opcje.
Załącznik: brakujące opcje
Wiele instrukcji z tego samouczka zawiera instrukcje dotyczące kliknięcia prawym przyciskiem myszy węzła w drzewie DOM, a następnie wybrania opcji z wyświetlonego menu kontekstowego. Jeśli nie widzisz określonej opcji w menu kontekstowym, kliknij prawym przyciskiem myszy poza tekstem węzła.