Wajah menggunakan javascript queryselectorall child

merupakan objek JavaScript spesial yang hanya ada di environment Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya. ”

Pengembangan website atau yang biasa dikenal dengan istilah web development merupakan sebuah proses mulai dari perancangan, pembangunan, dan pengoptimasian sebuah website hingga berjalan sesuai fungsinya. Dalam pengembangannya, developer memerlukan setidaknya dua bahasa markup, yakni HyperText Markup Language (HTML) dan Cascading Style Sheet (CSS). Selain itu, terdapat perkakas lain yang membuat website menjadi interaktif dan dinamis, yaitu JavaScript

Table of Contents Show

💻 Mulai Belajar Pemrogramman
Apa itu MATAHARI?
DOM Mengakses
Menangkap Elemen HTML pada DOM
Membuat dan Menyematkan Elemen Baru
Memanipulasi Elemen Atribut
Elemen Gaya Memanipulasi
Menambahkan Event pada Elements

Nah, kali ini kita akan membahas mengenai salah satu hal guna memanipulasi struktur HTML menggunakan JavaScript, yaitu Teknik Manipulasi DOM. Sebelum itu, kita perlu sesi-sesi dulu dengan DOM

💻 Mulai Belajar Pemrogramman

Belajar pemrogramaman di Dicoding Academy dan mulai perjalanan Anda sebagai pengembang profesional

Daftar Sekarang

Apa itu MATAHARI?

Document Object Model atau disingkat DOM adalah sebuah programming interface (API) untuk web dokumen. DOM merepresentasikan mesikan struktur dan konten dari dokumen web dalam bentuk node dan object supaya kita dapat mengubah struktur, style, dan konten dari dokumen tersebut. Pada dasarnya, DOM merepresentasikan struktur dokumen dalam bentuk pohon (pohon) seperti berikut.

DOM Mengakses

DOM dapat dimanipulasi menggunakan bahasa scripting atau bahasa pemrogramaman, yaitu JavaScript. Kode JavaScript yang dijalankan di lingkungan browser akan memiliki akses terhadap objek dokumen dan window untuk memanipulasi DOM. Dengan demikian, dokumen web dapat terhubung atau berinteraksi dengan script atau bahasa pemrograman.

Beberapa contoh penanganan dokumen HTML di antaranya, seperti membuat, mengubah, atau menghilangkan element. Terdapat dua cara untuk membuat kode script di halaman web, yaitu membuatnya secara inline di element dan memasukkannya di halaman web. Berikut cara mengakses script di dalam elemen dokumen HTML

Pengering inline untuk elemen tertentu

Menghubungkan script dalam element

</kepala>
<tubuh>
</tubuh>
</html>
- Menghubungkan skrip eksternal dengan dokumen HTML
1
2
3
4
5
6
7
8
9
10
<. -- indeks. html -->

<html>
<kepala>
<judul>Skrip External</judul>

</kepala>
<tubuh>
</tubuh>
</html>

1
2
3
4
5
6
7
8
9
//naskah. js

jendela. addEventListener('memuat',() => {
// Membuat beberapa elemen dan menyematkan di dalam halaman web

const judul = dokumen.buatElemen('h1');
const headingText = dokumen.createTextNode('Halo Dunia. ');
judul. appendChild(headingText);
dokumen. tubuh. appendChild(heading);
});
Kedua cara di atas dapat diterapkan untuk mengakses DOM. Namun, inline bukanlah cara yang direkomendasikan karena kami akan menggabungkan kode JavaScript dengan struktur dokumen HTML sehingga lebih memudahkan proses pengembangan (development) atau pemeliharaan (maintenance) proyek yang kompleks
Menangkap Elemen HTML pada DOM
Untuk melakukan penangkapan elemen di halaman web, kita perlu menangkap elemen yang dituju. Langkah ini tidak bisa digunakan dengan teknik inline, melainkan dengan method atau function dari object document . Terdapat beberapa metode yang dapat digunakan dengan menyesuaikan kondisi yang ada. Silakan simak tabel berikut ini.
Bukan
metode
Keterangan
1
getElementById()
Mengembalikan objek yang merepresentasikan elemen yang ditangkap dan properti id-nya cocok dengan tag HTML yang dituju
2
getElementsByClassName()
Mengembalikan HTMLCollection dari seluruh elemen yang memiliki class name sesuai
3
getElementsByTagName()
Mengembalikan HTMLPengumpulan objek dari seluruh elemen dengan nama elemen (tag element) yang sesuai
4
querySelector()
Mengembalikan elemen pertama di dalam dokumen yang cocok dengan spesifik pemilih. Jika tidak, akan mengembalikan nilai null.
5
querySelectorAll()
Mengembalikan kumpulan node (NodeList) di dalam dokumen sesuai dengan pemilih yang spesifik
Membuat dan Menyematkan Elemen Baru
Terkadang kita perlu membuat elemen baru untuk membuat halaman web dinamis. Oleh karena itu, kita perlu memanfaatkan method createElement() dari objek document . Metode ini digunakan untuk membuat elemen baru dengan menyertakan nama tag spesifik yang dituju sebagai parameter.
Setelah elemen baru dibuat, tentu kita tidak ingin konten elemen tersebut kosong. Untuk itu, kita bisa memanfaatkan append() dan appendChild() . Method append() yang menerima argument bertipe Node atau string , sedangkan jika kita ingin menyematkan elemen lain sebagai child dari element tersebut, gunakanlah appendChild() .
Berikut contoh kasus pembuatan dan penyematan elemen baru
1
2
3
4
5
6
7
8
9
10
sebelas
12
13
14
limabelas
<. DOCTYPE html>
<html>
<kepala>
<title>Membuat dan Menyematkan Elemen</title>

