Articles
Pengenalan ke TypeScript
Manipulasi DOM di TypeScript

Manipulasi DOM di TypeScript

Artikel ini menjelaskan manipulasi DOM di TypeScript.

Anda akan belajar cara memanipulasi elemen DOM, serta cara menambah atau menghapus elemen dari pohon DOM melalui contoh kode.

YouTube Video

Manipulasi DOM di TypeScript

Manipulasi DOM di TypeScript dilakukan dengan cara yang mirip dengan JavaScript, namun TypeScript menyediakan pemeriksaan tipe sehingga operasi menjadi lebih aman. DOM (Document Object Model) adalah model objek yang digunakan untuk memanipulasi dokumen HTML dan XML secara terprogram. Ini memungkinkan Anda untuk mengakses halaman yang ditampilkan di browser, menambah atau menghapus elemen, atau mengubah gaya.

Mari kita perkenalkan metode dasar untuk memanipulasi DOM menggunakan TypeScript.

Mendapatkan Elemen DOM

Gunakan objek document untuk mendapatkan elemen HTML. Metode berikut ini sering digunakan:.

  1. document.getElementById document.getElementById mengambil elemen dengan atribut ID yang ditentukan.`.
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementById mengambil elemen dengan ID yang ditentukan dan memungkinkan Anda mengakses kontennya jika ada.`.
  1. document.querySelector document.querySelector mengambil elemen pertama yang cocok dengan selektor CSS.`.
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelector mengambil elemen pertama yang cocok dengan selektor CSS yang ditentukan dan memungkinkan Anda mengakses kontennya jika ada.`.
  1. document.querySelectorAll document.querySelectorAll mengambil semua elemen yang cocok dengan selektor CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll mengambil semua elemen yang cocok dengan selektor CSS yang ditentukan dan memungkinkan Anda mengakses konten mereka melalui iterasi.`.

Penegasan Tipe Elemen

Di TypeScript, menegaskan tipe elemen secara eksplisit memungkinkan Anda menggunakan metode dan properti yang lebih spesifik.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • Kata kunci as adalah operator asersi tipe di TypeScript, digunakan untuk secara eksplisit memberi tahu kompiler agar memperlakukan sebuah nilai sebagai tipe tertentu.
  • Di TypeScript, Anda dapat menggunakan asersi tipe untuk memperlakukan elemen yang diambil sebagai tipe tertentu dan mengakses properti atau metode khusus untuk tipe tersebut.

Memanipulasi DOM

Manipulasi DOM dilakukan melalui properti-properti elemen. Ini memungkinkan Anda mengontrol perubahan pada teks atau atribut secara fleksibel, menerapkan gaya, dan memperbarui konten yang ditampilkan.

  1. Mengubah Teks pada Elemen

    Anda dapat mengubah teks atau HTML dari sebuah elemen menggunakan textContent atau innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • Anda dapat menggunakan textContent atau innerHTML dari sebuah elemen untuk mengubah teks tampilannya atau konten HTML-nya.

  1. Mengubah Gaya Elemen

    Anda dapat mengubah gaya inline menggunakan properti style dari elemen.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Kode ini mengambil elemen tertentu, mengubah warna teksnya menjadi biru, dan mengatur ukuran font menjadi 20px.

  1. Mengubah Atribut Elemen

    Jika Anda ingin mengubah atribut elemen, gunakan setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Kode ini mengubah atribut href dari elemen tautan pertama di halaman menjadi https://example.com.

  1. Memanipulasi Kelas Elemen

    Untuk menambah atau menghapus kelas elemen, gunakan classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Kode ini menambahkan class active dan menghapus class inactive dari elemen tertentu.

Menambah dan Menghapus Elemen DOM

Anda juga dapat menambahkan elemen baru atau menghapus elemen yang sudah ada. Hal ini memungkinkan perubahan struktur halaman secara dinamis sebagai respons terhadap aksi pengguna atau status aplikasi.

  1. Membuat dan Menambah Elemen Baru

    Gunakan document.createElement untuk membuat elemen baru dan menambahkannya ke DOM.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • Kode ini membuat elemen <div> baru, mengatur teksnya, dan menambahkannya ke <body> halaman.

  1. Menghapus Elemen

    Untuk menghapus sebuah elemen, gunakan metode removeChild atau remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • Kode ini menunjukkan cara menghapus elemen anak tertentu dari induknya dan cara menghapus elemen itu sendiri secara langsung.

Menambah Event

Di TypeScript, Anda dapat menambah pendengar event (event listener) ke elemen untuk melakukan aksi berdasarkan interaksi pengguna.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • Kode ini menambahkan event listener yang menampilkan pesan di konsol ketika tombol diklik.
  • Dengan menggunakan addEventListener, Anda dapat mendengarkan dan menangani berbagai event seperti klik, pergerakan mouse, dan input keyboard.

Poin Penting untuk Manipulasi DOM di TypeScript

Saat memanipulasi DOM dengan TypeScript, memperhatikan definisi tipe elemen dan pemeriksaan null dapat membantu mencegah kesalahan dan memungkinkan Anda menulis kode yang tangguh.

  1. Pemeriksaan Null

    Karena sebuah elemen DOM mungkin tidak ada, disarankan melakukan pemeriksaan null sebelum memanipulasi elemen di TypeScript.

  2. Penegasan Tipe Secara Eksplisit

    Saat mengoperasikan elemen tertentu (misalnya, HTMLInputElement), biasanya digunakan penegasan (as) untuk menentukan tipe dan menggunakan properti spesifik seperti value.

Dengan mengingat hal-hal tersebut, manipulasi DOM menggunakan TypeScript memungkinkan Anda menulis kode yang lebih aman dan terprediksi dengan menggabungkan fleksibilitas JavaScript dan keamanan tipe TypeScript.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Objek window dalam TypeScriptKelas yang Digunakan untuk Manipulasi DOM/Penanganan Acara dalam TypeScript