Javascript: DOM Document

 Document

Assalamualaikum wr wb. Halo teman-teman gimana kabarnya? semoga sehat selalu dan bisa menjalani aktifitas dengan lancar. Yap, kita kembali lagi berjumpa di materi javascript dom melanjutkan materi sebelumnya. Bagi teman-teman yang belum mengikuti materi sebelumnya, saya sarankan untuk dibaca terlebih dahulu.

 

DOM Document

Seperti pengertian sebelumnya, HTML DOM merupakan sebuah dokumen objek yang merepresentasikan halaman website. Dengan begitu kita dapat mengubah, menghapus dan membuat elemen dan attributnya ataupun value dari tag HTML. Seperti sebelumnya kita menggunakan  innerHTML untuk megisi konten dari tag <p>. Sekarang kita akan mencoba menggunakan method lain untuk mengakses DOM.

Mencari Elemen / Tag HTML

• document.getElementById('nama_id');
• document.getElementsByClassName('nama_class');
• document.getElementsByTagName('nama_tag');

Untuk mencari elemen dengan classname dan tagname sebenarnya hampir mirip. Karena banyak tag bisa menggunakan class yang sama lalu tag pasti akan banyak digunakan. Untuk mengaksesnya, misal teman-teman menggunakan getElementsByTagName untuk mengambil tag <p> yang berada di posisi awal dari sekian banyak p. Misal HTML-nya seperti ini:

HTML

<p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p> <p>Paragraf 4</p>

 Contoh teman-teman memiliki 4 paragraf lalu kita dapat pengakses paragraf pertama berdasarkan nama tag dengan seperti ini:

JS

var p = document.getElementsByTagName('p')[0]; console.log(p);

 Maka dia akan mengembalikan elemen pertama yang asalnya berasal dari HTMLCollection.

 

Mengubah elemen HTML

• elemen.innerHTML = 'teks'
• elemen.attribute = 'value',
• elemen.style.property = 'value' 
  

attribute: contoh jika pada tag <a> kita dapat mengubah atribut src.

property: property css seperti color, font-size dll.

Membuat dan Menghapus elemen HTML

• document.createElement('nama_tag')
• document.removeChild('nama_tag')
• document.appendChild('nama_tag')
• document.replaceChild('tag_baru', 'tag_lama')

 saya akan mengimplementasikan createElement dan appendChild bersama. karena appendChild disini berfungsi untuk menambahkannya kedalam HTML. Percuma kan kalau dibuat tapi tidak digunakan dan ditambahkan.

JS

//Membuat elemen html p var p = document.createElement('p'); p.innerHTML = 'Hello World!'; // masukkan isi konten hello world document.body.appendChild(p); // tambahkan p di akhir body

 Contoh membuat tag <p> lalu masukkan isi teksnya dan tambahkan di akhir body. Hasilnya:

 tag <p> telah dibuat.

Bagaimana kalau menghapus? mudah saja tinggal gunakan removeChild.

// Cari terlebih dahulu induk yang membungkus p tersebut var body = document.getElementsByTagName('body')[0]; body.removeChild(p); // lalu hapus p yang telah tadi dibuat

Pertama kita cari dahulu induk yan membungkusnya. Ingat kan kalau DOM itu membentuk pohon yang bercabang yang saling membungkus tag-tag lainnya. Lalu kita hapus dengan body.removeChild(p); dengan begini kita berhasil menghapus tag tersebut. Hasilnya:

tag <p> telah menghilang.

Mungkin sekian saja untuk materi kali ini, mohon dimaafkan jika ada kesalahan. Wassalamualaikum wr wb.