</kepala>
<tubuh>
<p>Teks dibawah dibuat kering dinamis. </p>

</tubuh>
</html>
Memanipulasi Elemen Atribut
Suatu elemen yang telah terdaftar dalam DOM Tree terkadang perlu mengutak-atik atribut dari elemen tersebut agar tampilan lebih dinamis. Contohnya seperti mengubah resource dari element agar gambar yang ditampilkan dapat berubah. Untuk mencapai ini, kita memerlukan metode setAttribut() dari objek bertipe Element . Metode ini menerima dua parameter, yaitu nama atribut dan nilai dari atribut itu sendiri.
Berikut contoh implementasi penanganan atribut elemen .
1
2
3
4
5
6
7
8
9
10
sebelas
12
13
<. DOCTYPE html>
<html>
<kepala>
<judul>Elemen Attribute</judul>
</kepala>
<tubuh>
<img src="https://placekitten.com/400/200" alt="Tempat Penampung Gambar"/< /a>>

</tubuh>
</html>
Elemen Gaya Memanipulasi
Selain memanipulasi atribut elemen, kamu juga bisa memanipulasi style elemen untuk mendapatkan tampilan yang dinamis. Untuk melakukan penanganan ini, kita bisa memanfaatkan interface CSSStyleDeclaration . Interface ini merepresentasikan object yang merupakan isi dari blok deklarasi di CSS.
Objek Deklarasi CSSStyle dapat ditangkap menggunakan tiga cara sebagai berikut.
- Melalui gaya properti dari objek HTMLElement .
  Objek Deklarasi CSSStyle ini merepresentasikan style yang diterapkan secara inline. kontur.
  .
- Melalui interface CSSStyleSheet dari properti style yang berada di objek CSSStyleRule .
  Contoh. dokumen. lembar gaya[0]. Aturan css[0]. style akan mengembalikan objek CSSStyleDeclaration pada berkas CSS pertama dan rule CSS pertama.
- Melalui function getComputedStyle() dari objek window .
  Metode ini akan mengembalikan objek yang mengandung nilai-nilai seluruh properti CSS dari elemen tertentu setelah menggunakan CSS yang dituliskan dan menghitung daur ulang dasar dari nilai yang tersedia.
Menambahkan Event pada Elements
Event merupakan hal yang tidak bisa dipisahkan ketika kita ingin membuat halaman website yang interaktif. Event ini adalah kemampuan JavaScript untuk menerima keadaan atau kejadian dari suatu elemen. Event dapat dipicu dengan aksi user, seperti mengeklik tombol mouse, menekan tombol keyboard, dsb. Selain itu, Event juga bisa dipicu secara terprogram, seperti memanggil HTMLElement. click() dari elemen atau mendefinisikan event dan mengirimnya ke target menggunakan method EventTarget. dispatchEvent() .
Untuk menerapkan event handler pada elemen, terdapat interface yang telah diimplementasikan pada interface Node sehingga Node< /a> beserta turunannya ( dokumen , window , HTMLElement , dsb) dapat menerapkan event, yaitu interface EventTarget . Contohnya adalah menerapkan metode addEventListener() . Method ini merupakan salah satu method dari interface EventTarget guna fungsi memasak yang akan dipanggil kapan pun event tersebut dipicu pada elemen target.
Berikut contoh penerapan event pada target event

1
2
3
4
5
6
7
8
9
10
sebelas
12
13
14
limabelas
16
17
18
19
dua puluh
dua puluh satu
22
23
<. DOCTYPE html>
<html>
<kepala>
<judul>Acara</judul>
</kepala>
<tubuh>
<img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/image-assets/dicoding-logo.png" alt="Tempat Penampung Gambar"/>
<br>
<tombol ketik="button">Klik Saya. </tombol>

</tubuh>
</html>
Kesimpulan
Teknik penanganan DOM merupakan teknik yang sangat penting dalam pengembangan situs web untuk meningkatkan interaktivitas dan kedinamisan. Ada banyak cara untuk memanipulasinya, seperti membuat elemen baru, menyisipkan elemen, mengubah atribut, mengubah gaya, menambahkan event, dsb. Pada blog ini, materi yang disampaikan hanyalah permukaannya saja. Untuk memperdalam materi ini, kamu bisa bergabung di kelas Belajar Membuat Web Front-End untuk Pemula dengan di berlangganan Dicoding Academy secara langsung. Selain itu, kamu juga bisa mempelajari kelas lanjutan terkait Front-End Web sehingga keilmuanmu dapat bersaing secara global.
Oke, sampai disini dulu pembahasan terkait teknik pengolahan DOM. Pembahasan apa lagi nih yang ingin kamu dapatkan? . Sampai jumpa di artikel blog berikutnya