Mulai melihat dan mengubah DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Tonton video dan selesaikan tutorial interaktif ini untuk mempelajari dasar-dasar melihat dan mengubah DOM halaman menggunakan Chrome DevTools.

Tutorial ini mengasumsikan bahwa Anda mengetahui perbedaan antara DOM dan HTML. Lihat Lampiran: HTML versus DOM untuk mengetahui penjelasannya.

Melihat node DOM

Hierarki DOM di panel Elemen adalah tempat Anda melakukan semua aktivitas terkait DOM di DevTools.

Memeriksa node

Jika Anda tertarik dengan node DOM tertentu, Periksa adalah cara cepat untuk membuka DevTools dan menyelidiki node tersebut.

  1. Klik kanan Michelangelo di bawah, lalu pilih Periksa.
    • Michelangelo
    • Raphael Memeriksa node Panel Elements di DevTools akan terbuka. <li>Michelangelo</li> ditandai di Hierarki DOM. Menandai node Michelangelo<
  2. Klik ikon Inspect di pojok kiri atas DevTools.Ikon Periksa

  3. Klik teks Tokyo di bawah.

    • Tokyo

    • Beirut

      Sekarang, <li>Tokyo</li> ditandai di Hierarki DOM.

Memeriksa node juga merupakan langkah pertama untuk melihat dan mengubah gaya node. Lihat Memulai Melihat dan Mengubah CSS.

Menavigasi Hierarki DOM dengan keyboard

Setelah memilih node di Hierarki DOM, Anda dapat menavigasi Hierarki DOM dengan keyboard.

  1. Klik kanan Ringo di bawah, lalu pilih Periksa. <li>Ringo</li> dipilih di Hierarki DOM.

    • George
    • Ringo
    • Paul

    • John

      Memeriksa node Ringo

  2. Tekan tombol panah Atas 2 kali. <ul> dipilih.

    Memeriksa node ul

  3. Tekan tombol panah Kiri. Daftar <ul> diciutkan.

  4. Tekan tombol panah Kiri lagi. Induk node <ul> dipilih. Dalam hal ini, node <li> berisi petunjuk untuk langkah 1.

  5. Tekan tombol panah Bawah 3 kali sehingga Anda telah memilih ulang daftar <ul> yang baru saja diciutkan. Kodenya akan terlihat seperti ini: <ul>...</ul>

  6. Tekan tombol panah Kanan. Daftar akan diperluas.

Scroll ke tampilan

Saat melihat Hierarki DOM, terkadang Anda akan tertarik dengan node DOM yang saat ini tidak berada di area pandang. Misalnya, Anda men-scroll ke bagian bawah halaman, dan Anda tertarik dengan node <h1> di bagian atas halaman. Scroll ke tampilan memungkinkan Anda memosisikan ulang area tampilan dengan cepat sehingga Anda dapat melihat node.

  1. Klik kanan Magritte di bawah, lalu pilih Periksa.

    • Magritte
    • Soutine

  2. Buka bagian Lampiran: Scroll ke tampilan di bagian bawah halaman ini. Petunjuknya akan dilanjutkan di sana.

Setelah menyelesaikan petunjuk di bagian bawah halaman, Anda akan kembali ke sini.

Tampilkan penggaris

Dengan penggaris di atas dan di sebelah kiri area pandang, Anda dapat mengukur lebar dan tinggi elemen saat mengarahkan kursor ke elemen tersebut di panel Elemen.

Penggaris.

Aktifkan penggaris dengan salah satu dari dua cara berikut:

  • Tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka menu Command, ketik Show rulers on hover, lalu tekan Enter.
  • Periksa Setelan > Preferensi > Elemen > Tampilkan penggaris saat mengarahkan kursor.

Unit pengukuran aturan adalah piksel.

Anda dapat menelusuri Hierarki DOM menurut string, pemilih CSS, atau pemilih XPath.

  1. Fokuskan kursor Anda ke panel Elemen.
  2. Tekan Control+F atau Command+F (Mac). Kotak Penelusuran akan terbuka di bagian bawah Hierarki DOM.

  3. Ketik The Moon is a Harsh Mistress. Kalimat terakhir ditandai di Hierarki DOM.

    Menandai kueri di Kotak penelusuran

Seperti yang disebutkan di atas, Kotak penelusuran juga mendukung pemilih CSS dan XPath.

