Javascript DOM (Document Object Model) adalah antarmuka yang memungkinkan pengembang memanipulasi konten, struktur, dan gaya situs web. Jika Anda ingin mempelajari lebih lanjut tentang DOM dan cara memanipulasinya menggunakan Javascript, berikut adalah referensi dasar menurut Gabriel Tanner Show Definisi DOMPada tingkat paling dasar, sebuah situs web terdiri dari dokumen HTML dan CSS. Browser membuat representasi dokumen yang dikenal sebagai Document Object Model (DOM). Dokumen ini mengizinkan Javascript untuk mengakses dan memanipulasi elemen dan gaya situs web. Model ini dibangun dalam struktur objek dan mendefinisikan
Elemen-elemen di atas disebut node. Tidak hanya elemen yang mendapatkan node tetapi atribut elemen dan teks juga mendapatkan nodenya masing-masing, yaitu atribut-node dan text-node Dokumen DOMDocument DOM adalah seluruh objek yang ada di website Anda. Jika Anda ingin mengakses objek apa pun di halaman web Anda, Anda harus selalu memulai dengan dokumen. Karena ada banyak properti dan metode penting yang dapat Anda gunakan untuk mengakses dan memodifikasi situs web Anda Cara Mendapatkan Elemen HTMLMendapat elemen dengan IDMetode getElementById() digunakan untuk mendapatkan satu elemen dengan idnya. Mari kita lihat sebuah contoh
Di sini kita mendapatkan elemen dengan id header-title dan menyimpannya ke dalam sebuah variabel Mendapat elemen dengan nama kelasKita juga bisa mendapatkan lebih dari satu objek dengan menggunakan metode getElementsByClassName() _Di sini kita mendapatkan semua item dengan kelas list-items dan menyimpannya dalam sebuah variabel Mendapat elemen dengan nama tagKita juga bisa mendapatkan elemen kita dengan nama tag menggunakan metode getElementsByTagName()
Di sini kita mendapatkan semua elemen li dari dokumen HTML kita dan menyimpannya ke dalam sebuah variabel pemilih kueriMetode querySelector() mengembalikan elemen pertama yang cocok dengan pemilih CSS yang ditentukan. Itu berarti Anda bisa mendapatkan elemen dengan id, kelas, tag, dan semua pemilih CSS yang valid. Berikut adalah daftar dari beberapa pilihan yang paling populer Dapatkan dengan id
Dapatkan berdasarkan kelas _Dapatkan dengan tag
Dapatkan elemen yang lebih spesifik Kita juga bisa mendapatkan elemen yang lebih spesifik menggunakan CSS Selector _Dalam contoh ini kami mencari tag dan kelas bersama-sama dan mengembalikan elemen pertama yang melewati Pemilih CSS QueryselectorallMetode querySelectorAll() persis sama dengan metode querySelector() kecuali metode ini mengembalikan semua elemen yang cocok dengan CSS Selector
Dalam contoh ini, kita mendapatkan semua tag h1 yang memiliki kelas heading dan menyimpannya dalam sebuah array Memodifikasi Elemen HTMLHTML DOM memungkinkan kita mengubah konten dan gaya elemen HTML dengan mengubah propertinya Ubah HTMLProperti innerHTML dapat digunakan untuk mengubah konten elemen HTML _Dalam contoh ini kita mendapatkan elemen dengan header id dan menyetel konten bagian dalam menjadi “Hello World. ” InnerHTML juga dapat digunakan untuk menempatkan tag di dalam tag lain _Di sini kami meletakkan tag h1 ke semua div yang ada Ubah nilai atributAnda juga dapat mengubah nilai atribut menggunakan DOM _0Dalam contoh ini kita mengubah src dari semua tag menjadi test.jpg. Ubah gayaUntuk mengubah gaya elemen HTML, kita perlu mengubah properti gaya elemen kita. Berikut adalah contoh sintaks untuk mengubah gaya _1Sekarang mari kita lihat contoh di mana kita mendapatkan elemen dan mengubah batas bawah menjadi garis hitam pekat _2Properti CSS harus ditulis dalam huruf unta, bukan nama properti css biasa. Dalam contoh ini kami menggunakan borderBottom Menambah dan menghapus elemenSekarang kita akan melihat bagaimana kita dapat menambahkan elemen baru dan menghapus elemen yang sudah ada Menambahkan elemenBerikut adalah contoh sintaks untuk menambahkan elemen _3Di sini kita hanya membuat elemen div menggunakan metode createElement() yang mengambil tagname sebagai parameter dan menyimpannya dalam sebuah variabel. Setelah itu kita hanya perlu menyediakan beberapa konten lalu memasukkannya ke dalam dokumen DOM kita _4Di sini kita membuat konten menggunakan metode createTextNode() yang menggunakan String sebagai parameter dan kemudian kita menyisipkan elemen div baru sebelum div yang ada di dokumen kita Hapus sebuah elemenBerikut adalah contoh sintaks untuk menghapus elemen _5Di sini kita mendapatkan elemen dan menghapusnya menggunakan metode removeChild() Ganti elemenBerikut adalah contoh sintaks untuk mengganti elemen _6Di sini kita dapat mengganti elemen menggunakan metode replaceChild(). Argumen pertama adalah elemen baru dan argumen kedua adalah elemen yang ingin kita ganti Menulis langsung ke aliran keluaran HTMLKita juga dapat menulis ekspresi HTML dan JavaScript langsung ke aliran keluaran HTML menggunakan metode write() _7Kami juga dapat mengirimkan ekspresi JavaScript seperti objek tanggal _8Metode write() juga dapat mengambil beberapa argumen yang akan ditambahkan ke dokumen saat muncul Penangan AcaraDOM HTML juga memungkinkan Javascript untuk bereaksi terhadap peristiwa HTML. Berikut adalah daftar dari beberapa yang paling penting
Tetapkan AcaraAnda dapat menentukan peristiwa secara langsung dalam kode HTML Anda dengan menggunakan atribut pada tag Anda. Berikut adalah contoh acara onclick _9Dalam contoh ini, teks akan berubah menjadi “Halo!” Saat Anda mengklik tombol.Anda juga dapat memanggil fungsi saat suatu peristiwa dipicu seperti yang Anda lihat pada contoh berikut 0Di sini kita memanggil metode changeText() saat tombol diklik dan meneruskan elemen sebagai atribut Kami juga dapat mengatur acara yang sama dalam kode Javascript kami 1Tetapkan Pendengar AcaraBerikut ini adalah contoh sintaks untuk menentukan event listener ke elemen HTML 2Di sini kita hanya mengatur clickevent yang memanggil metode runEvent saat elemen 'btn' Anda diklik Anda juga dapat menetapkan beberapa acara ke satu elemen _3Hubungan NodeNode dalam Document DOM memiliki hubungan hierarkis satu sama lain, terstruktur seperti pohon. Di sini kita menggunakan istilah parent, sibling, dan child untuk menggambarkan hubungan antar node Node paling atas disebut root dan merupakan satu-satunya node yang tidak memiliki parent. Root dalam dokumen HTML normal adalah tag karena tidak memiliki parent dan merupakan tag teratas di dokumen.Menavigasi Antar NodeKita dapat menavigasi antar node menggunakan properti berikut
Berikut adalah contoh bagaimana Anda bisa mendapatkan elemen induk dari h1 _4Nah, bagaimana pengenalan JavaScript DOM kali ini? Jika Anda tertarik untuk belajar tentang pemrograman website atau ingin menjadi web developer, Anda bisa mendaftarkan diri di tempat magang atau kerja Techarea |