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świetlanie węzłów DOM

W drzewie DOM w panelu Elementy możesz wykonywać wszystkie czynności związane z DOM w DevTools.

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 Michelangelo i wybierz Zbadaj.
    • Michelangelo
    • Rafael Sprawdzanie węzła Otworzy się panel Elementy w Narzędziach deweloperskich. <li>Michelangelo</li> jest wyróżnione w drzewie DOM. Wyróżnianie węzła Michelangelo<
  2. W lewym górnym rogu DevTools kliknij ikonę Sprawdź.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. Zobacz Pierwsze kroki z wyświetlaniem i zmienianiem kodu CSS.

Nawigowanie 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> zostaje zwinięta.

  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 klawisz strzałki w dół 3 razy, aby ponownie wybrać listę <ul>, którą właśnie zwijasz. Powinien on wyglądać mniej więcej tak: <ul>...</ul>

  6. Naciśnij klawisz strzałki w prawo. Lista się rozwinie.

Przewiń, aby pokazać

Podczas przeglądania drzewa DOM możesz czasem zauważyć węzeł DOM, który nie jest obecnie widoczny w obszarze widoku. 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
    • Soutine

  2. Przejdź do sekcji Załącznik: przewijanie do widoku na dole tej strony. Instrukcje znajdziesz w następującej sekcji.

Po wykonaniu instrukcji u dołu strony wrócisz 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 włączyć linijki na 2 sposoby:

  • Naciśnij Control + Shift + P lub Command + Shift + P (Mac), aby otworzyć menu polecenia, wpisać Show rulers on hover i nacisnąć Enter.
  • Sprawdź Ustawienia > Preferencje > Elementy > Pokaż linijki po najechaniu kursorem.

Jednostka miary linijek to piksele.

W drzewie DOM możesz wyszukiwać według ciągu, selektora CSS lub selektora XPath.

  1. Najedź kursorem na panel Elementy.
  2. Naciśnij Control+F lub Command+F (Mac). Pasek wyszukiwania otworzy się u dołu 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 też selektory CSS i XPath.

Panel Elementy wybiera pierwszy pasujący wynik w drzewie DOM i przesuwa go do widoku w obszarze widoku. Domyślnie odbywa się to podczas pisania. Jeśli zawsze pracujesz z długimi zapytaniami, możesz ustawić, aby DevTools uruchamiał wyszukiwanie dopiero po naciśnięciu Enter.

Aby uniknąć niepotrzebnych przeskakiwania między węzłami, odznacz pole wyboru Ustawienia > Ustawienia > Globalne > Szukaj podczas pisania.

Odznaczone pole wyboru Wyszukiwanie w trakcie pisania w Ustawieniach.

Edytowanie DOM

Możesz edytować DOM na bieżąco i sprawdzać, jak 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.

    • Fry
    • Michelle

  2. W drzewie DOM kliknij dwukrotnie Michelle. Kliknij dwukrotnie tekst między <li> a </li>. Tekst jest wyróżniony na niebiesko, aby wskazać, że został wybrany.

    Edytowanie tekstu

  3. Usuń Michelle, wpisz Leela i naciśnij Enter, aby potwierdzić zmianę. Tekst powyżej zmienia się z Michelle na Leela.

Edytuj atrybuty

Aby edytować atrybuty, kliknij dwukrotnie ich nazwę lub wartość. Aby dowiedzieć się, jak dodawać atrybuty do węzła, postępuj zgodnie z instrukcjami podanymi poniżej.

  1. Kliknij prawym przyciskiem myszy Howard poniżej i kliknij Zbadaj.

    • Howard
    • Vince

  2. Kliknij dwukrotnie <li>. Tekst jest podświetlony, aby wskazać, że węzeł jest wybrany.

    Edytowanie węzła

  3. Naciśnij klawisz strzałki w prawo, dodaj spację, wpisz style="background-color:gold" i naciśnij Enter. Kolor tła węzła zmienia się na złoty.

    dodać atrybut 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.