Panel Elemen memilih hasil pertama yang cocok di hierarki DOM dan memutarnya ke tampilan di area pandang. Secara default, hal ini terjadi saat Anda mengetik. Jika Anda selalu menggunakan kueri penelusuran yang panjang, Anda dapat membuat DevTools menjalankan penelusuran hanya saat Anda menekan Enter.

Untuk menghindari lompatan yang tidak perlu di antara node, hapus centang pada kotak Setelan > Preferensi > Global > Telusuri saat Anda mengetik.

Membatalkan centang pada kotak Penelusuran saat Anda mengetik di Setelan.

Mengedit DOM

Anda dapat mengedit DOM dengan cepat dan melihat pengaruh perubahan tersebut terhadap halaman.

Edit konten

Untuk mengedit konten node, klik dua kali konten di Hierarki DOM.

  1. Klik kanan Michelle di bawah, lalu pilih Periksa.

    • Menggoreng
    • Michelle

  2. Di Hierarki DOM, klik dua kali Michelle. Dengan kata lain, klik dua kali teks antara <li> dan </li>. Teks ditandai dengan warna biru untuk menunjukkan bahwa teks tersebut dipilih.

    Mengedit teks

  3. Hapus Michelle, ketik Leela, lalu tekan Enter untuk mengonfirmasi perubahan. Teks di atas berubah dari Michelle menjadi Leela.

Edit atribut

Untuk mengedit atribut, klik dua kali nama atau nilai atribut. Ikuti petunjuk di bawah untuk mempelajari cara menambahkan atribut ke node.

  1. Klik kanan Howard di bawah, lalu pilih Periksa.

    • Howard
    • Vince

  2. Klik dua kali <li>. Teks ditandai untuk menunjukkan bahwa node dipilih.

    Mengedit node

  3. Tekan tombol panah Kanan, tambahkan spasi, ketik style="background-color:gold", lalu tekan Enter. Warna latar belakang node berubah menjadi emas.

    Menambahkan atribut gaya ke node

Anda juga dapat menggunakan opsi klik kanan Edit atribut.

Opsi klik kanan dengan atribut edit ditandai.

Mengedit jenis node

Untuk mengedit jenis node, klik dua kali jenis, lalu ketik jenis baru.

  1. Klik kanan Hank di bawah, lalu pilih Periksa.

    • Dean
    • Henny
    • Tadeus
    • Brock

  2. Klik dua kali <li>. Teks li ditandai.

  3. Hapus li, ketik button, lalu tekan Enter. Node <li> berubah menjadi node <button>.

    Mengubah jenis node menjadi tombol

Edit sebagai HTML

Untuk mengedit node sebagai HTML dengan sorotan sintaksis dan pelengkapan otomatis, pilih Edit as HTML dari menu drop-down node.

  1. Klik kanan Leonard di bawah, lalu pilih Periksa.

    • Penny
    • Howard
    • Rajesh
    • Leonard

  2. Di panel Elemen, klik kanan node saat ini, lalu pilih Edit sebagai HTML dari menu drop-down.

    Menu drop-down node.

  3. Tekan Enter untuk memulai baris baru dan mulai mengetik <l. DevTool menyoroti sintaksis HTML dan melengkapi tag secara otomatis untuk Anda.

    Pengisian otomatis tag HTML.

  4. Pilih elemen li dari menu pelengkapan otomatis, lalu ketik >. DevTools otomatis menambahkan tag </li> penutup setelah kursor.

    DevTools akan otomatis menutup tag.

  5. Ketik Sheldon di dalam tag, lalu tekan Control / Command + Enter untuk menerapkan perubahan.

    Menerapkan perubahan.

Menduplikasi node

Anda dapat menduplikasi elemen menggunakan opsi klik kanan Duplikasi elemen.

  1. Klik kanan Nana di bawah, lalu pilih Periksa.

    • Bonfire of the Vanities
    • Nana
    • Orlando
    • White Noise

  2. Di panel Elemen, klik kanan <li>Nana</li>, lalu pilih Duplikasikan elemen dari menu drop-down.

    Opsi Duplicate element ditandai di drop-down.

  3. Kembali ke halaman. Item daftar telah langsung diduplikasi.

