Pada video sebelumnya kita telah membahas mengenai DOM Selector, untuk memilih elemen pada HTML. Kita akan melanjutkan materi pelajaran kita ke DOM Manipulation. DOM Manipulation ini sebenarnya bukan istilah resmi. Yang dimaksud DOM Manipulation disini adalah mengubah elemen yang telah berhasil kita pilih menggunakan Selector.

Apa saja yang bisa diubah? Pada video sebelumnya kita sudah belajar untuk mengubah teks dan warna. Pada video ini kita akan belajar untuk mengubah lebih banyak lagi. Ada ratusan method dan property yang bisa kita gunakan untuk DOM Manipulation, namun kita hanya membahas yang penting dan sering digunakan saja.

Secara garis besar, saya mengelompokkan DOM Manipulation menjadi 5 kategori. Yang pertama adalah text, yang sudah pernah kita praktekan dengan menggunakan property innerText. Nantinya akan kita bahas lebih detil beberapa cara lain untuk mengubah text. Yang kedua adalah style, yang sudah pernah kita praktekkan juga ya untuk mengubah warna elemen. Nantinya kita akan bisa mengubah property apapun pada CSS dengan menggunakan style.

Yang ketiga adalah attribute tag. Sebagai contoh anchor tag memiliki attribute href untuk merujuk ke halaman lain pada saat link diklik. Dan tag img memiliki attribute src untuk merujuk ke file gambar yang hendak ditampilkan. Semua attribute ini bisa kita ubah menggunakan DOM.

Yang keempat adalah ClassList. Sebenarnya ClassList ini digunakan untuk mengubah attribute juga, namun ClassList secara khusus mengubah attribute class. Disini kita bisa menambah ataupun mengurangi class yang digunakan pada suatu elemen.

Dan yang terakhir, kita akan belajar cara mengubah elemen itu sendiri. Disini kita akan belajar mengenai cara menambah ataupun mengurangi elemen dari halaman HTML kita. Dari seluruh materi DOM Manipulation, mengubah elemen adalah materi yang paling sulit. Oleh karena itu akan kita bahas di bagian paling akhir dari video.

Kita masuk ke materi pertama kita, yaitu manipulasi Text. Ada 3 buah property yang bisa kita gunakan untuk manipulasi text, yaitu innerText, textContent dan innerHTML. Kita sudah pernah mencoba innerText. Apa bedanya dengan textContent dan innerHTML? Langsung kita praktekkan saja ya.

Kita buka kembali source code dari video sebelumnya. Bisa dilihat pada halaman HTML, terdapat tag judul h1 dengan id=myid. Kemudian ada daftar angka, daftar nama buah. Terakhir ada tag image dan tag script. Namun script dom.js sudah saya kosongkan agar halaman HTML tidak berubah karena Javascript sebelumnya. Saya juga sudah menambahkan link ke file style.css, namun isinya masih kosong.

Untuk melihat perbedaan antara innerText, textContent dan innerHTML, kita ketik dahulu kodenya di dom.js ya. Kita mau melihat text dari judul atau tag h1 dengan id=”myid”. Pertama kita buat dahulu konstanta element, yang nilainya diambil dari document.getElementById(‘myid’). Kita tampilkan di console isi, pertama kita berikan tulisan “innerText” terlebih dahulu, lalu ditambah dengan isi dari property innerText. Kita copy paste untuk textContent dan innerHTML. Kita simpan dan refresh browser ya. Kita lihat di console, saat ini isi dari ketiga property adalah sama ya.

const element = document.getElementById("myid");
console.log("innerText " + element.innerText);
console.log("textContent " + element.textContent);
console.log("innerHTML " + element.innerHTML);

Untuk melihat perbedaannya, kita kembali ke kode HTML. Kemudian di dalam text h1, kita tekan tombol enter sebelum kata Halaman. Perhatikan bahwa tulisan Halaman turun ke bawah, dan di sebelah kiri terdapat spasi. Kita simpan dan refresh browser. Sekarang kita lihat ada perbedaan antara ketiga property ya. innerHTML tetap menampilkan text seperti biasa. Namun untuk textContent dan innerHTML, kata halaman turun ke bawah dan di sebelah kirinya terdapat spasi, persis dengan kode HTML kita.

