Metode - metode JavaScript Untuk Manipulasi DOM Part 3

07/05/2019    Risman Hakim    156     Website

Metode - metode JavaScript Untuk Manipulasi DOM Part 3 - Masih melanjutkan pembahasan javascript tentang Metode - metode JavaScript Untuk Manipulasi DOM HTML sebelum nya, kali ini saya akan kasih beberapa metode lagi yang terdapat didalam javascript, metode apa sajakah itu ? langsung saja simak pembahasan selengkapnya berikut ini.

9. cloneNode()

cloneNode() merupakan metode salinan elemen yang telah ada, dengan begitu kita dapat membuat elemen baru yang sama dengan elemen yang telah ada di dalam halaman web.

Contoh Kode
pada contoh berikut, saya membuat salinan untuk elemen <p> dengan metode cloneNode(), kemudian akan di tambahkan dalam tag <div> sebagai elemen turunan dengan menggunakan metode appendChild(). Hal ini mengakibatkan tag <div> akan berisi dua <p> elemen dengan text string halo sebagai isi konten nya.

<div>
  <p>halo</p>
</div>
var paragraf = document.querySelector('p');
var copyParagraf = paragraf.cloneNode(true);
var div = document.querySelector('div');
div.appendChild(copyParagraf);

10. insertBefore()

insertBefore() adalah metode javascript yang berfungsi untuk menambahkan elemen child yang telah ditentukan sebelum elemen child lain. Dimana metode ini akan dipanggil oleh elemen parent. Apabila elemen child tidak ada atau tidak di set maka elemen child yang disisipkan merupakan child terakhir dari elemen parent, metode ini mirip dengan appendChild().

Contoh Kode
Pada contoh berikut, saya membuat elemen <u> baru dengan isi teks di dalamnya, dan menambahkannya sebelum elemen <h1> di dalam elemen parent <div>.

<div>
  <h1>hello</h1>
</div>
var u = document.createElement('u');
var h1 = document.querySelector('h1');
var div = document.querySelector('div');
u.textContent = 'halo';
div.insertBefore(u, h1);

11. setAttribute()

setAttribute() adalah metode javascript yang bisa kita gunakan untuk menambah atribut baru ke dalam elemen HTML, selain menambah juga bisa memperbarui nilai atribut yang telah ada.

Contoh Kode
Pada contoh berikut, saya akan menambahkan atribut class di dalam elemen <div> dengan menggunakan metode setAttribute(), yang kemudian nilai konten bisa diubah.

<div></div>
var div = document.querySelector('div');
div.setAttribute('class', '')

12. getAttribute()

Selain setAttribute(), ada juga metode getAttribute() yang bisa digunakan untuk mengembalikan atau mengambil nilai dari suatu atribut yang terdapat di dalam elemen tag HTML.

Contoh Kode
Pada contoh ini, saya akan mengambil nilai atribut class yang dimiliki oleh elemen <div> dengan bantuan metode getAttribute ().

<div class="text">halo</div>
var div = document.querySelector('div');
alert(div.getAttribute('class'))

13. removeAttribute()

Selanjutnya ada metode removeAttribute() yang bisa kita gunakan untuk menghapus atribut yang terdapat pada elemen tag HML.

Contoh Kode
Pada contoh berikut, saya akan menghapus atribut yang terdapat  pada elemen <div>. ini akan mengakibatkan, atribut class yang terdapat di dalam elemen div akan terhapus.

<div class="text">halo</div>
var div = document.querySelector('div');
div.removeAttribute('class');

Baik, selesai sudah pembahasan javascript tentang Metode - metode JavaScript Untuk Manipulasi DOM, semoga pembahasan ini bisa menjadi bahan pembelajaran dan referensi buat kalian yang sedang belajar javascript. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya :)

Web Design, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More