Cara Memilih Elemen HTML DOM Javascript Part 1

Pada bagian pertama materi DOM dasar ini kita akan belajar tentang selector dimana selector ini adalah sebuah cara kita memilih elemen-elemen tertentu pada HTML yang kita punya. Contohnya disini saya sudah siapkan tag tag HTMLnya yang saya berikan id dan classnya masing masing sebagai berikut

saya punya id span dan sebuah gambar. Lalu ada 3 tag <div> dengan class box

dan yang terakhir ada beberapa list yang isinya seperti berikut

dimana saya sudah atur sedikit style CSSnya

Jadi hari ini kita akan membahas cara memilih elemen-elemen diatas dengan kode javascript. Yang pertama kita mulai dari id. Pada id cara memilihnya kita akan gunakan getElementById(nama id-nya)

perhatikan huruf besar kecilnya. Nama id yang akan kita tulis adalah span yang ditampung disatu variabel. Disini kita akan banyak sekali mengenal metode-metode yang teman teman bisa gunakan. Salah satunya kita akan gunakan innerHTML

dengan metode tersebut kita dapat mengubah atau mengisi content didalam tag yang kita pilih. Saya ubah isinya dengan isi yang baru dan kita bisa lihat pada browser bagian id span ini yang isi awalnya DOM sudah diubah menjadi text yang baru hasilnya sebagai berikut

itu dia cara pertama kita memilih elemen HTML dengan id. Lalu pada bagian kedua kita akan lanjutkan pada artikel selanjutnya. Sampai jumpa dibagian berikutnya. Terima kasih.