Anda juga dapat menggunakan pintasan keyboard: panah Shift + Alt + Bawah (Windows dan Linux) dan panah Shift + Option + Bawah (MacOS).

Mengambil screenshot node

Anda dapat mengambil screenshot setiap node di Hierarki DOM menggunakan Ambil screenshot node.

  1. Klik kanan gambar apa pun di halaman ini, lalu pilih Periksa.

  2. Di panel Elements, klik kanan URL gambar, lalu pilih Capture node screenshot dari menu drop-down.

    Screenshot node sedang diambil.

  3. Screenshot akan disimpan ke hasil download Anda.

    Screenshot node disimpan ke download.

Untuk mempelajari lebih lanjut cara mengambil screenshot dengan Devtools, lihat 4 cara mengambil screenshot dengan DevTools.

Mengurutkan ulang node DOM

Tarik node untuk mengurutkannya ulang.

  1. Klik kanan Elvis Presley di bawah, lalu pilih Periksa. Perhatikan bahwa ini adalah item terakhir dalam daftar.

    • Stevie Wonder
    • Tom Waits
    • Chris Thile
    • Elvis Presley

  2. Di Hierarki DOM, tarik <li>Elvis Presley</li> ke bagian atas daftar.

    Menarik node ke bagian atas daftar

Paksa status

Anda dapat memaksa node tetap dalam status seperti :active, :hover, :focus, :visited, dan :focus-within.

  1. Arahkan kursor ke The Lord of the Flies di bawah. Warna latar belakang menjadi oranye.

    • The Lord of the Flies
    • Crime and Punishment
    • Moby Dick

  2. Klik kanan The Lord of the Flies di atas, lalu pilih Periksa.

  3. Klik kanan <li class="demo--hover">The Lord of the Flies</li>, lalu pilih Force State > :hover. Lihat Lampiran: Opsi tidak ada jika Anda tidak melihat opsi ini. Warna latar belakang tetap oranye meskipun Anda tidak benar-benar mengarahkan kursor ke node.

Menyembunyikan node

Tekan H untuk menyembunyikan node.

  1. Klik kanan The Stars My Destination di bawah, lalu pilih Periksa.

    • The Count of Monte Cristo
    • The Stars My Destination

  2. Tekan tombol H. Node disembunyikan. Anda juga dapat mengklik kanan node dan menggunakan opsi Sembunyikan elemen.

    Tampilan node di Hierarki DOM setelah disembunyikan

  3. Tekan tombol H lagi. Node akan ditampilkan lagi.

Hapus node

Tekan Delete untuk menghapus node.

  1. Klik kanan Foundation di bawah, lalu pilih Inspect.

    • The Illustrated Man
    • Through the Looking-Glass
    • Fondasi

  2. Tekan tombol Delete. Node dihapus. Anda juga dapat mengklik kanan node dan menggunakan opsi Hapus elemen.

  3. Tekan Control+Z atau Command+Z (Mac). Tindakan terakhir diurungkan dan node akan muncul kembali.

Mengakses node di Konsol

DevTools menyediakan beberapa pintasan untuk mengakses node DOM dari Konsol, atau mendapatkan referensi JavaScript ke node tersebut.

Mereferensikan node yang saat ini dipilih dengan $0

Saat Anda memeriksa node, teks == $0 di samping node berarti Anda dapat mereferensikan node ini di Konsol dengan variabel $0.

  1. Klik kanan The Left Hand of Darkness di bawah, lalu pilih Periksa.

    • The Left Hand of Darkness
    • Dune

  2. Tekan tombol Escape untuk membuka Panel Samping Konsol.

  3. Ketik $0 dan tekan tombol Enter. Hasil ekspresi menunjukkan bahwa $0 bernilai <li>The Left Hand of Darkness</li>.

    Hasil ekspresi $0 pertama di Konsol

  4. Arahkan kursor ke hasil. Node akan ditandai di area pandang.

  5. Klik <li>Dune</li> di Hierarki DOM, ketik $0 di Konsol lagi, lalu tekan Enter lagi. Sekarang, $0 bernilai <li>Dune</li>.

    Hasil ekspresi $0 kedua di Konsol

Menyimpan sebagai variabel global

