Rozpoczynanie wyświetlania i zmieniania DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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ł.

  1. Kliknij prawym przyciskiem myszy Michał Anioł poniżej i wybierz Zbadaj.
    • Michał Anioł
    • Rafael Sprawdzanie węzła Otworzy się panel Elementy w Narzędziach deweloperskich. Element <li>Michelangelo</li> jest wyróżniony w drzewie DOM. Z wyróżnieniem węzła Michała Anioła
  2. Kliknij ikonę Zbadaj w lewym górnym rogu Narzędzi deweloperskich.Ikona inspekcji

  3. 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.

  1. Kliknij prawym przyciskiem myszy Ringo poniżej i wybierz Zbadaj. W drzewie DOM wybrano <li>Ringo</li>.

    • George
    • Ringo
    • Paul

    • John

      Sprawdzanie węzła Ringo

  2. Naciśnij 2 razy klawisz strzałki w górę. Wybrano: <ul>.

    Sprawdzanie węzła ul

  3. Naciśnij klawisz strzałki w lewo. Lista <ul> zwija się.

  4. 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.

  5. Naciśnij 3 razy klawisz strzałki w dół, by ponownie zaznaczyć zwinięta listę <ul>. Powinno to wyglądać tak: <ul>...</ul>

  6. 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ł.

  1. Kliknij prawym przyciskiem myszy Magritte poniżej i wybierz Zbadaj.

    • Magritte'a
    • Sutyna

  2. 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.

Linijki.

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. Ustawienia > Preferencje > Elementy > Pokaż linijki po najechaniu kursorem.

Jednostkami rozmiaru linijek są piksele.

Drzewo DOM możesz wyszukiwać według ciągu znaków, selektora arkusza CSS lub selektora XPath.

  1. Najedź kursorem na panel Elementy.
  2. Naciśnij Control+F lub Command+F (Mac). Pasek wyszukiwania otworzy się na dole drzewa DOM.

  3. Wpisz The Moon is a Harsh Mistress. Ostatnie zdanie jest wyróżnione w drzewie DOM.

    Wyróżnianie zapytania na pasku wyszukiwania

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. Ustawienia > Preferencje > Globalne > Szukaj podczas pisania.

Wyczyszczono pole wyboru Szukaj podczas pisania w Ustawieniach.

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.

  1. Kliknij prawym przyciskiem myszy opcję Michelle poniżej i wybierz Zbadaj.

    • Smażenie
    • Michelle

  2. 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.

    Edytowanie tekstu

  3. Usuń Michelle, wpisz Leela, 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.

  1. Kliknij prawym przyciskiem myszy Howarda poniżej i wybierz Zbadaj.

    • Howard
    • Vince

  2. Kliknij dwukrotnie <li>. Tekst jest wyróżniony, aby wskazać, że węzeł został wybrany.

    Edytowanie węzła

  3. 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.

    dodanie atrybutu stylu do węzła.

Możesz też użyć opcji Edytuj atrybut po kliknięciu prawym przyciskiem myszy.

Opcje dostępne po kliknięciu prawym przyciskiem myszy z zaznaczonym atrybutem Edytuj.

Edytuj typ węzła

Aby edytować typ węzła, kliknij go dwukrotnie, a następnie wpisz nowy typ.

  1. Kliknij prawym przyciskiem myszy Hank poniżej i wybierz Zbadaj.

    • Dziekan
    • Myszy
    • Tadeusz
    • Brock

  2. Kliknij dwukrotnie <li>. Tekst li jest wyróżniony.

  3. Usuń li, wpisz button, a następnie naciśnij Enter. Węzeł <li> zmieni się w węzeł <button>.

    Zmiana typu węzła na przycisk

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.

  1. Kliknij prawym przyciskiem myszy Leonarda poniżej i wybierz Zbadaj.

    • Pens
    • Howard
    • Radek
    • Leonard

  2. W panelu Elementy kliknij prawym przyciskiem myszy bieżący węzeł i wybierz z menu Edytuj jako HTML.

    Menu węzła.

  3. Naciśnij Enter, aby przejść do nowego wiersza, i wpisz <l. DevTool wyróżnia składnię HTML i automatycznie uzupełnia tagi.

    Autouzupełnianie tagów HTML.

  4. Wybierz element li z menu autouzupełniania i wpisz >. Narzędzia deweloperskie automatycznie dodaje zamykający tag </li> po kursorze.

    Narzędzia deweloperskie automatycznie zamykają tag.

  5. Wpisz Sheldon w tagu i naciśnij Control / Command + Enter, aby zastosować zmiany.

    Stosuję zmiany.

Duplikowanie węzła

