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

Meneroka Perbezaan Antara innerText, innerHTML dan value

Memahami Perbezaan

Dalam JavaScript, atribut innerText, innerHTML, dan nilai menyediakan cara yang berbeza untuk berinteraksi dengan kandungan HTML halaman web. Setiap atribut ini mempunyai kefungsian dan kes penggunaan tersendiri.

innerHTML: HTML Representation

Sifat innerHTML mencerminkan sintaks HTML yang menerangkan turunan sesuatu elemen. Ia menyediakan perwakilan kandungan HTML dalam teg pembuka dan penutup elemen.

innerText: Rendered Text

Sifat innerText menangkap teks yang diberikan dalam elemen. Ia memaparkan kandungan seperti yang dipaparkan pada skrin, dengan mengambil kira gaya yang digunakan dan peraturan ruang putih. Khususnya, innerText:

• Abaikan teg skrip dan helaian gaya CSS
• Memangkas ruang putih dan menambah baris baharu antara elemen
  -Menggunakan peraturan transformasi teks dan ruang putih

Kandungan teks: Mentah Teks

textContent mendapatkan semula kandungan teks nod dan keturunannya. Tidak seperti innerText, ia mengekalkan ruang kosong dan mengabaikan sebarang gaya yang digunakan atau sifat paparan. Ini menghasilkan perwakilan kandungan yang lebih literal.

nilai: Atribut Khusus Unsur

Atribut nilai digunakan terutamanya pada input bentuk, seperti kotak teks dan kotak pilihan. Ia mewakili nilai yang sedang disimpan dalam kawalan. Terutama:

• Untuk elemen input, nilai mengandungi rentetan yang dimasukkan pengguna.
• Untuk elemen terpilih, nilai mengandungi nilai pilihan yang dipilih.

Skrip Contoh untuk Perbandingan

Skrip JavaScript berikut mempamerkan perbezaan antara ini atribut:

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  console.log('[' + property + ']' + value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

Apabila digunakan pada coretan HTML di bawah, skrip mengeluarkan yang berikut dalam konsol:

<div>

Output:

[innerHTML][
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
][/innerHTML]
[innerText]Warning: This element contains code and strong language.[/innerText]
[textContent]
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
[/textContent]
[value]null[/value]

Output ini menunjukkan cara innerText mengembalikan teks yang diberikan, innerHTML perwakilan HTML yang lengkap, textContent teks mentah termasuk ruang putih dan nilai (memandangkan ujian ialah elemen div) adalah batal.

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