Kita kembali ke kode HTML. Untuk melihat lagi perbedaan selanjutnya, kita tambahkan tag em pada kata halaman. Kita simpan dan refresh browser. Sekarang tulisan Halaman menjadi menggunakan huruf miring. Lalu kalau kita lihat di bagian console. Khusus pada property innerHTML, kita bisa melihat tag em. Sedangkan di innerText dan textContent tidak bisa melihat tag em.

Jadi ini adalah perbedaan antara innerText, textContent dan innerHTML ya. innerText berisi text yang dibaca oleh pengunjung di layar browser. Penggunaan whitespace seperti enter, spasi dan tab sudah diatur ulang oleh browser. Sedangkan textContent dan innerHTML berisikan text yang dibaca oleh browser dari kode HTML. textContent tidak bisa melihat tag, sedangkan innerHTML bisa melihat tag.

Yang perlu diperhatikan lagi disini adalah berhubung innerText menampilkan text yang dibaca oleh pengunjung, maka kalau ada bagian text yang kita hilangkan, seharusnya text tersebut menjadi hilang dari innerText. Kita coba praktekkan ya.

Untuk menghilangkan tampilan text dari layar, maka kita bisa mengubah property CSS display menjadi none. Jadi kita ke kode CSS dahulu ya. Kita tambahkan selector kelas .display-none. Lalu isinya adalah display : none;. Lalu kita ke kode HTML. Pada tag em, kita tambahkan attribute class=”display-none”.

Kita simpan dan refresh browser. Sekarang kalau kita lihat di tampilan browser, maka yang kelihatan pada judul hanya kata Judul saja. Kita lihat lagi console. Dan ternyata isi dari innerText berubah menjadi hanya “Judul” saja, karena sudah tidak ditampilkan di browser. Sedangkan isi dari textContent dan innerHTML tetap seperti biasa.

Selanjutnya kita coba lihat isi dari ketiga property ini, kalau kita memilih elemen lain. Kita lihat di kode HTML. Misalkan kita ambil elemen ol dengan id numbers ini. Perhatikan bahwa elemen OL tidak memiliki text sama sekali. Namun elemen OL memiliki 3 buah elemen li, yang masing-masing memiliki text. Kita pindah ke Javascript ya. Kita ubah id-nya menjadi numbers.

Kita simpan dan refresh browser. Dan sekarang ketiga property berisi Daftar Pertama, Daftar Kedua dan Daftar Ketiga, dengan format masing-masing. Artinya text yang kita dapatkan bukan hanya dari elemen yang kita tunjuk saja ya. Namun kita mendapatkan text dari semua anak elemen tersebut. Dan kalau misalnya kita tambahkan kelas display-none pada Daftar Kedua, maka text Daftar Kedua hilang dari innerHTML, namun tetap muncul di textContent dan innerHTML.

Sekarang kita coba ganti text dari elemen ol ya. Seperti biasa, di dalam tag ol, kita harus menggunakan tag li. Pertama kita coba gunakan innerText dulu ya. Setelah getElementById, kita ganti teksnya menjadi “

element.innerText = "
Teks Baru
";

Kita simpan dan refresh browser. Ternyata hasilnya tidak sesuai harapan ya. Tag li dituliskan sebagai text. Dan kalau kita lihat dari property innerHTML, ternyata tanda kurung tag secara otomatis diubah menjadi < dan >. Hal ini disebabkan karena property innerText hanya bisa menerima Text saja, tidak bisa menerima tag HTML.

Kita kembali ke source code, dan kali ini kita coba textContent. Ternyata hasilnya sama. Karena kedua property ini sama-sama hanya menerima teks saja.

Kita coba lagi, kali ini menggunakan innerHTML. Dan ternyata kodenya bekerja seperti yang kita mau ya. Tag li benar-benar diterjemahkan menjadi tag HTML dan berfungsi sebagai daftar.

Jadi kita sudah belajar ya, ketiga property untuk mengubah teks, yaitu innerText, textContent dan innerHTML. Kalau kita ingin fokus hanya ke teksnya saja, maka kita bisa menggunakan property innerText dan textContent. Sedangkan kalau kita mengatur hingga ke tag HTML-nya, maka kita menggunakan innerHTML. Kita akan melanjutkan ke materi DOM Manipulation berikutnya.

Sekarang kita bahas mengenai cara mengubah Style dengan menggunakan Javascript. Sebenarnya hal ini juga sudah pernah kita bahas sebelumnya ya, pada saat kita hendak mengubah warna suatu element. Namun kali ini kita akan bahas secara lebih dalam.

