Tahukah Anda bahwa kami dapat menggunakan JavaScript untuk memanipulasi konten di halaman web? Sepertinya Menarik bukan? Mari kita pahami apa itu Model Objek Dokumen yaitu. DOM dalam JavaScript dengan cara berikut:
- Apa DOM di JavaScript?
- Tindakan DOM di JavaScript
- Mengkueri DOM
- Mendengarkan Acara
- Berinteraksi dengan Formulir
- Membuat Elemen HTML
- Menambahkan CSS
Apa DOM di JavaScript?
Model Objek Dokumen atau DOM dibuat oleh browser saat halaman web dimuat. Dalam bentuk grafis, ini seperti pohon elemen yang juga disebut node, yang digunakan untuk mewakili setiap elemen di halaman.
Semua DOM halaman web kami berada di dalam objek dokumen. Secara terprogram, model ini memungkinkan kita membaca atau bahkan mengubah konten halaman kita melalui . Bukankah itu keren?
Tindakan DOM di JavaScript
Beberapa tindakan yang dapat kita lakukan dengan model ini adalah:
Ubah / Hapus elemen HTML di DOM / pada halaman.
Ubah dan tambahkan gaya CSS ke elemen
keluar dari program di java
Membaca dan mengubah atribut (href, src, alt), dll.
Buat elemen baru dan masukkan ke dalam DOM / halaman.
Lampirkan event listener ke elemen (klik, tekan tombol, kirim)
Membuat kueri DOM di JavaScript
Mengambil elemen HTML atau menahannya untuk menambah / mengubah atau konten disebut kueri.
Kode HTML:
apa yang memiliki hubungan di java
Javascript dan DOM h1 {font-size: 60px}Kode JavaScript:
var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // mengubah warna background menjadi biru muda body.style. backgroundColor = 'biru muda'Kami mengubah warna teks judul dari hitam menjadi merah menggunakan JavaScript. Kami mencapai ini dengan menggunakan .gaya properti kemudian mengubah nilai warna untuk sama dengan bersih .
Sekarang mari kita ubah warna latar belakang elemen tubuh menjadi biru muda .
deep copy vs shallow copy java
Dengan ini, kita sampai pada akhir artikel DOM dalam JavaScript ini. Saya harap Anda mendapatkan pemahaman tentang cara kerja Model Objek Dokumen dan cara menerapkan DOM yang sama di JavaScript.
Sekarang setelah Anda mengetahui tentang DOM di JavaScript, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'DOM dalam JavaScript' dan kami akan menghubungi Anda kembali.