Rozpoczynanie wyświetlania i zmieniania DOM

Kayce Basques
Kayce Basques
Sofia Emelianowa
Sofia Emelianova

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.

  1. Kliknij prawym przyciskiem myszy Michał Anioł poniżej i wybierz Zbadaj.
    • Michał Anioł
    • Rafał Badanie węzła Otworzy się panel Elementy w Narzędziach deweloperskich. Tabela <li>Michelangelo</li> jest wyróżniona w drzewie DOM.Węzeł Michał Anioł<
  2. Kliknij ikonę Zbadaj w lewym górnym rogu Narzędzi deweloperskich.Ikona inspekcji
  3. 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.

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

    • George
    • Ringo
    • Paul
    • John

      Badanie węzła Ringo

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

    Badanie węzła ul

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

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

  5. Naciśnij 3 razy klawisz strzałki w dół, aby ponownie wybrać zwiniętą listę <ul>. Powinien wyglądać tak: <ul>...</ul>

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

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

    • Magritte'a
    • Soutine
  2. 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.

Linijki.

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

Jednostka rozmiaru linijek to piksele.

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

  1. Ustaw kursor na panelu 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.

    Podświetlanie zapytania na pasku wyszukiwania

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

Wyczyszczono pole wyboru wyszukiwania podczas pisania w Ustawieniach.

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.

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

    • Smaż
    • Michelle
  2. 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.

    Edytowanie tekstu

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

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

    • Howard
    • Vince
  2. Kliknij dwukrotnie <li>. Tekst zostanie podświetlony, aby wskazać, że węzeł został wybrany.

    Edytowanie węzła

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

    Dodawanie atrybutu stylu do węzła

Możesz też użyć opcji Edytuj atrybut prawym przyciskiem myszy.

Opcje edycji prawym przyciskiem myszy z wyróżnionym atrybutem edycji.

Edytuj typ węzła

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

  1. Kliknij prawym przyciskiem myszy Połącz poniżej i wybierz Zbadaj.

    • Dziekan
    • Myszy
    • Tadeusz
    • Brock
  2. Kliknij dwukrotnie <li>. Tekst li jest wyróżniony.

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

    Zmieniam typ węzła na przycisk

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.

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

    • Pens
    • Howard
    • Radek
    • Leonard
  2. W panelu Elementy kliknij prawym przyciskiem myszy bieżący węzeł i w menu wybierz Edytuj jako HTML.

    Menu węzła.

  3. Naciśnij Enter, aby zacząć nowy wiersz i wpisać <l. Narzędzie deweloperskie 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 dodają za kursorem zamykający tag </li>.

    DevTools automatycznie zamyka tag.

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

    Stosuję zmiany.

Zduplikuj węzeł

Możesz zduplikować element, klikając opcję Powiel element 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 w menu wybierz Duplikuj element.

    W menu wyróżniona jest opcja Duplikuj element.

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

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

Zmień kolejność 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. Zwróć uwagę, że to ostatni element na liście.

    • Stevie Wonder
    • Tom Waits
    • Kuba Sienkiewicz
    • Elvisa Presleya

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

    Przeciąganie węzła na początek listy

Wymuś stan

Możesz wymusić pozostawienie węzłów w stanach takich jak :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 (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.

  1. Kliknij prawym przyciskiem myszy Gwiazdki: moje miejsce docelowe poniżej i wybierz Zbadaj.

    • Hrabia Monte Cristo
    • Gwiazdy jako cel 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ł jest ponownie wyświetlany.

Usunięcie węzła

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

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

    • Ilustrowany człowiek
    • Przez szkło
    • Podstawowy
  2. Naciśnij klawisz Delete. Węzeł został usunięty. Możesz też kliknąć węzeł prawym przyciskiem myszy i wybrać opcję Usuń element.

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

  1. Kliknij prawym przyciskiem myszy Lewa ręka ciemności poniżej i wybierz Zbadaj.

    • Lewa ręka Ciemności
    • Wydma
  2. Aby otworzyć panel konsoli, naciśnij klawisz Escape.

  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, ponownie wpisz w konsoli $0 i jeszcze raz naciśnij Enter. Teraz $0 przyjmuje wartość <li>Dune</li>.

    Wynik drugiego wyrażenia $0 w konsoli

Zapisz jako zmienną globalną

Jeśli musisz wielokrotnie się do niego odwoływać, 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 Zapisz 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 jest zwracana do węzła.

    Wynik wyrażenia temp1

Skopiuj ścieżkę JS

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

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

    • Bracia Karamazow
    • Zbrodnia i kara
  2. Kliknij prawym przyciskiem myszy <li>The Brothers Karamazov</li> w drzewie DOM i wybierz Kopiuj > Kopiuj ścieżkę JS. Wyrażenie document.querySelector(), które odnosi się do węzła, zostało skopiowane do schowka.

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

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

    Wynik wyrażenia Copy JS Path

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.

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

    Przewiń, aby pokazać

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.

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