Kita coba di console terlebih dahulu ya. Misalkan kita buat konstanta myid untuk mengambil elemen myid. Kemudian kita lihat isi dari property style-nya.

const myid = document.getElementById("myid");
myid.style;

Kita bisa melihat semua property CSS yang bisa kita atur disini. Ada banyak banget ya. Tapi jangan khawatir, kita tidak harus mengetahui semua yang ada disini. Untuk properti-properti penting yang perlu kita ketahui sudah pernah kita pelajari pada video pelajaran CSS. Jadi bagi teman-teman yang ingin review kembali mengenai property CSS bisa membuka kembali videonya.

Ada 2 aturan dasar yang perlu kita ketahui dalam menggunakan Style Javascript ya. Yang pertama adalah property CSS dituliskan dalam format camelCase. Jadi kata pertama dituliskan menggunakan huruf kecil, kemudian kita menggunakan huruf besar untuk setiap huruf pertama pada kata kedua dan seterusnya. Sebagai contoh bisa dilihat di bagian font. Pada property yang menggunakan satu kata seperti font, hanya menggunakan huruf kecil semua. Kalau misalnya menggunakan 2 kata seperti font display, maka huruf pertama kata kedua, yaitu huruf d menggunakan huruf besar. Dan contohnya lagi kalau menggunakan 3 kata seperti font feature settings, maka huruf pertama kata kedua huruf F besar, dan huruf pertama kata ketiga menggunakan huruf S besar. Itu adalah aturan dasar yang pertama ya.

Aturan yang keduanya adalah semua nilai property harus kita tuliskan menggunakan tipe data String. Walaupun nilainya berupa angka, kita tetap menuliskannya dalam bentuk string. Jadi kita harus menggunakan tanda kutip untuk semua nilai.

Dan kalau teman-teman perhatikan, semua property pada style disini bernilai string kosong ya. Jadinya seolah-olah judul tidak memiliki style sama sekali. Padahal mestinya ada ya. Setidaknya seharusnya ada pengaturan browser harus menggunakan font apa, ukuran font berapa, menggunakan huruf tebal, dan lain-lain. Namun disini isinya kosong. Mengapa? Karena nilai yang bisa ditangkap oleh Javascript hanyalah nilai dari inline CSS. Masih ingat apa yang dimaksud dengan inline CSS? Kita ulangi sedikit ya.

Misalkan kita ubah warna judul ini menjadi Magenta. Kita tutup dahulu property style. Kemudian kita tuliskan kodenya, seperti yang sudah pernah kita coba beberapa kali ya.

myid.style.color = “Magenta”;

Judul sudah berubah warna menjadi Magenta. Dan kita review kembali element-nya. Disini kita mendapatkan elemen h1 ternyata sudah berubah karena sudah ada attribute style yang isinya color: magenta. Inilah yang dimaksud dengan inline CSS. Kita menuliskan kode CSS di dalam tag dengan menggunakan attribute style. Inline CSS ini adalah cara yang paling tidak disarankan untuk pengaturan style, karena kodenya secara spesifik hanya bekerja pada element yang sedang kita tunjuk. Kalau misalkan kita memiliki elemen h1 di tempat lain, maka h1 di tempat lain tersebut tidak turut berubah. Untuk mengubahnya, kita harus menulis ulang kode Javascript untuk elemen h1 lainnya.

Sekarang kita coba ubah style lain ya. Misalkan warna latar belakangnya. Kita ketik kodenya yaitu myid.style. Ingat kembali ya. Kalau pada kode CSS, kita menuliskannya sebagai background-color. Sedangkan pada Javascript, kita harus menuliskannya secara camelCase, yaitu backgroundColor. Misalkan kita ubah nilainya menjadi, misalkan kita menggunakan kode hexa, “#00FF00”.

myid.style.backgroundColor = "#00FF00";

Kemudian kita tambahkan border ya.

myid.style.border = "5px solid pink";

Tampilan dari judul langsung berubah. Dan kalau kita cek kembali element-nya, maka kita akan mendapatkan bahwa semua kode CSS kita dituliskan pada elemen h1 secara inline CSS.

Kita coba tuliskan kode perubahan style di source code ya. Pertama kita komentari dahulu kode lama kita. Kemudian kita tambahkan kode baru. Misalkan kita hendak mengubah warna dari semua elemen li menjadi magenta. Nah, bagi teman-teman yang sudah menonton video sebelumnya tentunya sudah tau bagaimana caranya ya. Silahkan pause terlebih dahulu video ini, dan coba kerjakan di komputer masing-masing.

