Detail KelasDOM adalah singkatan dari document object model, dengan menguasa DOM kita bisa berinteraksi dengan HTML dan CSS melalui Javascript dan memanipulasinya Show
Bagaimana cara memilih elemen HTML yang ingin dimainkan dengan DOM. Kita akan lihat cara menggunakan selektor Cara menambahkan, menghapus dan mengedit elemen HTML, melalui DOM pada Javascript Memainkan attribute pada HTML dengan DOM pada Javsascript Memainkan CSS yang dimilik suatu elemen melalui DOM pada Javsascript Dengan event pada javascript kita bisa mendengan aktivitas yang dilakukan oleh user dan menyiapkan respon yang ingin diberikan dari setiap aktivitasnya Latihan event, dengan event pada javascript kita bisa mendengan aktivitas yang dilakukan oleh user dan menyiapkan respon yang ingin diberikan dari setiap aktivitasnya Kita sudah melihat cara menggunakan selektor pada DOM di javascript, masih ada satu selektor lagi yang punya kekuatan super! Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat memanipulasinya menggunakan Javascript, berikut referensi dasar menurut Gabriel Tanner. Pengertian DOMPada tingkat paling dasar, situs web terdiri dari dokumen HTML dan CSS. Browser membuat representasi dokumen yang dikenal sebagai Document Object Model (DOM). Dokumen ini memungkinkan Javascript untuk mengakses dan memanipulasi elemen dan style situs web. Model ini dibangun dalam struktur objek dan mendefinisikan:
Elemen-elemen di atas disebut sebagai node. Tidak hanya elemen yang mendapatkan node tetapi atribut elemen dan teks juga mendapatkan node sendiri, yaitu attribute-node dan text-node. DOM Document adalah keseluruhan objek yang ada di laman web Anda. Jika Anda ingin mengakses objek apa pun di halaman web Anda, Anda harus selalu mulai dengan dokumen tersebut. Karena ada banyak properties dan method penting yang bisa Anda gunakan untuk mengakses dan memodifikasi situs web Anda. Cara Mendapatkan Elemen HTMLMendapatkan elemen dengan IDMethod getElementById() digunakan untuk mendapatkan elemen tunggal dengan id-nya. Mari kita lihat sebuah contoh:
Di sini kita mendapatkan elemen dengan id header-title dan menyimpannya ke dalam variabel. Mendapatkan elemen dengan nama kelasKita juga bisa mendapatkan lebih dari satu objek dengan menggunakan method getElementsByClassName().
Di sini kita mendapatkan semua item dengan kelas list-items dan menyimpannya ke dalam variabel. Mendapatkan elemen dengan nama tagKita juga bisa mendapatkan elemen kita dengan nama tag menggunakan method getElementsByTagName().
Di sini kita mendapatkan semua elemen li dari dokumen HTML kita dan menyimpannya ke dalam variabel. QueryselectorMethod querySelector() mengembalikan elemen pertama yang cocok dengan CSS selector yang ditentukan. Itu berarti bahwa Anda bisa mendapatkan elemen dengan id, kelas, tag dan semua CSS selector yang valid. Berikut adalah daftar beberapa opsi yang paling populer. Get by id:
Get by class:
Get by tag:
Mendapatkan elemen yang lebih spesifik: Kita juga bisa mendapatkan elemen yang lebih spesifik menggunakan CSS Selector.
Dalam contoh ini kita mencari tag dan kelas secara bersamaan dan mengembalikan elemen pertama yang melewati CSS Selector. QueryselectorallMethod querySelectorAll() sepenuhnya sama dengan method querySelector() kecuali saat ia mengembalikan semua elemen yang sesuai dengan CSS Selector.
Dalam contoh ini, kita mendapatkan semua tag h2 yang memiliki kelas heading dan menyimpannya dalam array. Mengubah Elemen HTMLHTML DOM memungkinkan kita mengubah konten dan style elemen HTML dengan mengubah propertinya. Mengubah HTML
Properti innerHTML dapat digunakan untuk mengubah konten elemen HTML.
Dalam contoh ini kita mendapatkan elemen dengan id header dan mengatur konten inner menjadi “Hello World!”. InnerHTML juga dapat digunakan untuk menempatkan tag di tag lain.
Di sini kita meletakkan tag h2 ke semua div yang sudah ada. Mengubah nilai atributAnda juga dapat mengubah nilai atribut menggunakan DOM.
Dalam contoh ini kita mengubah src dari semua tag <img /> menjadi test.jpg. Mengubah styleUntuk mengubah style elemen HTML, kita perlu mengubah properti style elemen kita. Berikut ini contoh sintaks untuk mengubah style:
Sekarang mari kita lihat contoh di mana kita mendapatkan elemen dan mengubah batas bawah menjadi garis hitam solid:
Properti CSS perlu ditulis dalam camelcase bukan nama properti css normal. Dalam contoh ini kita menggunakan borderBottom. Menambah dan menghapus elemenSekarang kita akan melihat bagaimana kita dapat menambahkan elemen baru dan menghapus yang sudah ada. Menambahkan elemenBerikut ini contoh sintaks untuk menambah elemen:
Di sini kita hanya membuat elemen div menggunakan method createElement() yang mengambil tagname sebagai parameter dan menyimpannya ke dalam variabel. Setelah itu kita hanya perlu memberikan beberapa konten dan kemudian memasukkannya ke dokumen DOM kita.
Di sini kita membuat konten menggunakan method createTextNode() yang menggunakan sebuah String sebagai parameter dan kemudian kita memasukkan elemen div baru sebelum div yang sudah ada dalam dokumen kita. Menghapus elemenBerikut ini contoh sintaks untuk menghapus elemen:
Di sini kita mendapatkan elemen dan menghapusnya menggunakan method removeChild(). Mengganti elemenBerikut ini contoh sintaks untuk mengganti elemen:
Di sini kita dapat mengganti elemen menggunakan method replaceChild(). Argumen pertama adalah elemen baru dan argumen kedua adalah elemen yang ingin kita ganti. Kita juga dapat menulis ekspresi HTML dan JavaScript langsung ke HTML output streammenggunakan method write().
Kita juga dapat meneruskan ekspresi JavaScript seperti objek tanggal.
Method write() juga dapat mengambil beberapa argumen yang akan ditambahkan ke dokumen sesuai dengan kemunculannya. Event HandlersHTML DOM juga memungkinkan Javascript untuk bereaksi terhadap HTML event. Berikut adalah daftar beberapa yang paling penting:
Assign EventsAnda dapat menentukan event secara langsung dalam kode HTML Anda dengan menggunakan atribut pada tag Anda. Berikut adalah contoh event onclick:
Dalam contoh ini, teks <h2 /> akan berubah menjadi “Halo!” Saat Anda mengklik tombol. Anda juga dapat memanggil fungsi saat suatu event dipicu seperti yang Anda lihat pada contoh berikut.
Di sini kita memanggil method changeText() ketika tombol diklik dan meneruskan elemen sebagai atribut. Kita juga dapat menetapkan event yang sama dalam kode Javascript kita.
Assign Events
ListenersBerikut ini contoh sintaks untuk menentukan event listeners ke elemen HTML:
Di sini kita hanya menetapkan clickevent yang memanggil method runEvent ketika elemen ‘btn’ Anda diklik. Anda juga dapat menetapkan beberapa event ke satu elemen:
Node RelationshipsNode dalam DOM Document memiliki hubungan hierarki satu dengan
yang 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 <html /> karena tidak memiliki parent dan merupakan tag teratas di dokumen. Menavigasi Antar NodeKita dapat menavigasi antar node menggunakan properti berikut ini:
Berikut adalah contoh bagaimana Anda bisa mendapatkan elemen parent dari h2.
Nah, bagaimana pengenalan JavaScript DOM kali ini? Semoga artikel ini dapat membantu Anda mengenal Javascript DOM dan bagaimana
menggunakannya untuk memanipulasi elemen di situs web Anda. Jika Anda tertarik untuk belajar tentang pemrograman websiteatau ingin menjadi web developer, Anda bisa mendaftarkan diri Anda di magang atau kerja Techarea. ReferenceTanner, Gabriel. 2019. An introduction to the JavaScript DOM. [Online] Available at
:https://medium.freecodecamp.org/an-introduction-to-the-javascript-dom-512463dd62ec [Accessed April 5, 2019] Dalam JavaScript Apa yang dimaksud dengan DOM?Document Object Model (DOM) adalah sebuah antarmuka pemrograman (programing interface) untuk HTML, XML dan SVG yang bersifat lintas platform dan language-independent. Sebuah peramban web tidak harus menggunakan DOM untuk menampilkan dokumen HTML.
Apa itu DOM JavaScript dan bagaimana model implementasinya?Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat memanipulasinya menggunakan Javascript, berikut referensi dasar menurut Gabriel Tanner.
Apa fungsi dari DOM?Fungsi DOM
Setelah mengetahui pengertian DOM, untuk fungsinya sendiri adalah memungkinkan untuk memanipulasi tampilan web menggunakan JavaScript. Pada saat proses dari render file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM.
Bagaimana cara memanggil fungsi di JavaScript?Cara Memanggil/Eksekusi Fungsi
Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!
|