Perjalanan Reaksi Saya: Hari 5

Hari ini, saya menceburi dunia Manipulasi DOM, satu konsep asas dalam pembangunan web. Model Objek Dokumen (DOM) ialah jambatan antara HTML dan JavaScript, membolehkan kami berinteraksi secara dinamik dan mengubah suai halaman web. Inilah yang saya pelajari:

Apakah Manipulasi DOM?
Manipulasi DOM ialah proses menggunakan JavaScript untuk berinteraksi dengan dan menukar struktur, gaya atau kandungan halaman web.

Mengakses Elemen
Untuk memanipulasi DOM, kita perlu memilih atau mengakses elemen terlebih dahulu. JavaScript menyediakan beberapa kaedah untuk mencapai ini:

getElementById: Memilih elemen mengikut IDnya.

const header = document.getElementById('main-header');
console.log(header); // Logs the element with ID 'main-header'

querySelector: Memilih elemen padanan pertama menggunakan pemilih CSS.

const firstButton = document.querySelector('.btn');
console.log(firstButton); // Logs the first element with class 'btn'

querySelectorAll: Memilih semua elemen padanan sebagai NodeList.

const allButtons = document.querySelectorAll('.btn');
console.log(allButtons); // Logs a list of all elements with class 'btn'

Kaedah Lain:

• getElementsByClassName (memilih elemen mengikut nama kelas).
• getElementsByTagName (memilih elemen mengikut nama teg).

Memanipulasi Elemen
1. Menukar Kandungan
Gunakan sifat innerHTML atau textContent untuk menukar kandungan elemen.

const title = document.getElementById('title');
title.innerHTML = 'Welcome to My React Journey!';
title.textContent = 'Day 5 - DOM Manipulation';

2. Menukar Gaya
Anda boleh dinamik mengemas kini gaya menggunakan sifat gaya.

const button = document.querySelector('.btn');
button.style.backgroundColor = 'blue';
button.style.color = 'white';

3. Menambah/Mengalih Keluar Kelas
Gunakan sifat classList untuk menambah, mengalih keluar atau menogol kelas.

button.classList.add('active');   // Adds 'active' class
button.classList.remove('btn');  // Removes 'btn' class
button.classList.toggle('hidden'); // Toggles 'hidden' class

4. Atribut
Anda boleh ubah suai atribut seperti src, alt, href, dll.

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful scenery');

Pengendalian Acara
Manipulasi DOM sering berjalan seiring dengan acara. Anda boleh mendengar interaksi pengguna seperti klik, penekanan kekunci atau pergerakan tetikus.

Contoh: Menambah Acara Klik

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    alert('Button clicked!');
});

Contoh: Mengemas kini Kandungan pada Input

const input = document.querySelector('#name-input');
input.addEventListener('input', () => {
    const display = document.querySelector('#name-display');
    display.textContent = `Hello, ${input.value}!`;
});

Penciptaan Elemen Dinamik
Anda boleh mencipta dan menambahkan elemen secara dinamik.

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph added dynamically!';
document.body.appendChild(newElement);

Pemikiran Akhir
Manipulasi DOM sangat berkuasa, membolehkan pembangun mencipta halaman web yang interaktif dan dinamik. Ia membentuk asas rangka kerja seperti React, di mana kemas kini DOM dikendalikan dengan lebih cekap menggunakan DOM maya.

Saya teruja untuk melihat bagaimana konsep ini dimainkan semasa saya maju lebih jauh dalam perjalanan React Native saya.

Hari ke-6, saya datang! ?

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!