js kaedah html

JavaScript dan HTML ialah dua komponen penting untuk mana-mana halaman web moden. HTML ialah pembinaan dan perwakilan struktur dan kandungan halaman web, manakala JavaScript ialah bahasa pengaturcaraan untuk interaktiviti dan dinamik. Apabila membangunkan halaman web, menguasai HTML dan JavaScript adalah satu kemestian. Dalam artikel ini, kita akan membincangkan beberapa kaedah JavaScript dan HTML biasa.

1. Kaedah HTML

1. innerHTML

innerHTML ialah atribut elemen HTML, yang membolehkan kami memasukkan kandungan HTML ke dalam elemen yang ditentukan. Sebagai contoh, jika kita ingin memasukkan sekeping teks dalam elemen dengan id "contoh", kita boleh menggunakan kod berikut:

document.getElementById("example").innerHTML = "这是一段文字";

2. appendChild

The kaedah appendChild membolehkan kami Menambah elemen anak pada elemen HTML. Sebagai contoh, jika kita ingin menambah perenggan pada elemen dengan id "contoh", kita boleh menggunakan kod berikut:

var p = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
p.appendChild(node);

var element = document.getElementById("example");
element.appendChild(p);

Dalam contoh ini, kita mula-mula mencipta elemen

kepadanya Tambah nod teks. Seterusnya, kami mencari elemen dengan id "contoh" dan menambah perenggan baharu yang kami buat padanya menggunakan kaedah appendChild.

3. setAttribute

Kaedah setAttribute membenarkan kami menambah atribut pada elemen HTML. Sebagai contoh, jika kita ingin menambah atribut kelas pada elemen dengan id "contoh", kita boleh menggunakan kod berikut:

var element = document.getElementById("example");
element.setAttribute("class", "new-class");

Dalam contoh ini, kita mula-mula mencari elemen dengan id "contoh" dan kemudian Gunakan kaedah setAttribute untuk menambah atribut kelas kepadanya. Nilai atribut ini ialah "kelas baharu".

2. Kaedah JavaScript

1. getElementById

Kaedah getElementById membolehkan kami mencari dan memilih elemen melalui atribut idnya. Sebagai contoh, jika kita ingin memilih elemen dengan id "contoh" dan menukar kandungannya kepada "Ini kandungan baharu", kita boleh menggunakan kod berikut:

document.getElementById("example").innerHTML = "这是新的内容";

2. querySelector

kaedah querySelector membolehkan kami memilih dan memilih elemen melalui pemilih CSS. Sebagai contoh, jika kita ingin memilih elemen perenggan pertama dengan kelas "contoh" dan menukar kandungannya kepada "Ini kandungan baharu", kita boleh menggunakan kod berikut:

document.querySelector("p.example").innerHTML = "这是新的内容";

Dalam contoh ini, Kami menggunakan kaedah querySelector untuk memilih elemen perenggan pertama dengan kelas "contoh" dan menggunakan atribut innerHTML untuk menukar kandungannya kepada "Ini adalah kandungan baharu".

3. addEventListener

Kaedah addEventListener membolehkan kami menambah pendengar acara untuk acara tertentu. Contohnya, jika kami ingin menambah pendengar acara klik untuk elemen dengan id "contoh", kami boleh menggunakan kod berikut:

document.getElementById("example").addEventListener("click", function(){
  alert("您单击了'example'元素！");
});

Dalam contoh ini, kami menggunakan kaedah addEventListener untuk menambah acara klik pendengar pendengar. Apabila pengguna mengklik pada elemen dengan id "contoh", kotak amaran akan muncul.

Kesimpulan

Dalam artikel ini, kami membincangkan beberapa kaedah JavaScript dan HTML biasa. Kaedah ini sangat penting untuk membangunkan halaman web dan merupakan asas untuk membina antara muka pengguna yang interaktif dan dinamik. Jika anda ingin menjadi lebih mahir dalam menggunakan kaedah ini semasa menulis halaman web, kami mengesyorkan mempelajari asas JavaScript dan HTML terlebih dahulu, dan meluangkan sedikit masa membaca dokumentasi dan mempraktikkan penggunaan kaedah ini.

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