Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

 

Apa itu DOM API?

DOM merupakan singkatan dari Document Object Model.

Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek.

Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface).


DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG.

…dan DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.

Bagaimana Cara Menggunakan DOM?

Seperti yang kita sudah katahui, DOM adalah sebuah objek untuk memodelkan dokumen HTML.

Objek DOM di javascript bernama document. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML.

Jika kita coba ketik document pada console Javascript, maka yang akan tampil adalah kode HTML.


Di dalam objek document, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML.

Sebagai contoh fungsi documen.write().

Fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML.


Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:

  • getElementById() fungsi untuk memilih elemen berdasarkan atribut id.
  • getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
  • getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
  • getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
  • getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
  • querySelector() fungsi untuk memilih elemen berdasarkan query.
  • querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
  • dan lain-lain.

Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.


Variabel paragraf akan berisi sebuah array yang di dalamnya terdapat tiga buah objek DOM dari paragraf.

Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama.

Paragraf pertama akan barada pada posisi indeks ke-0 di dalam array.

Coba ketik perintah berikut di dalam console Javascript:

paragraf[0].style.color = "red"

Maka hasilnya, paragraf pertama akan berwarna merah.


Kita memanfaatkan fungsi setInterval() dan fungsi setTimeOut() untuk menentukan waktu animasinya.

Pada kode diatas, rentang waktu (interval) kita berikan 1000 milidetik atau 1 detik.

Sedangkan untuk merubah warnanya menjadi hitam, kita berikan waktu 500 milidetik atau 0.5 detik.


Membuat Elemen dengan DOM API

DOM juga menyediakan fungsi untuk membuat elemen HTML.

Salah satunya adalah fungsi createElement().

Contoh:

document.createElement('p');

Maka, akan tercipta elemen <p> baru. Namun tidak akan ditampilkan ke dalam halaman web.

Mengapa tidak ditampilakn?

Karena kita belum menambahkannya ke dalam body dokumen.

Cara menambahkannya ke body dokumen, kita bisa gunakan fungsi append().

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Python: Cara Membaca dan Menulis File di Python

Gambar
  Baca dan tulis file adalah teknik dasar yang harus dipahami dalam pemrograman Python, karena banyak digunakan untuk pengolahan dan pemerosesan file. Paham cara membaca dan menulis file dengan Python akan membuatmu mampu membuat aplikasi yang bisa mengambil dan menyimpan data ke file. Selain itu juga, kamu akan lebih mudah memahami beberapa materi Python Pada Python, file hanya dikelompokkan menjadi dua tipe: File Teks : File yang berisi teks. Setiap baris teks memiliki EOL  (End of Line) . Contoh: TXT, MD, CSV, JSON, dsb. File Binary : File yang bukan teks, hanya bisa diproses oleh program tertentu yang memahami strukturnya. Contoh: EXE, JPG, MKV, M4A, 3GP, dsb. Pada tutorial ini, kita akan hanya belajar cara membaca dan menulis file teks saja. Untuk file  binary , mungkin nanti di kesempatan yang lain. Cara Membaca File di Python Python sudah menyediakan fungsi  open()  untuk membaca dan menulis file.  1 Fungsi ini memiliki dua parameter, yaitu nama file...
Baca selengkapnya

Belajar Javascript: Memahami Struktur Data Array pada Javascript

  Apa itu Array? Sebelum kita membahas Array, kita bahas dulu apa itu struktur data? Struktur data  merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer. Salah satu struktur data yang sering digunakan dalam pemrograman adalah  Array . Array merupakan struktur data yang digunakan untuk  menyimpan sekumpulan data  dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya. Indeks array selalu dimulai dari angka nol ( 0 ). Pada teori struktur data… …Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya. Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Cara Menambahkan Data ke Dalam Array Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Terdapat tiga data di dalam array  buah  dengan indeks: 0 :  "Apel" ...
Baca selengkapnya

Belajar Javascript #7: Memahami 6 Bentuk Percabangan pada Javascript

Gambar
  Apa itu percabangan dan kenapa dinamakan percabangan? Buat yang belum pernah kuliah atau belajar tentang algoritme dan flowchart, mungkin ini istilah yang baru pertama kamu dengar. Isitilah ini sebenarnya untuk menggambarkan alur program yang bercabang. Pada flow chart, logika  “jika…maka”  digambarkan dalam bentuk cabang. Karena itu, ini disebut percabangan. Selain percabangan, struktur ini juga disebut:  control flow ,  decision , struktur kondisi, Struktur if, dsb. Percabangan akan mampu membuat program berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan. 1. Percabangan  if Percabangan  if  merupakan percabangan yang hanya memiliki  satu blok pilihan  saat kondisi bernilai benar. Flowchart  tersebut dapat kita baca seperti ini: “Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan  Selamat, Anda dapat hadiah ” Kalau dibawah Rp 100.000 bagaimana? Ya pesannya tidak ditampilkan. 2. ...
Baca selengkapnya