Manipulasi DOM

1. Penjelasan DOM

DOM (Document Object Model) merupakan object yang berisi struktur dari halaman web kita. DOM berasal dari script HTML yang telah dimuat di browser.

2. Manipulasi DOM dengan Javascript

Setelah DOM berhasil dimuat di browser, maka kita bisa melakukan manipulasi dengan menggunakan javascript

2.1. Menentukan Element

Sebelum memanipulasi dom, kita perlu menentukan element apa yang akan kita manipulasi

// Mencari element berdasarkan ID
document.getElementById('id')

// Mencari element berdasarkan nama tag
document.getElementsByTagName('tagName')

// Mencari element berdasarkan class
document.getElementsByClassName('className')

2.2. Manipulasi Element

Setelah mendapatkan element yang ingin kita manipulasi, maka kita bisa langsung melakukan manipulasi pada element tersebut

var element = document.getElementById('header')

// merubah isi dari element
element.innerHTML = value

// merubah style dari element
element.style.property = value

2.3. Merubah Class Element

Merubah style dari suatu element secara langsung kurang dianjurkan, lebih baik merubah class dari element tersebut dengan menggunakan classList

var element = document.getElementById('header')

// mendapatkan nama class pada element (berupa array)
element.classList

// menambah class pada element
element.classList.add('className')

// menghapus class pada element
element.classList.remove('className')

// toggle class pada element
element.classList.toggle('className')

// memeriksa apakah element memiliki class
element.classList.contains('className')

// mendapatkan jumlah class pada element
element.classList.length

// mendapatkan class pertama pada element
element.classList.item(0)