Obejrzyj film i wykonaj te interaktywne samouczki, aby poznać podstawy wyświetlania i zmieniania DOM strony za pomocą Narzędzi deweloperskich w Chrome.
W tym samouczku zakładamy, że znasz różnicę między DOM a HTML. Wyjaśnienie znajdziesz w Załączniku: HTML a DOM.
Wyświetl węzły DOM
Drzewo DOM w panelu Elementy zawiera wszystkie działania związane z DOM w Narzędziach deweloperskich.
Sprawdzanie węzła
Jeśli interesuje Cię konkretny węzeł DOM, możesz skorzystać z opcji Zbadaj, aby szybko otworzyć Narzędzia deweloperskie i przeanalizować ten węzeł.
- Kliknij prawym przyciskiem myszy Michał Anioł poniżej i wybierz Zbadaj.
- Michał Anioł
- Rafael
Otworzy się panel Elementy w Narzędziach deweloperskich.
Element
<li>Michelangelo</li>
jest wyróżniony w drzewie DOM.
- Kliknij ikonę Zbadaj w lewym górnym rogu Narzędzi deweloperskich.
Kliknij tekst Tokio poniżej.
- Tokio
Bejrut
Wiersz
<li>Tokyo</li>
jest teraz wyróżniony w drzewie DOM.
Sprawdzenie węzła jest też pierwszym krokiem do wyświetlenia i zmiany stylów węzła. Zapoznaj się z artykułem Pierwsze kroki z wyświetlaniem i zmienianiem 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ę.Ponownie naciśnij klawisz strzałki w lewo. Wybrano element nadrzędny węzła
<ul>
. W tym przypadku jest to węzeł<li>
z instrukcjami dotyczącymi kroku 1.Naciśnij 3 razy klawisz strzałki w dół, by ponownie zaznaczyć zwinięta listę
<ul>
. Powinno to wyglądać tak:<ul>...</ul>
Naciśnij klawisz strzałki w prawo. Lista zostanie rozwinięta.
Przewiń, aby pokazać
Przeglądając drzewo DOM, możesz czasem zauważyć węzeł DOM, który nie znajduje się obecnie w widocznym obszarze. Załóżmy np., że po przewinięciu strony na sam dół interesuje Cię węzeł <h1>
u góry strony. Przewiń do widoku pozwala szybko zmienić położenie widocznego obszaru i zobaczyć węzeł.
Kliknij prawym przyciskiem myszy Magritte poniżej i wybierz Zbadaj.
- Magritte'a
- Sutyna
Przejdź do sekcji Dodatek: przewiń, aby zobaczyć u dołu strony. Instrukcje znajdziesz dalej.
Gdy wykonasz instrukcje podane na dole strony, wróć tutaj.
Pokaż linijki
Dzięki linijkom znajdującym się powyżej i po lewej stronie widocznego obszaru możesz mierzyć szerokość i wysokość elementu po najechaniu na niego kursorem w panelu Elementy.
Możesz to zrobić na 2 sposoby:
- Naciśnij Control+Shift+P lub Command+Shift+P (Mac), aby otworzyć menu Command, wpisz
Show rulers on hover
i naciśnij Enter. - Kliknij Ustawienia > Preferencje > Elementy > Pokaż linijki po najechaniu kursorem.
Jednostkami rozmiaru linijek są piksele.
Wyszukaj węzły
Drzewo DOM możesz wyszukiwać według ciągu znaków, selektora arkusza CSS lub selektora XPath.
- Najedź kursorem na panel Elementy.
- Naciśnij Control+F lub Command+F (Mac). Pasek wyszukiwania otworzy się na dole drzewa DOM.
Wpisz
The Moon is a Harsh Mistress
. Ostatnie zdanie jest wyróżnione w drzewie DOM.
Jak wspomnieliśmy wcześniej, pasek wyszukiwania obsługuje również selektory CSS i XPath.
Panel Elementy wybiera pierwszy pasujący wynik w drzewie DOM i wyświetla go w widocznym obszarze. Domyślnie odbywa się to podczas pisania. Jeśli zawsze pracujesz z długimi zapytaniami, możesz ustawić w Narzędziach deweloperskich wyszukiwanie 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ć DOM i sprawdzać, jak wprowadzone zmiany wpływają na stronę.
Edytuj treść
Aby edytować zawartość węzła, kliknij dwukrotnie tę zawartość w drzewie DOM.
Kliknij prawym przyciskiem myszy opcję Michelle poniżej i wybierz Zbadaj.
- Smażenie
- Michelle
W drzewie DOM kliknij dwukrotnie
Michelle
. Kliknij dwukrotnie tekst między<li>
a</li>
. Tekst zostanie podświetlony na niebiesko, by wskazać, że jest zaznaczony.Usuń
Michelle
, wpiszLeela
, a następnie naciśnij Enter, by potwierdzić zmianę. Tekst powyżej zmienia się z Michelle na Leela.
Edytuj atrybuty
Aby edytować atrybuty, kliknij dwukrotnie ich nazwę lub wartość. Wykonaj poniższe instrukcje, aby dowiedzieć się, jak dodać atrybuty do węzła.
Kliknij prawym przyciskiem myszy Howarda poniżej i wybierz Zbadaj.
- Howard
- Vince
Kliknij dwukrotnie
<li>
. Tekst jest wyróżniony, aby wskazać, że węzeł został wybrany.Naciśnij klawisz ze strzałką 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 po kliknięciu prawym przyciskiem myszy.
Edytuj typ węzła
Aby edytować typ węzła, kliknij go dwukrotnie, a następnie wpisz nowy typ.
Kliknij prawym przyciskiem myszy Hank poniżej i wybierz Zbadaj.
- Dziekan
- Myszy
- Tadeusz
- Brock
Kliknij dwukrotnie
<li>
. Tekstli
jest wyróżniony.Usuń
li
, wpiszbutton
, a następnie naciśnij Enter. Węzeł<li>
zmieni się w węzeł<button>
.
Edytuj jako HTML
Aby edytować węzły w formacie HTML z wyróżnianiem i autouzupełnianiem składni, wybierz Edytuj jako HTML z menu węzła.
Kliknij prawym przyciskiem myszy Leonarda poniżej i wybierz Zbadaj.
- Pens
- Howard
- Radek
- Leonard
W panelu Elementy kliknij prawym przyciskiem myszy bieżący węzeł i wybierz z menu Edytuj jako HTML.
Naciśnij Enter, aby przejść do nowego wiersza, i wpisz
<l
. DevTool wyróżnia składnię HTML i automatycznie uzupełnia tagi.Wybierz element
li
z menu autouzupełniania i wpisz>
. Narzędzia deweloperskie automatycznie dodaje zamykający tag</li>
po kursorze.Wpisz
Sheldon
w tagu i naciśnij Control / Command + Enter, aby zastosować zmiany.
Duplikowanie węzła
Możesz zduplikować element, korzystając z opcji Zduplikowany element po kliknięciu 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 wybierz z menu Powiel element.Wróć na stronę. Pozycja na liście została natychmiast zduplikowana.
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
Aby zrobić zrzut ekranu dowolnego węzła w drzewie DOM, skorzystaj z narzędzia Przechwyć 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 wybierz z menu Zrób zrzut ekranu węzła.
Zrzut ekranu zostanie zapisany w pobranych plikach.
Zmiana kolejności węzłów DOM
Przeciągnij węzły, aby zmienić ich kolejność.
Kliknij prawym przyciskiem myszy Elvis Presley poniżej i wybierz Zbadaj. To ostatni element na liście.
- Stevie Wonder
- Tom Waits
- Kuba Sienkiewicz
- Elvisa Presleya
W drzewie DOM przeciągnij
<li>Elvis Presley</li>
na górę listy.
Wymuś stan
Możesz wymusić pozostawienie węzłów w stanach :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 > :hover. Jeśli nie widzisz tej opcji, zobacz Dodatek: brakujące opcje. Kolor tła pozostaje pomarańczowy, mimo że nie znajdujesz się w węźle.
Ukrywanie węzła
Naciśnij H, aby ukryć węzeł.
Kliknij prawym przyciskiem myszy Gwiazdki w miejscu docelowym poniżej i wybierz Zbadaj.
- Hrabia Monte Christo
- Gwiazdy moje miejsce 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ł pojawi się ponownie.
Usuwanie węzła
Naciśnij Delete, aby usunąć węzeł.
Poniżej kliknij prawym przyciskiem myszy opcję Podstawy i wybierz Zbadaj.
- Ilustrowany człowiek
- Przez szkło
- Podstawy
Naciśnij klawisz Delete. Węzeł został usunięty. Możesz też kliknąć węzeł prawym przyciskiem myszy i użyć opcji Usuń element.
Naciśnij Control+Z lub Command+Z (Mac). Ostatnie działanie zostanie cofnięte i węzeł ponownie pojawi się na ekranie.
Dostęp do węzłów w konsoli
W Narzędziach deweloperskich dostępnych jest kilka skrótów, które umożliwiają dostęp do węzłów DOM z poziomu konsoli oraz pobieranie do nich odwołań w JavaScript.
Utwórz odwołanie do aktualnie wybranego węzła, wpisując wartość $0
Podczas sprawdzania węzła tekst == $0
obok niego oznacza, że możesz odwołać się do tego węzła w konsoli za pomocą zmiennej $0
.
Kliknij prawym przyciskiem myszy The Left Hand of Darkness poniżej i wybierz Zbadaj.
- Lewa ręka ciemności
- Diuna
Naciśnij klawisz Escape, aby otworzyć panel konsoli.
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, jeszcze raz wpisz$0
w konsoli i jeszcze raz naciśnij Enter. Wyznaczona wartość$0
to<li>Dune</li>
.
Przechowuj jako zmienną globalną
Jeśli musisz wielokrotnie odwoływać się do węzła, 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 Przechowuj 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 określa węzeł.
Kopiuj ścieżkę JS
Skopiuj ścieżkę JavaScript do węzła, jeśli chcesz się do niego odwołać w automatycznym teście.
Kliknij prawym przyciskiem myszy Bracia Karamazow poniżej i wybierz Zbadaj.
- Bracia Karamazow
- Zbrodnia i kara
W drzewie DOM kliknij prawym przyciskiem myszy
<li>The Brothers Karamazov</li>
i wybierz Kopiuj > Kopiuj ścieżkę JS. Wyrażeniedocument.querySelector()
kierujące się do węzła zostało skopiowane do schowka.Naciśnij Control+V lub Command+V (Mac), by wkleić wyrażenie w konsoli.
Naciśnij Enter, aby ocenić wyrażenie.
Przerwa po zmianach DOM
Narzędzia deweloperskie umożliwiają wstrzymywanie JavaScriptu na stronie, gdy skrypt JavaScript modyfikuje DOM. Zobacz punkty przerwania zmian DOM.
Dalsze kroki
Dotyczy to większości funkcji związanych z DOM w Narzędziach deweloperskich. Aby poznać pozostałe możliwości, kliknij prawym przyciskiem myszy węzły w drzewie DOM i wypróbuj inne opcje, które nie zostały omówione w tym samouczku. Zobacz też Skróty klawiszowe w panelu Elementy.
Na stronie głównej Narzędzi deweloperskich w Chrome znajdziesz informacje o tym, co jeszcze możesz zrobić za pomocą tych narzędzi.
Jeśli chcesz skontaktować się z zespołem Narzędzi deweloperskich lub uzyskać pomoc od społeczności, zobacz Społeczność.
Dodatek: HTML a DOM
W tej sekcji szybko wyjaśniamy różnicę między HTML a DOM.
Gdy wysyłasz w przeglądarce żądanie strony takiej jak https://example.com
, 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 w następujący sposób:
html
head
title
body
h1
p
script
Drzewo obiektów, czyli węzłów reprezentujących treść strony, jest nazywane DOM. W tej chwili wygląda to tak samo jak kod HTML, ale załóżmy, że skrypt, do którego odwołuje się kod 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
. Pełny DOM wygląda teraz tak:
html
head
title
body
p
script
p
Kod HTML strony różni się od jej DOM. Innymi słowy kod HTML reprezentuje treść początkową strony, a DOM – zawartość bieżącej strony. Gdy JavaScript dodaje, usuwa lub edytuje węzły, DOM różni się od HTML.
Więcej informacji znajdziesz w artykule Wprowadzenie do DOM.
Dodatek: przewiń do widoku
Jest to kontynuacja sekcji Przewiń do widoku. Postępuj zgodnie z instrukcjami poniżej, aby wypełnić tę sekcję.
- Węzeł
<li>Magritte</li>
nadal powinien być wybrany w drzewie DOM. Jeśli nie, wróć do sekcji Przewiń do widoku i zacznij od początku. Kliknij prawym przyciskiem myszy węzeł
<li>Magritte</li>
i wybierz Przewiń, by zobaczyć. Widoczny obszar przewija się z powrotem w górę i pojawia się węzeł Magritte. Jeśli nie widzisz opcji Przewiń do widoku, zobacz Dodatek: brakujące opcje.
Załącznik: brakujące opcje
Wiele instrukcji w tym samouczku zawiera instrukcje, aby kliknąć prawym przyciskiem myszy węzeł w drzewie DOM, a następnie wybrać opcję z wyświetlonego menu kontekstowego. Jeśli nie widzisz określonej opcji w menu kontekstowym, kliknij prawym przyciskiem myszy poza tekstem węzła.