Kita ketik kodenya. Kita gunakan loop for of. Pertama kita buat dahulu konstanta elemen, yang diambil dari document.getElementsByTagName(“li”). Di dalam loop, kita ganti style.color menjadi “magenta”.

for(const element of document.getElementsByTagName("li"))
{
  element.style.color = "Magenta";
}

Kita simpan dan refresh browser. Sekarang semua elemen li telah berubah warna menjadi magenta ya. Kalau kita hendak mengubah style lainnya, tinggal kita tambahkan kode di dalam loop. Misalkan kita mau mengubah warna background menjadi lime. Terus kita tambahkan juga border dengan nilai “3px solid pink”.

Kita simpan dan refresh browser. Dan sekarang semua li telah menggunakan warna latar belakang lime dan memiliki border pink. Dan kalau kita lihat ke bagian elements, maka semua tag li mengandung inline css.

Jadi kita telah belajar cara mengubah CSS dengan menggunakan style pada Javascript. Khusus materi kali ini, kita hanya belajar untuk sekedar tau saja, bukan untuk digunakan dalam coding kita. Cara mengubah style seperti ini adalah cara yang tidak disarankan. Alasan pertamanya adalah karena Javascript mengubah style dengan menggunakan inline CSS, dan kita sudah belajar bahwa inline adalah cara yang paling jelek untuk menuliskan CSS. Sedangkan alasan keduanya adalah karena kita mesti menuliskan kode CSS di dalam Javascript. Jadi kalau kita lihat kembali, ketiga kode di dalam loop ini adalah kode CSS. Kode ini seharusnya kita tulis di dalam style.css, bukan di dalam dom.js.

Kita lihat cara penulisan yang benarnya ya. Pertama kita ubah dahulu kode Javascript menjadi komentar. Lalu kita ke kode CSS. Kita tambahkan selector kelas, misalkan nama kelasnya adalah color-magenta. Di dalamnya kita tuliskan properti-properti yang hendak kita ubah, seperti color: magenta; background-color: lime; border: 3px solid pink;. Kita simpan.

Lalu kita ke kode HTML. Untuk setiap elemen yang hendak kita warnai, kita tinggal tambahkan attribute class=”color-magenta”. Misalkan kita tambahkan di elemen h1. Lalu kita coba di salah satu elemen li ya. Kita simpan dan refresh browser. Dan elemen-elemen yang kita tunjuk pun sudah berubah warna menjadi magenta.

Ini adalah cara yang disarankan ya. Jadi kita tetap menuliskan kode CSS di dalam file .css. Untuk menggunakan style-nya, kita hanya perlu menambah atau mengurangi class pada element HTML. Dan apabila kita perlu melakukan hal ini secara dinamis menggunakan Javascript, maka kita bisa menggunakan classList. Nanti kita akan pelajari lebih detil mengenai classList di bagian akhir dari video ini. Sebelumnya, kita akan melanjutkan dahulu materi pelajaran ke cara merubah attribute.

Kita ulangi sebentar mengenai attribute. Kita buka kembali kode HTML ya. Kita lihat ke salah satu tag yang panjang. Misalkan tag link ini ya. Nah kata pertama di dalam tag, yaitu kata link, pada Javascript disebut dengan tagName. Sedangkan semua bagian di belakang tagName, inilah yang kita sebut dengan attribute. Jadi disini ada attribute rel dan href, lengkap dengan nilai yang diisikan pada attribute tersebut. Nantinya attribute inilah yang akan kita manipulasi dengan menggunakan Javascript.

Ada beberapa method yang sering digunakan yang berkaitan dengan manipulasi Attribute. Dari nama methodnya, kita bisa menebak apa fungsi dari method tersebut. getAttributeNames berfungsi untuk mengambil attribute apa saja yang dimiliki oleh element, baik itu attribute umum seperti id, name, dan class, ataupun attribute khusus seperti href, src, alt, dan lain-lain. Nilai yang dikembalikan adalah array. getAttribute berfungsi untuk mengambil nilai dari attribute. setAttribute berfungsi untuk menyimpan nilai ke dalam attribute. Sedangkan removeAttribute berfungsi untuk menghapus attribute.

Kita coba dulu di console ya. Kita ambil elemen h1, dengan id myid. Pertama kita buat konstanta element, yang nilainya diambil dari document.getElementById(“myid”). Kemudian kita coba panggil method getAttributeNames.

