Mulai melihat dan mengubah DOM

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

Tutorial ini mengasumsikan bahwa Anda mengetahui perbedaan antara DOM dan HTML. Dapatkan penyegaran di lampiran: HTML versus DOM.

Melihat node DOM

Hierarki DOM 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. Di daftar berikut, klik kanan Michelangelo. Dari menu, pilih Periksa.

    • Michelangelo
    • Raphael

    Panel Elements DevTools akan terbuka. <li>Michelangelo</li> ditandai di Hierarki DOM.

    Menandai node Michelangelo

  2. Klik Pilih elemen.

  3. Pilih Tokyo dari daftar berikut.

    • Tokyo
    • Beirut

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

Memeriksa node juga merupakan langkah pertama untuk melihat dan mengubah gaya dan CSS node.

Menjelajahi Hierarki DOM dengan keyboard

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

  1. Dari daftar berikut, klik kanan Ringo, 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> yang berisi petunjuk untuk langkah 1.

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

  6. Tekan tombol panah Kanan. Daftar akan diperluas.

Scroll ke tampilan

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

  1. Dalam daftar berikut, klik kanan Magritte, lalu pilih Inspect.

    • Magritte
    • Soutine

  2. Scroll ke bagian lampiran Scroll ke tampilan untuk petunjuk tambahan.

Setelah selesai, Anda harus kembali ke bagian ini.

Tampilkan penggaris

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

Aktifkan penggaris dengan salah satu dari dua cara berikut:

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

Satuan ukuran penggaris adalah piksel.

Anda dapat menelusuri hierarki DOM berdasarkan string, pemilih CSS, atau pemilih XPath.

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

  3. Ketik The Moon is a Harsh Mistress. Kalimat terakhir disorot di Pohon DOM.

    Menandai kueri di Kotak penelusuran.

Kotak penelusuran juga mendukung pemilih CSS dan XPath.

Panel Elements memilih hasil pertama yang cocok di hierarki DOM dan menampilkannya di area tampilan. 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 Settings > Preferences > Global > Search as you type.

Menghapus centang kotak Telusuri 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. Dalam daftar berikut, klik kanan Michelle, lalu pilih Periksa.

    • Fry
    • Mila

  2. Di Hierarki DOM, klik dua kali Michelle. Dengan kata lain, klik dua kali teks di 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 berubah dari Michelle menjadi Leela.

Edit atribut

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

  1. Dalam daftar berikut, klik kanan Howard, lalu pilih Periksa.

    • Howard
    • Vince

  2. Luaskan <ul>, lalu klik dua kali pada <li> untuk mengedit. Teks ditandai untuk menunjukkan bahwa node dipilih.

    Setelah diklik, node akan ditandai untuk menunjukkan pilihan.

  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

Mengedit jenis node

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

  1. Dalam daftar berikut, klik kanan Hank, lalu pilih Periksa.

    • Dean
    • Henny
    • Thaddeus
    • 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 penandaan sintaksis dan pelengkapan otomatis, pilih Edit as HTML dari menu drop-down node.

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

    • Penny
    • Howard
    • Rama
    • 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 menyarankan tag yang disarankan untuk pelengkapan otomatis.

    Pelengkapan otomatis tag HTML.

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

    DevTools akan menutup tag secara otomatis.

  5. Ketik Sheldon di dalam tag dan tekan Control atau Command + Enter untuk menerapkan perubahan.

Menduplikasi node

Anda dapat menduplikasi elemen menggunakan opsi klik kanan Duplikasi elemen.

  1. Klik kanan Nana dalam daftar berikut, lalu pilih Periksa.

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

  2. Di panel Elements, klik kanan <li>Nana</li>, lalu pilih Duplicate element dari menu drop-down.

    Opsi Duplikasikan elemen disorot di menu drop-down.

  3. Kembali ke halaman. Item daftar telah diduplikasi.

Anda juga dapat menggunakan pintasan keyboard: Shift + Alt + Panah bawah (Windows dan Linux) serta Shift + Option + Panah bawah (macOS).

Mengambil screenshot node

Anda dapat mengambil screenshot setiap node di hierarki DOM.

  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 download Anda (Windows dan macOS).

Pelajari lebih lanjut di 4 cara mengambil screenshot dengan DevTools.

Mengurutkan ulang node DOM

Tarik node untuk mengurutkannya kembali.

  1. Dalam daftar berikut, klik kanan Elvis Presley, lalu pilih Periksa. 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.

