Rozpoczynanie wyświetlania i zmieniania DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Obejrzyj film i wykonaj interaktywne samouczki, 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 załączniku: HTML a DOM.

Wyświetlanie węzłów DOM

W panelu Elementy w drzewie DOM 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 szybko otworzyć DevTools i zbadać ten węzeł, klikając Sprawdź.

  1. Kliknij prawym przyciskiem myszy Michelangelo poniżej i wybierz Zbadaj.
    • Michelangelo
    • RaphaelSprawdzanie węzłaOtworzy 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 sprawdzania

  3. Kliknij tekst Tokio poniżej.

    • Tokio

    • Bejrut

      Teraz element <li>Tokyo</li> jest wyróżniony na drzewie DOM.

Sprawdzanie węzła jest też pierwszym krokiem do wyświetlania i zmieniania 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 tym drzewie za pomocą klawiatury.

  1. Kliknij prawym przyciskiem myszy Ringo poniżej i kliknij Zbadaj. <li>Ringo</li> jest zaznaczone w drzewie DOM.

    • 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> zawierający instrukcje kroku 1.

  5. Naciśnij 3 razy klawisz strzałki w dół, 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 na przykład, że przewijasz stronę w dół i chcesz zobaczyć węzeł <h1> u góry strony. Przesuwanie widoku umożliwia szybkie przeniesienie widoku, aby 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. Tam znajdziesz dalsze instrukcje.

Po wykonaniu instrukcji u dołu strony wrócisz tutaj.

Pokaż linijki

Za pomocą linijek nad widocznym obszarem i po jego lewej stronie możesz mierzyć szerokość i wysokość elementu, gdy najedziesz 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. Przesuń kursor 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 na drzewie DOM.

    Zaznaczanie zapytania na pasku wyszukiwania

Jak wspomnieliśmy powyżej, 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 dzieje się to podczas pisania. Jeśli zawsze pracujesz z długimi zapytaniami, możesz ustawić, aby DevTools wykonywało wyszukiwanie tylko 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 ją dwukrotnie w drzewie DOM.

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

    • Fry
    • Michelle

  2. W drzewie DOM kliknij dwukrotnie Michelle. Inaczej mówiąc, kliknij dwukrotnie tekst między <li> i </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 strzałkę w prawo, dodaj spację, wpisz style="background-color:gold" i naciśnij Enter. Kolor tła węzła zmienia się na złoty.

    dodanie atrybutu style do węzła;

Możesz też kliknąć prawym przyciskiem myszy opcję Edytuj atrybut.

Kliknij prawym przyciskiem opcje z wyróżnionym atrybutem edycji.

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 Leonard poniżej i wybierz Zbadaj.

    • Pens
    • Howard
    • Rajesh
    • 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.

    automatyczne uzupeł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

Element możesz powielić, klikając prawym przyciskiem myszy opcję Powiel element.

  1. Kliknij prawym przyciskiem 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ę. Element listy został natychmiast zduplikowany.

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 kliknij Zbadaj.

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

    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.

Zmienianie kolejności węzłów DOM

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

  1. Kliknij prawym przyciskiem myszy Elvis Presley poniżej i kliknij 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 początek 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, zapoznaj się z załącznikiem: Brakujące opcje. Kolor tła pozostaje pomarańczowy, mimo że nie najeżdżasz kursorem na węzeł.

Ukrywanie węzła

Naciśnij H, aby ukryć węzeł.

  1. Kliknij prawym przyciskiem myszy The Stars My Destination poniżej i wybierz Zbadaj.

    • Hrabina Monte Christo
    • The Stars My Destination

  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. Kliknij prawym przyciskiem myszy Foundation poniżej i kliknij Zbadaj.

    • The Illustrated Man
    • Przez lustro
    • 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 zostanie cofnięte, a węzeł pojawi się ponownie.

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.

Odwoływanie się do aktualnie wybranego węzła za pomocą wartości 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 widocznym obszarze jest wyróżniony.

  5. W drzewie DOM kliknij <li>Dune</li>, ponownie wpisz $0 w Konsoli i ponownie naciśnij Enter. Teraz $0 ma wartość <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.

    • The Big Sleep
    • 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

Kopiowanie ścieżki 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 poniżej 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. Wyrażenie document.querySelector(), które rozwiązuje się do węzła, zostało skopiowane do schowka.

  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 Skopiuj ścieżkę JS

Przerwanie przy zmianach DOM

Narzędzia programistyczne umożliwiają wstrzymanie kodu JavaScript strony, gdy modyfikuje on 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, odwiedź stronę Społeczność.

Załącznik: HTML a DOM

W tej sekcji krótko wyjaśniamy różnicę między HTML a DOM.

Gdy używasz przeglądarki do wysłania żądania strony, takiej jak https://example.com, serwer zwraca kod HTML w takiej postaci:

<!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, które wygląda tak:

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ę teraz od jej DOM-u. Innymi słowy, HTML reprezentuje początkową treść strony, a DOM – bieżącą treść strony. Gdy JavaScript dodaje, usuwa lub edytowanie węzłów, DOM staje się inny niż HTML.

Więcej informacji znajdziesz w artykule Wprowadzenie do DOM.

Załącznik: Przewiń, aby pokazać

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> powinien być nadal zaznaczony 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

Wiele instrukcji w tym samouczku wymaga kliknięcia prawym przyciskiem myszy węzła w drzewie DOM, a potem wybrania opcji z wyświetlonego menu kontekstowego. Jeśli nie widzisz określonej opcji w menu kontekstowym, spróbuj kliknąć prawym przyciskiem myszy w pobliżu tekstu węzła.

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