Apakah perbezaan antara `innerHTML`, `innerText`, `textContent` dan `value` dalam JavaScript?

Menerokai Nuansa innerHTML, innerTeks dan nilai

Apabila bekerja dengan elemen dalam JavaScript, adalah penting untuk memahami perbezaan antara innerHTML, innerTeks, dan sifat nilai. Setiap satu mempunyai tujuan tertentu dan mempunyai ciri tersendiri.

innerHTML mewakili kandungan HTML dalam elemen. Ia termasuk semua elemen kanak-kanak, teks dan sebarang penanda HTML. Ia membolehkan kami mengubah suai struktur DOM secara dinamik dengan memasukkan, menggantikan atau mengalih keluar kod HTML. Contohnya:

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

innerText mendapatkan semula atau menetapkan kandungan teks antara teg pembuka dan penutup elemen. Ia sedar gaya dan mengetepikan sebarang teg HTML atau ruang kosong. Ini bermakna ia membentangkan versi "diberikan" teks elemen. Contohnya:

console.log(document.getElementById('element').innerText); // "Rendered text without HTML tags"

textContent menyimpan kandungan teks unsur dan semua keturunannya. Walau bagaimanapun, ia tidak menghiraukan sebarang sintaks atau penggayaan HTML dan menyediakan keseluruhan kandungan teks sebagai rentetan. Ia amat berguna apabila anda mahukan kandungan teks yang lengkap, termasuk teks tersembunyi atau ruang kosong. Contohnya:

console.log(document.getElementById('element').textContent); // "Complete text content, including whitespace"

nilai berbeza-beza bergantung pada jenis elemen. Untuk elemen input, ia mewakili input pengguna semasa. Untuk elemen terpilih, ia mengembalikan nilai pilihan yang dipilih. Untuk elemen yang tidak menentukan sifat nilai, ia biasanya mengembalikan null. Contohnya:

console.log(document.getElementById('input').value); // "User-entered value"

Untuk menggambarkan perbezaan antara sifat ini, pertimbangkan coretan HTML berikut:

<div>

Menjalankan kod JavaScript berikut:

console.log(document.getElementById('test').innerHTML);
console.log(document.getElementById('test').innerText);
console.log(document.getElementById('test').textContent);

akan menghasilkan output berikut:

"
Warning: This element contains <code>code</code> and <strong>strong language</strong>.
"
"Warning: This element contains code and strong language."
"
Warning: This element contains code and strong language.
"

Atas ialah kandungan terperinci Apakah perbezaan antara `innerHTML`, `innerText`, `textContent` dan `value` dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!