Bagaimana untuk memberikan nilai kepada nod dalam JavaScript

JavaScript ialah bahasa penting dalam pembangunan web moden dan boleh melaksanakan banyak fungsi, antaranya pengendalian DOM adalah yang paling biasa. Dalam pembangunan sebenar, memberikan nilai kepada nod (iaitu, elemen pada HTML) adalah operasi biasa Berikut akan memperkenalkan secara terperinci cara menetapkan nilai kepada nod dalam JavaScript.

1. Dapatkan nod

Sebelum memberikan nilai kepada nod, anda perlu mendapatkan nod terlebih dahulu. Kaedah yang biasa digunakan untuk mendapatkan nod adalah seperti berikut:

1. Dapatkan nod mengikut ID

Kita boleh mendapatkan nod dengan ID yang ditentukan melalui kaedah getElementById, contohnya:

var node = document.getElementById("id_name");

Antaranya, "id_name" ialah nilai atribut ID bagi elemen HTML.

2. Dapatkan nod mengikut nama teg

Kita boleh mendapatkan semua nod dengan nama teg yang ditentukan melalui kaedah getElementsByTagName, contohnya:

var nodes = document.getElementsByTagName("div");

3. Dapatkan nod mengikut nama kelas

Kita boleh mendapatkan semua nod dengan nama kelas yang ditentukan melalui kaedah getElementsByClassName, contohnya:

var nodes = document.getElementsByClassName("class_name");

di mana "class_name" ialah kelas nilai atribut elemen HTML.

4. Dapatkan nod melalui pemilih CSS

Kita boleh mendapatkan semua nod pertama yang sepadan dengan pemilih CSS melalui kaedah querySelector, contohnya:

var node = document.querySelector("#id_name .class_name");

Antaranya, "#id_name" ialah nilai atribut ID bagi elemen HTML dan ".class_name" ialah nilai atribut kelas bagi elemen tersebut.

2. Berikan nilai kepada nod

Selepas mendapatkan nod, anda boleh menetapkan nilai padanya. Kaedah penugasan biasa adalah seperti berikut:

1. Ubah suai innerHTML nod

Kita boleh menukar kandungan nod dengan mengubah suai atribut innerHTML nod, contohnya :

node.innerHTML = "新的节点内容";

Perlu diambil perhatian bahawa mengubah suai atribut innerHTML akan mengalih keluar semua nod anak dalam nod asal dan menggantikannya dengan kandungan HTML baharu. Jika anda perlu menambah kandungan pada nod dan bukannya menggantikannya, anda boleh menggunakan kaedah appendChild.

2. Ubah suai textContent nod

Kita boleh menukar kandungan teks nod dengan mengubah suai atribut textContent nod, contohnya:

node.textContent = "新的文本内容";

Nota Lebih-lebih lagi, mengubah suai sifat textContent akan mengalih keluar semua nod anak dalam nod asal dan menggantikannya dengan kandungan teks baharu.

3. Ubah suai nilai nod

Untuk elemen bentuk (seperti input, textarea, dll.), kita boleh menukar nilai dengan mengubah suai atribut nilai bagi nod, sebagai contoh:

node.value = "新的表单值";

Perlu diambil perhatian bahawa mengubah suai atribut nilai hanya sah untuk elemen bentuk dan bukan untuk nod lain.

4. Ubah suai nilai atribut nod

Memandangkan elemen HTML boleh mempunyai atribut tersuai, kami boleh mengubah suai nilainya dengan menetapkan atribut nod, contohnya:

node.setAttribute("attr_name", "新的属性值");

Antaranya, "attr_name" ialah nama atribut tersuai, seperti data-xxx. "Nilai atribut baharu" ialah nilai atribut baharu yang perlu ditetapkan.

Perlu diambil perhatian bahawa nod mempunyai banyak atribut untuk ditetapkan, seperti gaya, kelas, dll. Anda boleh menetapkan atribut yang berbeza mengikut keperluan.

Di atas ialah kaedah biasa untuk menetapkan nilai kepada nod dalam JavaScript. Dalam pembangunan sebenar, cara mendapatkan nod dengan cepat dan tepat dan memberikan nilai kepada mereka juga merupakan kemahiran yang sangat penting.

Atas ialah kandungan terperinci Bagaimana untuk memberikan nilai kepada nod dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!