Edytowanie typu węzła

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

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

    • Dean
    • Myszy
    • Thaddeus
    • Brock

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

  3. Usuń li, wpisz button i naciśnij Enter. Węzeł <li> zmienia się na węzeł <button>.

    Zmiana typu węzła na przycisk

Edytuj jako HTML

Aby edytować węzły jako kod HTML z podświetleniem składni i autouzupełnianiem, w menu węzła kliknij Edytuj jako HTML.

  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 w menu kliknij Edytuj jako HTML.

    Menu węzła.

  3. Naciśnij Enter, aby rozpocząć nowy wiersz i zacząć pisać <l. Narzędzia deweloperskie wyróżniają składnię HTML i automatycznie uzupełniają tagi.

    Autouzupełnianie tagów HTML.

  4. W menu autouzupełniania wybierz element li i wpisz >. Narzędzie DevTools automatycznie dodaje zamykający tag </li> po kursorze.

    Narzędzia deweloperskie automatycznie zamykają tag.

  5. Wpisz Sheldon wewnątrz 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 próżności
    • Nana
    • Orlando
    • Biały szum

  2. W panelu Elementy kliknij <li>Nana</li> prawym przyciskiem myszy i w menu kliknij Duplikuj element.

    Opcja Duplikat elementu wyróżniona 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) oraz Shift + Option + strzałka w dół (MacOS).

Zrób zrzut ekranu węzła

Za pomocą opcji Zrób zrzut ekranu węzła możesz zrobić zrzut ekranu dowolnego węzła w drzewie DOM.

  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 w menu kliknij Zrób zrzut ekranu węzła.

    Robię zrzut ekranu węzła.

  3. Zrzut ekranu zostanie zapisany w folderze Pobrane.

    Zrzut ekranu węzła został zapisany w Pobranych.

Aby dowiedzieć się więcej o robieniu zrzutów ekranu za pomocą Narzędzi deweloperskich, przeczytaj artykuł 4 sposoby robienia zrzutów ekranu za pomocą Narzędzi deweloperskich.

Zmiana kolejności węzłów DOM

Aby zmienić kolejność, przeciągnij węzły.

  1. Kliknij prawym przyciskiem myszy Elvis Presley poniżej i wybierz Zbadaj. Zwróć uwagę, że jest to ostatni element na liście.

    • Stevie Wonder
    • Tom Waits
    • Kuba Sienkiewicz
    • Elvis Presley

  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ć, aby węzły pozostawały w takich stanach jak :active, :hover, :focus, :visited i :focus-within.

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

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

  2. Kliknij prawym przyciskiem myszy Lord of the Flies powyżej i wybierz Zbadaj.

  3. Kliknij <li class="demo--hover">The Lord of the Flies</li> prawym przyciskiem myszy i wybierz Wymuś stan > :wskaż. 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.

    Wygląd węzła w drzewie DOM po jego ukryciu

  3. Ponownie naciśnij klawisz H. Węzeł zostanie ponownie wyświetlony.

Usuwanie węzła

Aby usunąć węzeł, naciśnij Usuń.

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

    • The Illustrated Man
    • Przez lustro, do tyłu
    • Fundacja

  2. Naciśnij klawisz Usuń. Węzeł zostanie 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 zostaje cofnięte, a węzeł ponownie się pojawia.

Dostęp do węzłów w konsoli

Narzędzia dla programistów udostępniają kilka skrótów umożliwiających dostęp do węzłów DOM z Konsoli lub uzyskiwanie do nich odwołań w JavaScript.

Utwórz odwołanie do obecnie wybranego węzła, wpisując wartość $0

Gdy sprawdzasz węzeł, obok niego zobaczysz tekst == $0, co oznacza, że możesz odwoływać 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.

    • The Left Hand of Darkness
    • Diuna

  2. Aby otworzyć panel konsoli, naciśnij klawisz Escape.

  3. Wpisz $0 i naciśnij klawisz Enter. Wynik wyrażenia pokazuje, że $0 ma 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. W drzewie DOM kliknij <li>Dune</li>, ponownie wpisz $0 w Konsoli i ponownie naciśnij Enter. Wyznaczona wartość $0 to <li>Dune</li>.

    Wynik drugiego wyrażenia $0 w konsoli

