Articles
Pengenalan kepada TypeScript
Manipulasi DOM dalam TypeScript

Manipulasi DOM dalam TypeScript

Artikel ini menerangkan manipulasi DOM dalam TypeScript.

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

YouTube Video

Manipulasi DOM dalam TypeScript

Manipulasi DOM dalam TypeScript dilakukan sama seperti JavaScript, tetapi TypeScript menyediakan pemeriksaan jenis (type checking), menjadikan operasi lebih selamat. DOM (Document Object Model) ialah model objek yang digunakan untuk memanipulasi dokumen HTML dan XML secara pengaturcaraan. Ia membolehkan anda mengakses halaman yang dipaparkan dalam pelayar, menambah atau membuang elemen, atau menukar gaya.

Mari kita perkenalkan kaedah asas untuk memanipulasi DOM menggunakan TypeScript.

Mendapatkan Elemen DOM

Gunakan objek document untuk mendapatkan elemen HTML. Kaedah-kaedah berikut biasa digunakan:.

  1. document.getElementById document.getElementById mendapatkan 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 membolehkan anda mengakses kandungannya jika ia wujud.`.
  1. document.querySelector document.querySelector mengambil elemen pertama yang sepadan dengan penentu 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 sepadan dengan penentu CSS yang ditentukan dan membolehkan anda mengakses kandungannya jika ia wujud.`.
  1. document.querySelectorAll document.querySelectorAll mengambil semua elemen yang sepadan dengan penentu CSS.`.
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAll mengambil semua elemen yang sepadan dengan penentu CSS yang ditentukan dan membolehkan anda mengakses kandungan mereka melalui iterasi.`.

Pengesahan Jenis Elemen

Dalam TypeScript, mengesahkan jenis elemen secara jelas membolehkan anda menggunakan kaedah dan sifat yang lebih khusus.

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 ialah operator penegasan jenis dalam TypeScript, digunakan untuk memberitahu pengkompil secara jelas supaya menganggap satu nilai sebagai jenis tertentu.
  • Dalam TypeScript, anda boleh menggunakan penegasan jenis untuk menganggap elemen yang diambil sebagai jenis tertentu dan mengakses sifat atau kaedah yang khusus untuk jenis tersebut.

Memanipulasi DOM

Manipulasi DOM dilakukan melalui sifat-sifat elemen. Ini membolehkan anda mengawal perubahan teks atau atribut dengan fleksibel, menerapkan gaya, dan mengemas kini kandungan yang dipaparkan.

  1. Menukar Teks Elemen

    Anda boleh menukar teks atau HTML sesuatu 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 boleh menggunakan textContent atau innerHTML pada sesuatu elemen untuk menukar teks atau kandungan HTML yang dipaparkan.

  1. Menukar Gaya Elemen

    Anda boleh mengubah gaya sebaris menggunakan sifat style elemen.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • Kod ini mengambil elemen tertentu, menukar warna teksnya kepada biru, dan menetapkan saiz fon kepada 20px.

  1. Menukar Atribut Elemen

    Jika anda ingin menukar atribut sesuatu elemen, gunakan setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • Kod ini menukar atribut href bagi elemen pautan pertama di halaman kepada https://example.com.

  1. Memanipulasi Kelas Elemen

    Untuk menambah atau membuang kelas elemen, gunakan classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • Kod ini menambah kelas active dan membuang kelas inactive daripada elemen tertentu.

Menambah dan Membuang Elemen DOM

Anda juga boleh menambah elemen baharu atau membuang yang sedia ada. Ini membolehkan anda menukar struktur halaman secara dinamik sebagai tindak balas kepada tindakan pengguna atau keadaan aplikasi.

  1. Mencipta dan Menambah Elemen Baharu

    Gunakan document.createElement untuk mencipta elemen baharu dan menambahkannya ke dalam 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
  • Kod ini mencipta elemen <div> baharu, menetapkan teksnya, dan menambahkannya ke dalam <body> halaman.

  1. Membuang Elemen

    Untuk membuang elemen, gunakan kaedah 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}
  • Kod ini menunjukkan cara membuang elemen anak tertentu dari induknya dan cara membuang elemen itu sendiri secara langsung.

Menambah Acara

Dalam TypeScript, anda boleh menambah pendengar acara pada elemen untuk melaksanakan tindakan 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}
  • Kod ini menambah pendengar acara yang memaparkan mesej dalam konsol apabila butang diklik.
  • Dengan menggunakan addEventListener, anda boleh mendengar dan mengendalikan pelbagai acara seperti klik, pergerakan tetikus, dan input papan kekunci.

Perkara-perkara Penting untuk Manipulasi DOM dalam TypeScript

Apabila memanipulasi DOM dengan TypeScript, memberi perhatian kepada definisi jenis elemen dan semakan null dapat membantu mencegah ralat dan membolehkan anda menulis kod yang kukuh.

  1. Semakan Null

    Kerana elemen DOM mungkin tidak wujud, disyorkan untuk melakukan semakan null sebelum memanipulasi elemen dalam TypeScript.

  2. Pengesahan Jenis Secara Jelas

    Apabila beroperasi pada elemen tertentu (contohnya, HTMLInputElement), adalah biasa untuk menggunakan pengesahan (as) untuk menentukan jenis dan menggunakan sifat khusus elemen seperti value.

Dengan mengambil kira perkara-perkara ini, manipulasi DOM menggunakan TypeScript membolehkan anda menulis kod yang lebih selamat dan boleh diramal dengan menggabungkan fleksibiliti JavaScript dan keselamatan jenis TypeScript.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Objek window dalam TypeScriptKelas Digunakan untuk Manipulasi DOM/Pengendalian Acara dalam TypeScript