Jika Anda perlu merujuk kembali ke node beberapa kali, simpan sebagai variabel global.

  1. Klik kanan The Big Sleep di bawah, lalu pilih Periksa.

    • The Big Sleep
    • The Long Goodbye

  2. Klik kanan <li>The Big Sleep</li> di Hierarki DOM, lalu pilih Simpan sebagai variabel global. Lihat Lampiran: Opsi tidak ada jika Anda tidak melihat opsi ini.

  3. Ketik temp1 di Konsol, lalu tekan Enter. Hasil ekspresi menunjukkan bahwa variabel dievaluasi ke node.

    Hasil ekspresi temp1

Salin jalur JS

Salin jalur JavaScript ke node saat Anda perlu mereferensikannya dalam pengujian otomatis.

  1. Klik kanan The Brothers Karamazov di bawah, lalu pilih Periksa.

    • The Brothers Karamazov
    • Crime and Punishment

  2. Klik kanan <li>The Brothers Karamazov</li> di Hierarki DOM, lalu pilih Salin > Salin Jalur JS. Ekspresi document.querySelector() yang me-resolve ke node telah disalin ke papan klip Anda.

  3. Tekan Control+V atau Command+V (Mac) untuk menempelkan ekspresi ke dalam Konsol.

  4. Tekan Enter untuk mengevaluasi ekspresi.

    Hasil ekspresi Salin Jalur JS

Berhenti pada perubahan DOM

DevTools memungkinkan Anda menjeda JavaScript halaman saat JavaScript mengubah DOM. Lihat titik henti sementara perubahan DOM.

Langkah berikutnya

Hal ini mencakup sebagian besar fitur terkait DOM di DevTools. Anda dapat menemukan yang lainnya dengan mengklik kanan node di Hierarki DOM dan bereksperimen dengan opsi lain yang tidak tercakup dalam tutorial ini. Lihat juga Pintasan keyboard panel Elemen.

Lihat halaman beranda Chrome DevTools untuk menemukan semua hal lain yang dapat Anda lakukan dengan DevTools.

Lihat Komunitas jika Anda ingin menghubungi tim DevTools atau mendapatkan bantuan dari komunitas DevTools.

Lampiran: HTML versus DOM

Bagian ini menjelaskan perbedaan antara HTML dan DOM dengan cepat.

Saat Anda menggunakan browser web untuk meminta halaman seperti https://example.com, server akan menampilkan HTML seperti ini:

<!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>

Browser mengurai HTML dan membuat hierarki objek seperti ini:

html
  head
    title
  body
    h1
    p
    script

Hierarki objek, atau node, yang mewakili konten halaman ini disebut DOM. Saat ini, kode ini terlihat sama dengan HTML, tetapi anggaplah skrip yang dirujuk di bagian bawah HTML menjalankan kode ini:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Kode tersebut menghapus node h1 dan menambahkan node p lain ke DOM. DOM lengkap kini terlihat seperti ini:

html
  head
    title
  body
    p
    script
    p

HTML halaman kini berbeda dengan DOM-nya. Dengan kata lain, HTML mewakili konten halaman awal, dan DOM mewakili konten halaman saat ini. Saat JavaScript menambahkan, menghapus, atau mengedit node, DOM menjadi berbeda dengan HTML.

Lihat Pengantar DOM untuk mempelajari lebih lanjut.

Lampiran: Men-scroll agar muncul

Ini adalah kelanjutan dari bagian Scroll ke tampilan. Ikuti petunjuk di bawah untuk menyelesaikan bagian ini.

  1. Node <li>Magritte</li> akan tetap dipilih di Hierarki DOM Anda. Jika tidak, kembali ke Scroll ke tampilan dan mulai lagi.

  2. Klik kanan node <li>Magritte</li>, lalu pilih Scroll ke tampilan. Viewport Anda akan di-scroll kembali sehingga Anda dapat melihat node Magritte. Lihat Lampiran: Opsi tidak ada jika Anda tidak dapat melihat opsi Scroll ke tampilan.

    Scroll ke tampilan

Lampiran: Opsi tidak ada

Banyak petunjuk dalam tutorial ini yang meminta Anda untuk mengklik kanan node di Hierarki DOM, lalu memilih opsi dari menu konteks yang muncul. Jika Anda tidak melihat opsi yang ditentukan di menu konteks, coba klik kanan di luar teks node.

Tempat untuk mengklik jika Anda tidak melihat semua opsi