Zapisz jako zmienną globalną

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

  1. Kliknij prawym przyciskiem myszy The Big Sleep poniżej i wybierz Zbadaj.

    • Wielki sen
    • The Long Goodbye

  2. Kliknij <li>The Big Sleep</li> prawym przyciskiem myszy w drzewie DOM i wybierz Zapisz jako zmienną globalną. Jeśli nie widzisz tej opcji, zapoznaj się z załącznikiem: Brakujące opcje.

  3. Wpisz temp1 w Konsoli i naciśnij Enter. Wynik wyrażenia pokazuje, że zmienna jest przypisana do węzła.

    Wynik wyrażenia temp1

Kopiuj ścieżkę JS

Gdy musisz odwołać się do ścieżki JavaScript w teście automatycznym, skopiuj ją do węzła.

  1. Kliknij prawym przyciskiem myszy Braci Karamazow i wybierz Zbadaj.

    • Bracia Karamazow
    • Zbrodnia i kara

  2. Kliknij <li>The Brothers Karamazov</li> prawym przyciskiem myszy w drzewie DOM i wybierz Kopiuj > Kopiuj ścieżkę JS. Do schowka został skopiowany wyrażenie document.querySelector(), które rozwiązuje się do węzła.

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

  4. Aby przeanalizować wyrażenie, naciśnij Enter.

    Wynik wyrażenia Kopiuj ścieżkę JS

Przerwanie przy zmianach DOM

Narzędzie DevTools umożliwia wstrzymanie kodu JavaScript strony, gdy modyfikuje on obiekt DOM. Zobacz punkty przerwania zmian w DOM.

Dalsze kroki

Obejmuje to większość funkcji związanych z DOM w Narzędziach deweloperskich. Pozostałe opcje możesz odkryć, klikając prawym przyciskiem myszy węzły w drzewie DOM i eksperymentując z innymi opcjami, które nie zostały omówione w tym samouczku. Zobacz też Skróty klawiszowe w panelu Elementy.

Odwiedź stronę główną Narzędzi deweloperskich w Chrome, aby dowiedzieć się, co jeszcze możesz robić za pomocą tych narzędzi.

Jeśli chcesz skontaktować się z zespołem DevTools lub uzyskać pomoc od społeczności DevTools, przejdź do sekcji Społeczność.

Dodatek: HTML a DOM

W tej sekcji krótko 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

To drzewo obiektów, czyli węzłów, które reprezentuje zawartość strony, nazywa się DOM. Obecnie wygląda on tak samo jak kod HTML, ale załóżmy, że skrypt, do którego odwołuje się kod HTML na dole, wykonuje 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 węzeł p. Cały DOM wygląda teraz tak:

html
  head
    title
  body
    p
    script
    p

Kod HTML strony różni się od jej DOM. Innymi słowy, HTML reprezentuje początkową treść strony, a DOM – bieżącą treść 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

To jest kontynuacja sekcji Przewijanie do widoku. Aby wypełnić tę sekcję, postępuj zgodnie z instrukcjami poniżej.

  1. Węzeł <li>Magritte</li> nadal powinien być wybrany w drzewie DOM. Jeśli nie, wróć do sekcji Przesuwanie do widoku i zacznij od nowa.

  2. Kliknij prawym przyciskiem myszy węzeł <li>Magritte</li> i wybierz Przesuń widok. Widok przewija się w górę, aby można było zobaczyć węzeł Magritte. Jeśli nie widzisz opcji Przesuń do widoku, zapoznaj się z załącznikiem: brakujące opcje.

    Przewiń, aby pokazać

Załącznik: brakujące opcje

W wielu instrukcjach w tym samouczku zalecamy kliknięcie prawym przyciskiem myszy węzła w drzewie DOM, a następnie wybranie opcji z wyświetlonego menu kontekstowego. Jeśli w menu kontekstowym nie widzisz określonej opcji, spróbuj kliknąć prawym przyciskiem myszy w miejscu z dala od tekstu węzła.

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