javascript DOM : dom manipulation

javascript DOM : dom manipulation

Dalam seri manipulasi kali ini akan ada 2 bagian DOM manipulation methode 

1.manipulation element

2.manipulation node

1.manipulasi element

•element.innerHtml

•element.style.<property>

•element.setAttribute()

•element.classlist

•dan masih banyak lagi....

1.contoh innerHtml

const jdl = document.getElementById('judul');

jdl.innerHtml = 'gimas nur alamsah';

atau bisa juga memasukan atau ngoding html atau fragment didalam innerHtml ya 

Misal

jdl.innerHtml = '<em>gimasn</em>

2.contoh element.style

const h1 = document.querySelector('h1');

h1.style.color = 'skyblue'

Misal jiga property nya lebih dari satu kata misal background color hurup pertama dari kata kedua nya harus hurup besar misal 

h1.style.backgroundColor = 'skyblue'

3.settAttribute()

Kita bisa menambahkan attribute dengan set attribute atau kita bisa mengelola attribute itu dengan 

element.settAttribute()

element.getAttribute()

element.removeAttribute()

Apa attribute itu? Attribute adalah sesuatu yang menempel pada element html misal Id class 

contoh settAtribute 

const j = document.getElementById('j');

j.setAtribute('class','container');

Nah kalau kita mau tau isi dari sebuah attribute kita bisa pake get attribute

contoh getAttribute

j.getAttribute('id')

Maka dia akan menampilkan isi dari id

Jika kita ingin menghapus suatu attribute dengan javascript tanpa langsung ke source html nya kita bisa menggunakan removeAttribute

contoh removeAttribute

j.removeAttribute('id')

maka attribute id akan di hapus 

4.element.classlist()

Dengan classlist kita bisa memanipulasi class Ada banyak yang bisa kita lakukan terhadap class 

•element.classlist.add()

Untuk menambahkan class

•element.classlist.remove()

Untuk menghapus class

•element.classlist.toggle()

yang satu ini cara kerja nya unik ,kalau misalkan sebuah element ITU tidak punya class tertentu maka dia akan menambahkan ,sebaliknya jiga sebuah element ITU mempunyai class tertentu maka dia akan menghapusnya

•element.classlist.item()

Untuk mengetahui sebuah kelas misal didalam element ITU ada 3 kelas nah kelas ke 2 nya ITU apa

•element.classlist.contains()

kita ngecek dalam sebuah element punya ga kelas tertentu

•element.classlist.replace()

Untuk mengganti class yang ada dengan class yang baru

Contoh 

const h1 = document.querySelector('h1');

h1.classlist.toggle('.judul');

Silahkan kalian coba satu persatu

2.manipulasi node

Manipulasi node ini memungkinkan kita untuk menambahkan node baru misalkan element baru pada dom atau menghapus element pada dom dan bahkan mengganti element pada dom

Untuk memanipulasi node ini Javascript memiliki beberapa methode

•document.createElement()

Kita membuat element nya

•document.createTextNode()

Untuk isi dari element tersebut

Dan terakhir kita simpen di mana ada beberapa hal ni mau appendChild atau insert before

•node.appendChild()

•node.insertBefore()

•parentNode.removeChild()

•parentNode.replaceChild()

•dan masih banyak lagi

Contoh pembuatan nya

const con = document.getElementById('container')

Const Hbaru = document.createElement('h1');

const isi = document.createTextNode('ini judul baru');

Hbaru.appendChild(isi)

con.appendChild(Hbaru)

Bagaimana kalau kita sekarang pake insert before kan kalau memakai appenChild ITU kita simpan ke akhir dari sebuah element parent

const LIbaru = document.createElement('li');

const isi = document.createTextNode('ini list baru');

LIbaru.appendChild(isi)

const ul = document.querySelector('.container#b ul');

const li2 = ul.querySelector('li:nth-child(2)');

ul.insertBefore(LIbaru, li2);

Contoh remove child

const link = document.getElementsByTagName('a')[0];

con.removeChild(link);

Contoh replace child

const sectionb = document.getElementById('b')

const p4 = sectionb.querySelector('p')

const h2 = document.createElement('h2')

const text = document.createTextNode('judul baru');

h2.appendChild(text)

sectionb.replaceChild(h2,p4)

Sebenernya kasih banyak lagi methode nya kalian bisa kunjungi website w3school untuk melihat lihat methode lainnya mungkin ITU penjelasan tentang dom manipulation terima kasih telah membaca