Możesz zduplikować element, korzystając z opcji Zduplikowany element po kliknięciu prawym przyciskiem myszy.

  1. Kliknij prawym przyciskiem myszy Nana poniżej i wybierz Zbadaj.

    • Ognisko toaletek
    • Nana
    • Orlando
    • Biały szum

  2. W panelu Elementy kliknij prawym przyciskiem myszy <li>Nana</li> i wybierz z menu Powiel element.

    Wyróżniona opcja „Powiel element” w menu.

  3. 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.

  1. Kliknij prawym przyciskiem myszy dowolny obraz na tej stronie i wybierz Zbadaj.

  2. W panelu Elementy kliknij prawym przyciskiem myszy adres URL obrazu i wybierz z menu Zrób zrzut ekranu węzła.

    Robię zrzut ekranu węzła.

  3. Zrzut ekranu zostanie zapisany w pobranych plikach.

    Zrzut ekranu węzła został zapisany w pobranych plikach.

Zmiana kolejności węzłów DOM

Przeciągnij węzły, aby zmienić ich kolejność.

  1. 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

  2. W drzewie DOM przeciągnij <li>Elvis Presley</li> na górę listy.

    Przeciąganie węzła na górę listy

Wymuś stan

Możesz wymusić pozostawienie węzłów w stanach :active, :hover, :focus, :visited i :focus-within.

  1. Najedź kursorem na Władca much poniżej. Kolor tła zmieni się na pomarańczowy.

    • Władca much
    • Zbrodnia i kara
    • Moby Dicka

  2. Kliknij prawym przyciskiem myszy Władca much powyżej i wybierz Zbadaj.

  3. 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ł.

  1. Kliknij prawym przyciskiem myszy Gwiazdki w miejscu docelowym poniżej i wybierz Zbadaj.

    • Hrabia Monte Christo
    • Gwiazdy moje miejsce podróży

  2. Naciśnij klawisz H. Węzeł jest ukryty. Możesz też kliknąć węzeł prawym przyciskiem myszy i użyć opcji Ukryj element.

    Jak wygląda węzeł w drzewie DOM po jego ukryciu

  3. Ponownie naciśnij klawisz H. Węzeł pojawi się ponownie.

Usuwanie węzła

Naciśnij Delete, aby usunąć węzeł.

  1. Poniżej kliknij prawym przyciskiem myszy opcję Podstawy i wybierz Zbadaj.

    • Ilustrowany człowiek
    • Przez szkło
    • Podstawy

  2. Naciśnij klawisz Delete. Węzeł został usunięty. Możesz też kliknąć węzeł prawym przyciskiem myszy i użyć opcji Usuń element.

  3. 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.

  1. Kliknij prawym przyciskiem myszy The Left Hand of Darkness poniżej i wybierz Zbadaj.

    • Lewa ręka ciemności
    • Diuna

  2. Naciśnij klawisz Escape, aby otworzyć panel konsoli.

  3. Wpisz $0 i naciśnij klawisz Enter. Wynik wyrażenia wskazuje, że $0 zwraca wartość <li>The Left Hand of Darkness</li>.

    Wynik pierwszego wyrażenia $0 w konsoli

  4. Najedź kursorem na wynik. Węzeł jest wyróżniony w widocznym obszarze.

  5. 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>.

    Wynik drugiego wyrażenia $0 w konsoli

Przechowuj jako zmienną globalną

Jeśli musisz wielokrotnie odwoływać się do węzła, zapisz go jako zmienną globalną.

  1. Kliknij prawym przyciskiem myszy Wielki sen poniżej i wybierz Zbadaj.

    • Wielki sen
    • Długie pożegnanie

  2. 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.

  3. Wpisz temp1 w konsoli i naciśnij Enter. Wynik wyrażenia wskazuje, że zmienna określa węzeł.

    Wynik wyrażenia temp1

Kopiuj ścieżkę JS

Skopiuj ścieżkę JavaScript do węzła, jeśli chcesz się do niego odwołać w automatycznym teście.

  1. Kliknij prawym przyciskiem myszy Bracia Karamazow poniżej i wybierz Zbadaj.

    • Bracia Karamazow
    • Zbrodnia i kara

  2. W drzewie DOM kliknij prawym przyciskiem myszy <li>The Brothers Karamazov</li> i wybierz Kopiuj > Kopiuj ścieżkę JS. Wyrażenie document.querySelector() kierujące się do węzła zostało skopiowane do schowka.

  3. Naciśnij Control+V lub Command+V (Mac), by wkleić wyrażenie w konsoli.

  4. Naciśnij Enter, aby ocenić wyrażenie.

    Wynik wyrażenia Kopiuj ścieżkę JS

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ę.

  1. 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.

  2. 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.

    Przewiń, aby pokazać

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.

Gdzie kliknąć, jeśli nie widzisz wszystkich opcji