Memanipulasi HTML dengan JavaScript: Panduan Komprehensif

Dalam bidang pembangunan web, HTML membentuk rangka halaman web, manakala JavaScript menghidupkannya. Memahami cara untuk mendedahkan dan memanipulasi maklumat HTML menggunakan JavaScript adalah penting untuk mencipta aplikasi web yang dinamik dan interaktif. Artikel ini menyelidiki teknik teras untuk mengakses dan mengubah suai kandungan HTML dengan JavaScript.

1. Mengakses Elemen HTML

Menggunakan getElementById

Salah satu cara paling mudah untuk mengakses elemen HTML ialah dengan menggunakan atribut idnya. Kaedah document.getElementById mengembalikan elemen yang mempunyai atribut ID dengan nilai yang ditentukan.

let element = document.getElementById('myElement');

Menggunakan getElementsByClassName

Untuk mengakses berbilang elemen dengan nama kelas yang sama, document.getElementsByClassName digunakan. Kaedah ini mengembalikan HTMLKoleksi elemen secara langsung.

let elements = document.getElementsByClassName('myClass');

Menggunakan getElementsByTagName

Untuk mengakses elemen mengikut nama tegnya, document.getElementsByTagName boleh digunakan. Kaedah ini mengembalikan HTMLKoleksi elemen secara langsung dengan nama teg yang diberikan.

let paragraphs = document.getElementsByTagName('p');

Menggunakan querySelector dan querySelectorAll

Untuk pilihan yang lebih kompleks, querySelector dan querySelectorAll menawarkan penyelesaian yang berkuasa. querySelector mengembalikan elemen pertama yang sepadan dengan pemilih CSS yang ditentukan, manakala querySelectorAll mengembalikan semua elemen yang sepadan.

let firstElement = document.querySelector('.myClass');
let allElements = document.querySelectorAll('.myClass');

2. Memanipulasi Kandungan HTML

Menukar HTML Dalaman

Sifat innerHTML membolehkan anda mendapatkan atau menetapkan kandungan HTML di dalam elemen. Ini berguna untuk mengemas kini kandungan halaman web secara dinamik.

let element = document.getElementById('myElement');
element.innerHTML = '<p>New content</p>';

Menukar Teks Dalaman

Untuk mengubah suai kandungan teks elemen sahaja, gunakan sifat innerText atau textContent. Tidak seperti innerHTML, sifat ini tidak menghuraikan teg HTML.

let element = document.getElementById('myElement');
element.innerText = 'New text content';

Mengubahsuai Atribut

Anda boleh menukar atribut elemen menggunakan kaedah setAttribute atau dengan mengakses terus sifat atribut.

let element = document.getElementById('myElement');
element.setAttribute('src', 'newImage.jpg');

// Or directly
element.src = 'newImage.jpg';

Menambah dan Mengalih Keluar Kelas

JavaScript menyediakan sifat classList untuk menambah, mengalih keluar dan menogol kelas pada elemen. Ini amat berguna untuk memanipulasi gaya CSS secara dinamik.

let element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('toggleClass');

3. Mencipta dan Mengeluarkan Elemen

Mencipta Elemen Baharu

Kaedah document.createElement digunakan untuk mencipta elemen HTML baharu. Selepas mencipta elemen, anda boleh menambahkannya pada DOM menggunakan kaedah seperti appendChild atau insertBefore.

let newElement = document.createElement('div');
newElement.innerHTML = 'I am a new element';
document.body.appendChild(newElement);

Mengeluarkan Elemen

Untuk mengalih keluar elemen, gunakan kaedah removeChild. Mula-mula, akses nod induk elemen yang ingin anda alih keluar, kemudian panggil removeChild padanya.

let parent = document.getElementById('parentElement');
let child = document.getElementById('childElement');
parent.removeChild(child);

Menggantikan Elemen

Kaedah replaceChild membolehkan anda menggantikan nod anak sedia ada dengan nod baharu.

let parent = document.getElementById('parentElement');
let oldChild = document.getElementById('oldChild');
let newChild = document.createElement('div');
newChild.innerHTML = 'I am a new child';
parent.replaceChild(newChild, oldChild);

4. Pengendalian Acara

Menambah Pendengar Acara

Pendengar acara membolehkan anda menjalankan kod JavaScript sebagai tindak balas kepada interaksi pengguna. Kaedah addEventListener ialah cara pilihan untuk menambah acara kerana ia membenarkan berbilang acara daripada jenis yang sama ditambahkan pada elemen.

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

Mengalih keluar Pendengar Acara

Anda juga boleh mengalih keluar pendengar acara menggunakan kaedah removeEventListener. Ini memerlukan anda merujuk fungsi tepat yang digunakan semasa penciptaan pendengar acara.

function handleClick() {
    alert('Button clicked!');
}

let button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

// Later on...
button.removeEventListener('click', handleClick);

5. Bekerja dengan Borang

Mengakses Nilai Borang

Untuk mengakses nilai unsur bentuk, gunakan sifat nilai. Ini berguna untuk membaca input pengguna.

let input = document.getElementById('myInput');
let inputValue = input.value;

Mengesahkan Borang

JavaScript boleh digunakan untuk mengesahkan input borang sebelum penyerahan. Ini meningkatkan pengalaman pengguna dengan memberikan maklum balas segera.

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    let input = document.getElementById('myInput');
    if (input.value === '') {
        alert('Input cannot be empty');
        event.preventDefault();
    }
});

Kesimpulan

Menguasai seni mendedahkan dan memanipulasi maklumat HTML menggunakan JavaScript membuka dunia kemungkinan untuk mencipta aplikasi web yang dinamik dan interaktif. Dengan memanfaatkan pelbagai kaedah dan sifat yang tersedia dalam JavaScript, anda boleh mengurus dan memanipulasi kandungan dan struktur halaman web anda dengan cekap, memberikan pengalaman pengguna yang kaya dan menarik. Teruskan mencuba dan meneroka untuk menemui lebih banyak cara untuk meningkatkan kemahiran pembangunan web anda!

Atas ialah kandungan terperinci Memanipulasi HTML dengan JavaScript: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!