Metode - metode JavaScript Untuk Manipulasi DOM Part 2

Metode - metode JavaScript Untuk Manipulasi DOM Part 2 - Pada pembahasan artikel sebelumnya telah dibahas mengenai Metode - metode JavaScript Untuk Manipulasi DOM, namun masih banyak metode yang belum saya bahas semua. Nah, kali ini saya akan melanjutkan metode - metode javascript yang lain nya yang bisa kalian gunakan untuk memanipulasi DOM. Langsung saja simak lanjutan pembahasan Metode - metode JavaScript Untuk Manipulasi DOM berikut ini.

4. removeEventListener() 

removeEventListener() merupakan metode untuk menghapus suatu event handler yang sebelumnya ditambahkan pada metode addEventListener(). 

Contoh Kode 
Berikut ini adalah contoh penggunaan kode removeEventListener().

<button>Click !</button> 
var btn = document.querySelector('button'); 
btn.removeEventListener('click',remove); 

5. createElement() 

createElement() merupakan metode untuk membuat elemen HTML baru menggunakan nama tag HTML yang akan dibuat, seperti 'span', 'p' atau yang lainnya. Pada praktek nya nanti kalian bisa aplikasikan untuk menambahkan elemen ke dalam halaman web dengan bantuan metode AppendChild().

Contoh Kode 
Perhatikan berikut, kalian dapat membuat elemen paragraf baru seperti berikut.

var paragraf = document.createElement('p') 
var title = document.createElement('h1') 

6. appendChild() 

appendChild() adalah metode yang bisa kita gunakan untuk menambahkan elemen sebagai anak (child) yang terakhir terhadap elemen HTML yang memanggil metode ini. Elemen child yang akan dimasukkan bisa berupa elemen yang baru dibuat, atau pun elemen yang sudah ada.

Contoh Kode 
Pada contoh ini, kita sisipkan elemen <h1> sebagai anak (child) dari elemen <div> menggunakan appendChild() dan metode createElement() yang telah dibahas di atas. 

<div></div> 
var div = document.querySelector('div'); 
var h1 = document.createElement('h1'); 
h1.textContent = 'Hay'; 
div.appendChild(h1);

7. removeChild() 

Metode removeChild() adalah metode untuk menghapus elemen child tertentu dari sebuah elemen HTML. 

Contoh Kode 
Perhatikan contoh berikut ini, kita akan menghapus elemen <h1> yang kami telah di tambahkan sebagai di dalam tag <div>.

div.removeChild(h1); 

8. replaceChild()
 
Metode replaceChild() merupakan metode untuk menggantikan elemen child dengan elemen yang lain milik elemen induk yang memanggil metode ini. 

Contoh Kode 
Dalam contoh ini elemen child <h1> milik elemen induk <div> diganti dengan tag <em> yang baru dibuat. 

<div> 
  <h1>hello</h1> 
</div> 
var em = document.createElement('em'); 
var h1 = document.querySelector('h1'); 
var div = document.querySelector('div'); 
em.textContent = 'hi'; 
div.replaceChild(em, h1); 

Baik, saya cukup kan pembahasan javascript tentang Metode - metode JavaScript Untuk Manipulasi DOM sampai disini. Pada pembahasan berikut nya akan saya jelaskan metode - metode yang lain dari javascript yang bisa kalian gunakan untuk memanipulasi DOM. Semoga bermanfaat dan sampai jumpa di artikel berikut nya :)

7 Mei 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat