Dokumen tersebut membahas tentang manipulasi DOM (Document Object Model) menggunakan Javascript. DOM menyediakan antarmuka untuk manipulasi dokumen HTML, sedangkan Javascript digunakan untuk mengeksekusi perintah manipulasi tersebut. Beberapa cara manipulasi DOM dijelaskan seperti mengakses, membuat, memodifikasi, dan menghapus elemen DOM.

1. BY OKTI WULANDARI
&
AYU ANITA SARI
MANIPULASI DOM

2. Sebagai bahasa yang dibuat untuk membuat dokumen HTML menjadi
interaktif, Javascript memiliki kaitan yang erat dengan DOM. UDOM
menyediakan antarmuka untuk manipulasi dokumen, sementara Javascript
menjadi bahasa yang melakukan eksekusi terhadap antarmuka yang
disediakan.
MANIPULASI DOM

3. 1. Document getElementById, digunakan untuk mengakses elemen
DOM berdasarkan nilai properti id pada elemen .
2. document.getElementsByClassName, seperti namanya digunakan
untuk memanggil seluruh elemen DOM dengan nilai
properti class yang diberikan .
3. Document getElementsByName, mengambil elemen berdasarkan nilai
properti name .
4. document.getElementsByTagName, memilih elemen-elemen
dengan tag HTML tertentu.
AKSESELEMENDOM

4. 5. document.getElementsByTagNameNS, sama
seperti getElementsByTagName, hanya saja fungsi ini melakukan
penyaringan tambahan berdasarkan namespace pada dokumen
XHTML.
6. document.querySelector, mencari elemen DOM pertama yang sesuai
dengan aturan selectorCSS yang diberikan ke fungsi.
7. document.querySelectorAll, sama seperti querySelector, tetapi
mengembalikan semua elemen yang memenuhi aturan (bukan hanya
elemen pertama).

5. dilakukan dengan dua cara, yaitudocument.createElement untuk
pembuatan node, dan document.createTextNode untuk pembuatan teks.
1 .var paragraf = document.createElement("p");
2.var teks = document.createTextNode("Teks yang dibuat secara
dinamis");
MEMBUATELEMENDOM

6. Inti dari pengembangan dokumen HTML yang interaktif adalah
perubahan konten maupun atribut dari DOM.
Untuk mengganti atau menambahkan nilai atribut DOM, kita dapat
menggunakan fungsi kakaknya, yaitu setAttribute.
Fungsi setAttribute menerima dua parameter, yaitu atribut yang ingin
ditambahkan sebagai parameter pertama, dan isi dari atribut tersebut sebagai
parameter kedua.
MODIFIKASIATRIBUT DOM

7. Penghapusan elemen DOM dilakukan dengan sangat sederhana,
hanya melalui satu fungsi saja:removeChild. Prosesnya sederhana:
pilih elemen yang akan dihapus, kemudian panggilremoveChild pada
penampung elemen yang akan dihapus tersebut.
MENGHAPUSELEMENDOM

8. Inti dari pengembangan dokumen HTML yang interaktif adalah
perubahan konten maupun atribut dari DOM.
Untuk mengganti atau menambahkan nilai atribut DOM, kita dapat
menggunakan fungsi kakaknya, yaitu setAttribute.
Fungsi setAttribute menerima dua parameter, yaitu atribut yang ingin
ditambahkan sebagai parameter pertama, dan isi dari atribut tersebut sebagai
parameter kedua.
MODIFIKASIATRIBUT DOM

9. Salah satu cara yang paling sederhana untuk mengganti properti CSS
adalah dengan memanfaatkan atributstyle pada sebuah elemen.
Berikut adalah contoh penggunaan atribut style untuk mengubah properti
CSS dari sebuah elemen:
 var container = document.getElementById("container");
container.style.background = "#D33";
container.style.color = "white";
// jika ingin mengubah nilai background lagi
container.style.background = "#D37";
MENGGANTITAMPILANELEMENDOM

10. TERIMAH KASIH