Show
Tutorial JavaScript Pemula Part 13 : Belajar Mengenai DOM JavascriptTutorial JavaScript Pemula Part 13 : Belajar Mengenai DOM Javascript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan membahas Belajar Mengenai DOM Javascript. Menurut saya, sangat penting belajar mengenai DOM Javascript karena dengan belajar mengenai DOM ini kamu dapat mengakses dan mengubah semua elemen dokumen HTML. Langsung saja kita masuk ke dalam pelajaran DOM Javascript saja yuk! Belajar Mengenai DOM (Document Object Model) JavascriptApa Itu DOM (Document Object Model) Javascript?DOM merupakan singkatan dari Document Object Model, yaitu model objek dari sebuah dokumen HTML yang dapat dimanfaatkan oleh JavaScript untuk mengolah dokumen HTML. Dengan memanfaatkan DOM, JavaScript dapat melakukan berbagai macam tindakan terhadap dokumen HTML.
Apa saja yang bisa dilakukan oleh DOM? Banyak sekali yang bisa dilakukan oleh DOM seperti dibawah ini:
Wow, keren gak tuh Javascript? Ya kerenlah tapi ini masih awal-awal loh, mungkin pelajaran DOM ini akan sangat panjang jadi saya persingkat saja pada inti-intinya atau hal yang sering digunakan pada DOM yang saya jelaskan nantinya. Apa Yang Akan Dipelajari Pada DOM? Kita akan mempelajari banyak hal disini karena pada DOM ini banyak sekali istilah-istilah ataupun method yang kamu harus tahu dan hal yang akan kita pelajari adalah :
Ada banyak sekali ya yang kita harus pelajari, ya iya dong namanya juga proses mau jadi Fullstack Web Developer jadi saya rasa ini sangat penting untuk kamu pelajari. Skuy Kita Lanjut! Menemukan Elemen HTML Dengan DOM JavascriptUntuk menemukan elemen pada HTML, sebenarnya ada banyak cara yang dapat dilakukan oleh javascript, disini saya mempersingkatnya saja agar lebih gampang kamu pahami. Cara menemukan DOM Javascript antara lain sebagai berikut:
Mungkin kamu tidak memperhatikan detail kecil dari Property/Method diatas, salah satu detail kecil yang tidak kamu perhatikan adalah pada getElement, karena untuk getElementById() tidak menggunakan s pada kata element karena atribut id hanya dapat digunakan oleh 1 elemen. Sedangkan yang lainya menggunakan s dan data elemen yang dihasilkan berupa data array. Untuk memilih salah satu elemen yang dihasilkan dapat menggunakan index layaknya menggunakan array. Contoh Menemukan Elemen HTML Dengan DOM Javascript, perhatikan lah code dibawah ini:
Hasil dari code diatas sangatlah sederhana, nah pada tag <p> itu tidak memiliki isi teks sama sekali cuman ada atribut id=”pesan” saja, jadi jika kamu menjalankan code diatas maka akan tampil teks “HELLO WORLD”, teks “Hello World” itu diisi oleh javascript karena javascript sudah berhasil menemukan atribut id pesan. Sederhananya jika didalam bahasa Indonesia kesannya akan seperti ini : Hallo javascript, tolong carikan saya emelen HTML dengan atribut id yang isinya adalah pesan, jika kamu berhasil menemukannya maka tampilkan “Hello World” pada elemen HTML tersebut. Wadoh saya menjelaskannya sudah macam pak Sandhika Galih saja wkwkwk. Okey lanjut! Mengubah Elemen HTML Dengan DOM JavascriptTadikan kita menemukan elemen HTML, nah sekarang jika sudah berhasil kita temukan maka kita harus apakan elemen tersebut? Ya bisa saja kamu ubah elemen tersebut. Jika mengubah Elemen ada beberapa property/method yang harus kamu ketahui seperti berikut:
Jika kamu menggunakan element.nama_atribut = “nilai atribut”, kamu bisa mengantinya atau mengubahnya dengan title, align, src, dan sebagainya. Jika kamu menggunakan element.style.property_css = nilai property, kamu bisa mengganti dengan nama property css yang ingin diubah, tetapi tidak menggunakan penghubung ”-” melainkan kata kedua diawali huruf besar, jika nama property lebih dari satu kata, misanya: fontFamily, textAlign, marginLeft, dan sebagainya. Menambah atau Menghapus Elemen HTML Dengan DOM JavascriptSeperti yang saya jelaskan pada awal-awal materi bahwa DOM Javascript ini banyak sekali yang bisa dilakukan nya seperti mengubah (yang seperti diatas) selain itu kita bisa menambahkan atau menghapus elemen HTML dengen DOM javascript juga loh, nah ada beberapa method yang harus kamu tahu dulu seperti dibawah ini :
Untuk contoh penggunaan dari createElement, kira-kira seperti dibawah ini:
Nah jadi Javascript akan membuat element baru yaitu <div> didalam <div> ada atribut id yang isinya adalah content setelah itu didalam tag <div> ditambahkan tag baru yaitu tag <p> lalu javascript Menambahkan elemen HTML. Navigasi Elemen HTML Dengan DOM JavascriptSebenarnya sebuah dokumen HTML itu tersusun secara herarki. Elemen yang berada di level paling atas disebut root. Setiap elemen pasti mempunyai induk elemen, kecuali root. Beberapa elemen kadang memiliki induk yangsama. Hubungan antara elemen yang memiliki induk sama disebut sibling.
Atau untuk lebih simplenya itu seperti di bawah ini:
Yang dimaksud dengan navigasi elemen yaitu memilih elemen lain dalam hubunganya dengan hirarki elemen berdasarkan elemen yang telah ditemukan. Beberapa property yang dapat digunakan untuk navigasi elemen yaitu:
Mengubah CSS HTML Dengan DOM JavascriptJavascript juga bisa mengubah style CSS HTML kamu loh, ya caranya sama saja seperti menemukan elemen html lalu mengubah style elemen HTML dengan CSS , contoh penggunaannya seperti dibawah:
Hasilnya maka text Hello Sayang akan diubah menjadi warna biru oleh javascript. Okey sekian dulu untuk materi DOM Javascript, next kita akan membahas hal yang lebih menarik lagi pastinya. Semoga Bermanfaat! Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?Cara membuat JavaScript di HTML secara langsung
Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>
Apa itu elemen DOM?DOM atau Document Object Model adalah antarmuka yang tidak berpihak kepada platform dan bahasa tertentu yang membuat program dan script dapat mengakses dokumen HTML secara dinamis dan mengupdate struktur, konten, dan style dokumen.
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!
Manakah elemen HTML berikut ini yang dapat digunakan untuk menulis JavaScript?Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan. Tag <script> dapat kita buat di dalam tag <head> maupun <body> .
|