Status paksa

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

  1. Arahkan kursor ke item daftar The Lord of the Flies. Warna latar belakang menjadi oranye.

    • The Lord of the Flies
    • Kejahatan dan Hukuman
    • Moby Dick

  2. Klik kanan item daftar The Lord of the Flies, lalu pilih Periksa.

  3. Klik kanan <li class="demo--hover">The Lord of the Flies</li>, lalu pilih Force State > :hover. Baca lampiran tentang opsi yang tidak ada, jika Anda tidak melihat opsi ini.

    Warna latar belakang tetap oranye, meskipun Anda tidak mengarahkan kursor ke node.

Menyembunyikan node

Tekan H untuk menyembunyikan node.

  1. Dari daftar berikut, klik kanan The Stars My Destination, lalu pilih Inspect.

    • The Count of Monte Cristo
    • The Stars My Destination

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

    Tampilan node di Hierarki DOM setelah disembunyikan

  3. Tekan tombol H lagi. Node ditampilkan lagi.

Hapus node

Tekan Delete untuk menghapus node.

  1. Dari daftar berikut, klik kanan Foundation, lalu pilih Inspect.

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

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

  3. Tekan Control+Z atau Command+Z (macOS). Tindakan terakhir diurungkan dan node 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 (termasuk elemen pseudo seperti ::before atau ::after), teks == $0 di samping node berarti Anda dapat mereferensikan node ini di Console dengan variabel $0.

  1. Klik kanan item daftar The Left Hand of Darkness, lalu pilih Inspect.

    • The Left Hand of Darkness
    • Bukit Pasir

  2. Tekan tombol Escape untuk membuka Panel Samping Konsol. Anda mungkin harus memilih Console untuk membukanya.

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

    Hasil ekspresi $0 pertama di Konsol.

  4. Arahkan kursor ke hasil. Node 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.

Simpan sebagai variabel global

Jika Anda perlu merujuk kembali ke node berkali-kali, simpan node tersebut sebagai variabel global.

  1. Dalam daftar berikut, klik kanan The Big Sleep, lalu pilih Periksa.

    • The Big Sleep
    • Perpisahan Panjang

  2. Klik kanan <li>The Big Sleep</li> di Hierarki DOM, lalu pilih Store as global variable. Jika Anda tidak dapat menemukan opsi ini, baca tentang opsi yang tidak ada.

  3. Ketik temp1 di Konsol, lalu tekan Enter. Hasil ekspresi menunjukkan bahwa variabel dievaluasi ke node. Klik node untuk meluaskan item daftar.

    Hasil ekspresi temp1.

Menyalin jalur JS

Menyalin jalur JavaScript ke node untuk mereferensikannya dalam pengujian otomatis.

  1. Dalam daftar berikut, klik kanan The Brothers Karamazov, lalu pilih Periksa.

    • The Brothers Karamazov
    • Kejahatan dan Hukuman

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

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

  4. Tekan Enter untuk mengevaluasi ekspresi.

    Hasil ekspresi Copy JS Path

Berhenti pada perubahan DOM

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

Langkah berikutnya

Hal ini mencakup sebagian besar fitur terkait DOM di DevTools. Anda dapat menemukan semuanya dengan mengklik kanan node di Hierarki DOM dan bereksperimen dengan opsi yang tidak dibahas dalam tutorial ini.

Terus membaca:

Berpartisipasilah dalam komunitas DevTools untuk menghubungi tim DevTools atau mendapatkan bantuan dari developer lain.

Lampiran

Pelajari lebih lanjut topik tertentu.

HTML versus DOM

Bagian ini dengan cepat menjelaskan perbedaan antara HTML dan DOM.

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

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

html
  head
    title
  body
    h1
    p
    script

Pohon objek atau node ini merepresentasikan konten halaman. Ini disebut document object model, atau disingkat DOM. Saat ini, objeknya sama di DOM dan HTML.

Misalkan file script.js di bagian bawah HTML menyertakan fungsi berikut:

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

Skrip tersebut menghapus node h1 dan menambahkan node p lain ke DOM. DOM sekarang terlihat seperti ini:

html
  head
    title
  body
    p
    script
    p

HTML halaman kini berbeda dengan DOM-nya.

HTML mewakili konten halaman awal dan DOM mewakili konten halaman aktif saat ini. Saat JavaScript menambahkan, menghapus, atau mengedit node, DOM menjadi berbeda dengan HTML.

Pelajari lebih lanjut di Pengantar DOM MDN.

Scroll ke tampilan

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

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

  2. Klik kanan node <li>Magritte</li>, lalu pilih Scroll into view. Area pandang Anda akan di-scroll kembali ke atas sehingga Anda dapat melihat node Magritte. Jika Scroll ke tampilan tidak ada, baca artikel tentang opsi yang tidak ada.

Tidak ada opsi

Banyak petunjuk dalam tutorial ini yang menginstruksikan 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 mengklik jika Anda tidak melihat semua opsi