Belajar Javascript es5 Dan es6 Part 16 Mengenai DOM (Document Object Model)

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok share mengenai DOM. DOM adalah document object model. jadi intinya kita mengubah sesuatu dengan menggunakan javascript, mengubah html, css memberikan perintah kepada input, button agar bisa dinamis, kan katanya gitu javascript itu membuat website menjadi lebih dinamis atau lebih berinteraktif, karena kita bisa memberikan perintah apapun dengan menggunakan javascript, nah makanya kita membutuhkan DOM ini, sebenarnya kalau kita lihat tutorial sebelumnya kita udah sedikit-sedikit menggunakan DOM, cuman kalau ga di notice ga tau, ibarat kamu sering kasih kode ke gebetan kamu tapi dia nya ga peka-peka.

Oke anyway, kenapa di judul ada part-partnya  ? karena ini adalah tutorial series belajar javascript dari dasar sampai bisa. kalau mau liat list tutorialnya bisa lihat dibawah ini ya 

Tutorial Series Belajar Javascript es5 & es6

Selanjutnya kita langsung memulai aja ya, tutorial DOM ini ada tahapnya ini, biar ga kemana-mana gitu, jadi om bewok buatin aja nih apa saja yang akan kita pelajarin pada tutorial kali ini

1. Cara Mengambil Data & Cara Menambah Data (innerHtml)

2. Menambahkan style CSS menggunakan Javascript DOM 

3. Bermain dengan List data

4. Belajar menggunakan button dengan menggunakan DOM (addEventListener)

1. Cara Mengambil Data & Cara Menambah Data

Oke kita buat folder terlebih dahulu dengan nama #16_dom dengan nama file yang bernama selector.html Lalu kodingan-Nya seperti dibawah ini ya

Tampilan-Nya seperti dibawah ini

document.querySelector adalah sebuah method untuk select data 

Jadi kayak gini kalau di ceritain

Buat variabel tambahText, document.querySelector tolong ambilkan id demo lalu tambahkan html Hello bewoksatukosong 

id demo di dapat dari html <h1 id="demo"></h1> kalau misalnya 

<h1 class="demo"></h1> berarti gunakan titik (.demo)

id = #demo

class = .demo

2. Menambahkan Style CSS menggunakan Javascript DOM

Kodingannya seperti dibawah ini ya

Tampilannya seperti dibawah ini ya

Sama seperti no 1, tapi perbedaanya kita tambahkan css ketika menambahkan html. kita bisa menggunakan 

<span style='color:blue;'>tambahkan apa aja</span>

3. Bermain dengan Properties DOM

Kita buat list data terlebih dahulu dengan menggunakan ul list, kita buat yang sederhana terlebih dahulu. Nah sebelum kita membuat javascript, kita buat html nya dulu nih, ibaratnya buat fondasinya dulu sebelum beraksi. 

<ul class="list">
 <li class="lists">mangga</li>
 <li class="lists">apel</li>
 <li class="lists">jeruk</li>
 <li class="lists">pisang</li>
</ul>

Nah baru deh kita buat javascript-Nya ya. Full Kodingan-Nya bisa lihat di bawah ini ya. Selanjutnya kita select data dulu nih biar bisa kita atur, nih html mau kita apain. seperti sebelumnya kita gunain document.querySelector(.list) pake titik karena dia class. 

const ul = document.querySelector(".list");

Oke baru nih bisa kita ubah sesuka hati kita. 

3.1 list.remove()

Kita hapus semuanya, kita bisa gunakan list.remove(). kodinganya seperti dibawah ini 

const ul = document.querySelector(".list");

// semua ul class list hilang semua
ul.remove();

Coba tampilin ke browser, pasti kosong. 

3.2 lastElementChild

Fungsi ini kita select data tapi hanya data yang terakhir yang kita ubah
Beberapa perintah yang bisa kita gunakan dengan lastElementChild
ul.lastElementChild.remove();
artinya kita akan menghapus data, hanya benar-benar data yang terakhir. 
Kodinganya seperti dibawah ini

ul.lastElementChild.remove();

Kita juga bisa mengganti data dengan cara 
ul.lastElementChild.innerHTML = 'masukin data yang mau diubah';
otomatis data yang terakhir akan berubah. berubah loh ya bukan menambahkan. kodinganya sepert dibawah ini

ul.lastElementChild.innerHTML = '<h1>hallo apa kabar</h1>';

3.3 FirstElementChild

Fungsi ini kita bisa mengubah awal data sama seperti lastElementChild seperti ini 

ul.firstElementChild.innerHTML = 'Hello';

Otomatis data yang pertama akan berubah menjadi hello

3.4 Children[i]

Fungsi ini kita bisa mengubah data dimanapun berada, angka nya mulai dari 0 jadi kodingannya seperti dibawah ini ya

ul.children[1].innerHTML = 'bewoksatukosong';

Otomatis data yang ke 1 akan berubah menjadi bewoksatukosong, inget ya di mulai dari angka 0

Seluruh kodingannya seperti dibawah ini ya

4. Belajar Menggunakan Button dengan menggunakan DOM (addEventListener)

Jadi ketika button di klik maka dia akan melakukan sesuatu, nah dengan menggunkan addEventListener kita bisa melakukan yang kita inginkan.

Contohnya ketika kita klik button maka akan menampilkan html. Langsung saja kita lihat codingannya dibawah ini

Tampilannya seperti dibawah ini y

Saya membuat 2 button biar bisa berganti-ganti tulisannya dan juga saya menggunakan arrow function dan cara lama.

Tutorial selanjutnya kita akan belajar cara membuat crud pure menggunakan javascript, sampai jumpa di tutorial selanjutnya ya.
Source Code Github

Tutorial Series Belajar Javascript es5 & es6