Kami menggunakan cookies

Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..

Dimana Anda dapat melihat hasil karya kami?
Tempat kecil membuat kombinasi, namun persilangan yang terjadi didalamnya tidak memberikan banyak kombinasi. Jadi, berhati-hatilah dalam membuat justifikasi, terutama SEO.

DOM (Document Object Model)

Terakhir diperbarui: Jun 20, 2024

Apa itu DOM?

Pengertian dari Document Object Model atau DOM adalah interface yang memungkinkan developer untuk mengubah konten, tampilan, dan struktur dari sebuah website.

Struktur dasar sebuah website tersusun oleh kode HTML dan CSS yang statis. Agar website bisa lebih dinamis, maka digunakanlah bahasa pemrograman Javascript. Javascript yang dinamis berbeda dari HTML dan CSS yang statis sehingga tidak bisa saling berkomunikasi.

Oleh karena itu, DOM dibuat sebagai penghubung antara Javascript dengan HTML dan CSS. Peran DOM adalah membuat Javascript bisa mengakses dan mengubah semua elemen statis yang ada di halaman website. 

Fungsi Penggunaan DOM

Fungsi dari penggunaan DOM sangat penting untuk merepresentasikan dokumen HTML yang sama namun dengan format yang berbeda menggunakan objek. 

Sebagaimana yang sudah dijelaskan sebelumnya, Javascript tidak dapat memahami dokumen HTML secara langsung. Contohnya, Javascript tidak bisa memahami format tag <h1>H1</h1> pada file HTML, namun ia bisa mengerti objek H1 di DOM. 

Properti di DOM

Setelah memahami apa itu DOM dan pentingnya penggunaan DOM dalam membuat website, selanjutnya Anda juga perlu mengetahui apa saja properti yang ada pada DOM.

Properti yang ada di DOM berfungsi untuk mengakses dan memodifikasi dokumen HTML. Adapun, properti di DOM adalah sebagai berikut:

  • Window Object - objek pada browser yang berada di puncak hierarki. Objek ini secara otomatis dibuat oleh browser serta digunakan untuk mengakses semua properti yang ada di browser
  • Document Object - dokumen HTML yang sudah dimuat ke dalam window. Objek ini memiliki beberapa properti yang terhubung dengan objek lainnya. Dengan objek ini, konten pada website dapat diakses serta dimodifikasi. Jika Anda ingin mengakses elemen yang ada pada HTML, maka properti yang harus Anda akses adalah document object.
  • Link Object - properti DOM yang merepresentasikan link tags pada dokumen HTML.
  • Anchor Object - properti DOM yang merepresentasikan a href tags pada dokumen HTML.
  • Form Object - properti DOM yang merepresentasikan form tags pada dokumen HTML.
  • Form Control Elements - properti DOM yang digunakan untuk mengatur elemen pada formulir seperti kolom teks, tombol, checkbox, dan lain sebagainya.

Cara Kerja DOM

Cara kerja DOM adalah dengan memanipulasi halaman website sehingga lebih dinamis dengan mengambil, mengubah, menambahkan, atau menghapus elemen HTML. Selain melakukan manipulasi, kemampuan lainnya dari DOM adalah mengumpulkan data, fungsi, dan atribut milik elemen yang diakses.

Berikut ini adalah beberapa contoh penggunaan DOM dalam mengakses dan memanipulasi dokumen HTML pada sebuah website:

Cara Mengambil Elemen HTML

Ada beberapa cara untuk mendapatkan elemen HTML dengan DOM:

  • document.getElementByID(): DOM Javascript mengambil elemen berdasarkan ID.
  • document.getElementByTagName(): DOM Javascript mengambil elemen berdasarkan nama tag. Artinya, DOM akan mengambil semua elemen yang memiliki tag tersebut.
  • document.getElementByClassName(): DOM Javascript mengambil elemen berdasarkan class name. Artinya, DOM akan mengambil semua elemen yang berada di bawah class tersebut.

 

Cara Mengubah Elemen HTML

Anda bisa mengubah isi konten, struktur, dan tampilan elemen HTML dengan menggunakan DOM Javascript. Berikut adalah metodenya:

  • element.innerHTML: Digunakan untuk mengubah isi konten pada elemen HTML.
  • element.attribute: Digunakan untuk mengubah value dari sebuah atribut pada elemen HTML.
  • element.style.property: Digunakan untuk mengubah style elemen HTML atau CSS

 

Cara Menambah atau Menghapus Elemen HTML

  • document.createElement(element): Digunakan untuk membuat elemen HTML baru.
  • document.removeChild(element): Digunakan untuk menghapus elemen HTML.
  • document.appendChild(element): Digunakan untuk menambah elemen HTML.
  • document.replaceChild(baru, lama): Digunakan untuk mengganti elemen HTML lama ke elemen HTML yang baru.
  • document.write(text): menulis dan menggabungkan kode HTML dan Javascript secara langsung dalam satu baris kode. Ini merupakan salah satu kelebihan dari DOM Javascript.
Mitra kami yang berharga
Aliansi strategis ini memungkinkan kami untuk menawarkan kepada klien-klien kami berbagai solusi inovatif SEO dan pelayanan yang luar biasa. Pelajari Lanjut
cmlabs

cmlabs

Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?

Update Terkini
Terakhir diperbarui: Jun 20, 2024
Terakhir diperbarui: Jun 20, 2024
Terakhir diperbarui: Jun 20, 2024

Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.

Gratis di semua peramban berbasis Chromium

Pasang di peramban Anda sekarang? Jelajahi sekarang cmlabs chrome extension pattern cmlabs chrome extension pattern

Butuh bantuan?

Ceritakan tentang kebutuhan SEO Anda, tim marketing kami akan membantu menemukan solusi terbaik.

Berikut daftar tim kami secara resmi dan diakui, hati-hati terhadap penipuan oknum tidak bertanggung jawab yang mengatasnamakan PT cmlabs Indonesia Digital (cmlabs). Baca lebih lanjut
Marketing Teams

Agita

Marketing

Tanya Saya
Marketing Teams

Irsa

Marketing

Tanya Saya
Marketing Teams

Yuliana

Business & Partnership

Tanya Saya
Marketing Teams

Thalia

Business Development Global

Tanya Saya
Marketing Teams

Robby

Business Development ID

Tanya Saya
Marketing Teams

Dwiyan

Partnership

Tanya Saya
Marketing Teams

Rochman

Product & Dev

Tanya Saya
Marketing Teams

Said

Career & Internship

Tanya Saya

Mohon maaf, saat ini tool Mobile Friendly Test tidak dapat diakses karena sedang dalam tahap pemeliharaan sistem sampai pemberitahuan lebih lanjut.

Cek

Tetap up-to-date dengan tool baru kami, cmlabs Surge. Jelajahi tren & event populer!

Cek

Pendapat Anda Berharga! Beri masukan untuk Survei Plagiarism Checker kami?

Cek

Temukan tren bisnis Anda dengan mudah! Kalkulator proyeksi trafik adalah alat yang sempurna untuk membantu Anda memahami permintaan di sektor bisnis Anda. Pilih sektor Anda dan lihat proyeksi trafiknya sekarang!

Cek

Saat ini tidak ada notifikasi...