const element = document.getElementById("myid");
element.getAttributeNames();

Kita mendapatkan array yang isinya adalah “id” dan “class”. Kalau kita lihat lagi di elements, kita bisa melihat bahwa h1 memiliki attribute id dan class.

Kemudian kita coba ambil nilai yang disimpan di dalam id. Kita gunakan method getAttribute(“id”). Maka kita mendapatkan nilainya yaitu “myid”.

Kalau kita coba hapus id-nya, kita bisa gunakan method removeAttribute(“id”). Kita lihat ke Elements, dan sekarang h1 sudah tidak memiliki attribute id. Teman-teman mesti berhati-hati ya, kalau kita menghapus id element, artinya getElementById(“myid”) sudah tidak bisa menemukan element tersebut lagi. Kita coba ya. Dan sekarang getElementById mengembalikan null.

Untungnya pada kode kita, element telah kita simpan menjadi konstanta. Jadi kita masih bisa mengakses element tersebut. Kita masukkan kembali nilai id-nya, namun kali ini kita beri nilai judul.

element.setAttribute("id", "judul");

Kita lihat hasilnya, sekarang h1 memiliki id judul. Dan kalau kita menjalankan getElementById(“myid”), tetap mendapatkan nilai null ya. Karena id-nya sudah berubah menjadi judul. Untuk mengambil element tersebut, kita harus menggunakan getElementById(“judul”);

Sekarang kita ke source code. Kita akan mencoba untuk mengambil attribute dari element img. Pertama kita buat dahulu konstanta img yang nilainya diambil dari document.querySelector(“img”). Kemudian kita panggil method getAttributeNames. Berhubung hasilnya adalah array, artinya kita bisa panggil method forEach ya. Kita beri parameter name. Dan didalamnya kita tampilkan nilai name ke console.

const img = document.querySelector("img");
img.getAttributeNames().forEach(name =>
  console.log(name)
);

Kita mendapatkan hasil src dan alt. Kalau kita lihat ke kode HTML-nya, kita melihat element img memiliki attribute src dan alt. Kita ubah lagi kodenya, kita ingin menampilkan juga nilai attributenya. Jadi pada console.log, kita tambahkan “: “, lalu kita tambahkan lagi dengan img.getAttribute(name). Dan sekarang kita sudah bisa melihat attribute dan nilainya.

console.log(name + ": " + img.getAttribute(name))

Sebagai alternatif dari method getAttribute dan setAttribute, kita bisa langsung menyebutkan nama attribute sebagai property dari element. Kita coba di console ya. Pertama kita buat dahulu konstanta element, yang nilainya diambil dari document.getElementById(“myid”). Misalkan kita ingin mengambil nilai id-nya ya. Kita bisa gunakan method element.getAttribute(“id”). Sebagai alternatif, kita bisa mengambil nilainya dengan kode element.id. Kita mendapatkan hasil yang sama.

Property ini juga bisa kita gunakan untuk memberikan nilai baru ke attribute id. Kalau tadinya kita menggunakan method setAttribute, sebagai alternatifnya kita bisa mengetikkan kode seperti ini:

element.id = "judul";

Dan kalau kita cek di bagian Elements, sekarang id pada h1 sudah berubah menjadi judul.

Yang menariknya lagi disini adalah, berhubung class adalah attribute, maka kita bisa mengubah style dari judul dengan cara mengubah attribute-nya. Sebagai contoh, misalkan kita ubah attribute class-nya menjadi “display-none”. Khusus untuk attribute class, kita tidak bisa mengaksesnya sebagai property class ya, karena ada property classList yang secara khusus mengatur nilai attribute class. Namun kita tetap bisa menggunakan method setAttribute. Kita coba ketik kodenya:

element.setAttribute("class", "display-none");

Dan sekarang judul pun sudah menghilang, karena nilai class-nya berubah menjadi display-none. Kita sudah melihat bahwa method setAttribute bisa kita gunakan untuk mengubah style dari element dengan cara mengganti nilai class-nya. Namun dalam penggunaannya masih kurang begitu enak ya, karena pada saat kita mengganti nilainya menjadi display-none, maka secara otomatis nilai sebelumnya color-magenta menjadi hilang. Kalau element yang kita atur menggunakan banyak kelas sekaligus, kita akan repot untuk mengatur kelasnya.

