js menukar html

Dengan pembangunan berterusan Internet, interaktiviti halaman web menjadi semakin penting, dan JavaScript, sebagai bahasa skrip, dapat merealisasikan interaksi halaman web dengan baik. Antaranya, mengubah suai elemen HTML adalah salah satu fungsi penting dalam JavaScript, yang membolehkan halaman web mencapai kesan interaktif yang lebih kaya.

Kaedah JavaScript untuk mengubah suai elemen HTML

1. getElementById
   getElementById ialah kaedah yang biasa digunakan dalam JavaScript Dengan menetapkan ID kepada elemen, anda boleh mendapatkan maklumat yang perlu diubahsuai melalui kaedah ini. Penggunaan khusus adalah seperti berikut:

var element = document.getElementById("elementID");

Antaranya, elementID ialah ID elemen yang perlu diubah suai.

2. getElementsByClassName
   Kaedah getElementsByClassName adalah serupa dengan getElementById, tetapi berbilang elemen boleh diperoleh dengan menyatakan nama kelas. Penggunaan khusus adalah seperti berikut:

var elements = document.getElementsByClassName("className");

Antaranya, className ialah nama kelas bagi elemen yang perlu diubah suai dan tatasusunan dikembalikan.

3. getElementsByTagName
   Kaedah getElementsByTagName boleh mendapatkan berbilang elemen melalui nama tag elemen Sebagai contoh, anda boleh mendapatkan semua teg

   Penggunaan khusus adalah seperti berikut:

var elements = document.getElementsByTagName("tagName");

Antaranya, tagName ialah nama tag bagi elemen yang perlu diubah suai dan tatasusunan dikembalikan.

4. querySelector
   Kaedah querySelector boleh mendapatkan elemen melalui pemilih CSS Sebagai contoh, anda boleh mendapatkan elemen dengan kelas "contoh" melalui kaedah ini. Penggunaan khusus adalah seperti berikut:

var element = document.querySelector(".example");

Antaranya, ".example" ialah pemilih kelas CSS bagi elemen yang perlu diperoleh, dan hanya elemen padanan pertama dikembalikan.

5. querySelectorAll
   kaedah querySelectorAll adalah serupa dengan querySelector, tetapi boleh mendapatkan semua elemen padanan. Penggunaan khusus adalah seperti berikut:

var elements = document.querySelectorAll(".example");

Antaranya, ".example" ialah pemilih kelas CSS bagi elemen yang perlu diperoleh, dan tatasusunan dikembalikan.

JavaScript mengubah suai atribut dan kandungan elemen HTML

Selepas mendapatkan elemen yang perlu diubah suai, anda boleh mencapai kesan pengubahsuaian dengan menetapkan atribut atau kandungannya. Kaedah khusus adalah seperti berikut:

1. Ubah suai atribut elemen
   Anda boleh mengubah suai atribut elemen HTML melalui atribut JavaScript, seperti mengubah suai atribut src imej, atau atribut href pautan, dsb. Penggunaannya adalah seperti berikut:

element.attribute = value;

Antaranya, atribut ialah nama atribut yang perlu diubah suai, dan nilai ialah nilai baharu bagi atribut tersebut. Contohnya, untuk mengubah suai atribut src imej kepada pautan baharu, anda boleh menulis:

var img = document.getElementById("myImg");
img.src = "newImg.jpg";

2. Ubah suai kandungan elemen
   Anda boleh menggunakan JavaScript untuk mengubah suai kandungan elemen HTML , seperti mengubah suai kandungan teks perenggan atau menukar Kandungan tajuk, dsb. Penggunaannya adalah seperti berikut:

element.innerHTML = newContent;

Antaranya, newContent bermaksud kandungan baharu diperlukan. Contohnya, untuk mengubah suai kandungan teks perenggan, anda boleh menulis seperti ini:

var p = document.querySelector(".example");
p.innerHTML = "这是一个新的文本内容";

JavaScript Mengubah Suai Gaya Elemen HTML

Selain mengubah suai atribut dan kandungan elemen HTML, JavaScript juga boleh mengubah suai gaya elemen Berikan halaman web penampilan yang lebih cantik. Penggunaan khusus adalah seperti berikut:

element.style.property = value;

Antaranya, harta ialah nama atribut gaya CSS yang perlu diubah suai, dan nilai ialah nilai baharu atribut tersebut. Contohnya, untuk mengubah suai warna latar belakang elemen, anda boleh menulis:

var element = document.getElementById("myDiv");
element.style.backgroundColor = "red";

JavaScript mengubah suai kelas elemen HTML

JavaScript juga boleh mengubah suai kelas elemen HTML untuk mencapai kesan gaya yang lebih kaya . Penggunaannya adalah seperti berikut:

element.className = "newClassName";

Antaranya, newClassName ialah nama kelas baharu yang perlu diberikan kepada elemen. Contohnya, menambah kelas baharu pada elemen boleh ditulis seperti ini:

var element = document.querySelector(".example");
element.className = "newClass";

Ringkasan

JavaScript mengubah suai elemen HTML ialah kaedah penting untuk mencapai interaksi halaman web Dengan mendapatkan elemen yang diperlukan untuk diubah suai, anda boleh mencapai Pengubahsuaian atribut elemen, kandungan, gaya dan kelas. Menguasai kaedah ini boleh membolehkan kami mencapai kesan interaktif yang lebih kaya semasa pembangunan web.

Atas ialah kandungan terperinci js menukar html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!