Oleh karena itulah ada property yang namanya classList. Dengan menggunakan classList, kita akan lebih mudah dalam pengaturan kelas, baik untuk melihat kelas apa saja yang ada, menambah ataupun mengurangi kelas, dan lain-lain. Mari kita lihat apa saja isi dari classList.

Ini adalah daftar method yang sering digunakan dari classList. Dan seperti biasa, dari namanya saja kita sudah bisa mengira-ngira method ini fungsinya untuk apa. Method add() berfungsi untuk menambahkan kelas baru. Method remove() untuk menghapus kelas. Method contains() untuk memeriksa apakah kelas sudah ada di dalam attribute. Method replace() untuk mengganti suatu kelas menjadi kelas lain. Dan method toggle() ini yang spesial ya. Apabila kelas tersebut masih belum ada di attribute, maka method toggle() akan menambahkan kelas tersebut. Namun bila ternyata kelas sudah ada di dalam attribute, maka method toggle() akan menghilangkan kelas tersebut. Jadi cara kerja method ini cukup unik. Mari kita coba.

Kita kembali ke source code. Sebelum melanjutkan, kita ubah dulu kode CSS kita. Disini kelas color-magenta langsung mengganti nilai dari 3 properti. Akan kita pisahkan menjadi 3 kelas ya. Jadi masing-masing kelas hanya mengganti nilai dari 1 properti. Pertama kita buat dahulu kelas background. Kita pindahkan property background-color. Kemudian kita buat lagi kelas border, dan kita pindahkan property border. Jadi kita akan bermain dengan banyak kelas.

Kita simpan dan jalankan di browser. Sekarang judul hanya memiliki warna magenta saja ya. Karena kelas color-magenta sudah tidak mengubah warna background dan border. Seperti biasa, kita buat dahulu konstanta element yang isinya diambil dari document.getElementById(“myid”).

Kita coba tambahkan kelas background ya. Kita gunakan method classList.add.

element.classList.add("background");

Sekarang warna background judul sudah berubah. Namun warna magentanya tetap ada ya. Kalau kita cek di elements, sekarang judul memiliki 2 buah kelas, yaitu color-magenta dan background. Jadi kita bisa menambahkan kelas baru, tanpa mengganggu kelas-kelas lain yang sudah ada di dalam attribute. Kalau misalkan kode diatas kita jalankan ulang. Kita cek lagi di elements. Ternyata kelas di dalam judul tidak mengalami perubahan ya. Apabila kelas background sudah ada di dalam attribute, maka method tidak menambahkan kelas baru.

Selanjutnya kita coba hapus kelas background. Kita panggil methodnya:

element.classList.remove("background");

Dan warna background pada judul pun menghilang. Kalau kita ingin memeriksa apakah element sudah memiliki kelas tertentu atau belum, maka kita bisa menggunakan method contains. Kita periksa dahulu apakah element memiliki kelas background? Jawabannya adalah false ya. Kelasnya sudah tidak ada karena barusan kita hapus. Apakah element memiliki kelas color-magenta? Dan jawabannya adalah true.

Selanjutnya kita coba ganti kelas yang sudah ada menjadi kelas lain ya. Kita bisa menggunakan method replace. Method ini memerlukan 2 argument, yang pertama adalah nama kelas yang hendak diganti, disini nama kelasnya adalah color-magenta. Sedangkan argument yang kedua adalah nama kelas baru yang akan dimasukkan ke attribute, kita misalkan kelas border ya. Setelah dijalankan, maka warna magenta pada judul akan hilang, dan diganti menjadi border pink.

Dan yang terakhir adalah method yang cukup unik ya. Apabila kelas pada argument belum ada, maka method menambahkan kelas tersebut. Sedangkan apabila kelasnya sudah ada, maka method menghapus kelas tersebut. Kita coba. Misalkan nama kelasnya color-magenta. Perhatikan pada saat pertama kita menjalankan method tersebut, maka warna judul menjadi magenta. Kemudian kalau kita jalankan lagi kode yang sama, maka warna judul kembali menjadi hitam. Dan begitulah seterusnya.

Oke, kita telah membahas 4 topik yang bisa kita manipulasi dari DOM. Masih ada 1 topik lagi yaitu element, namun berhubung tingkat kesulitannya lebih tinggi dan memerlukan waktu yang cukup lama untuk menerangkan, maka kita akan membahas secara khusus mengenai topik manipulasi element di video mendatang.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.