nodeValue vs innerHTML dan textContent. Bagaimana memilih?

Saya menggunakan js sederhana untuk mengubah teks bagian dalam elemen label, dan saya tidak yakin atas dasar apa saya harus menggunakan innerHTML atau nodeValue atau textContent. Saya tidak perlu membuat simpul baru atau mengubah elemen HTML atau apa pun - cukup ganti teks. Berikut ini contoh kode:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Saya melihat melalui sumber jQuery, dan ia menggunakan nodeValue tepat satu kali tetapi innerHTML dan textContent beberapa kali. Kemudian saya menemukan tes jsperf ini yang menunjukkan firstChild.nodeValue secara signifikan lebih cepat. Setidaknya itulah yang saya artikan.

Jika firstChild.nodeValue jauh lebih cepat, apa masalahnya? Apakah tidak didukung secara luas? Apakah ada masalah lain?

Perbedaan antara textContent / innerText / innerHTML pada MDN.

Dan jawaban Stackoverflow tentang innerText / nodeValue.

Ringkasan

1. innerHTML mem-parsing konten sebagai HTML, sehingga butuh waktu lebih lama.
2. nodeValue menggunakan teks lurus, tidak mem-parsing HTML, dan lebih cepat.
3. textContent menggunakan teks lurus, tidak mem-parsing HTML, dan lebih cepat.
4. innerText Mempertimbangkan gaya. Misalnya, tidak akan mendapatkan teks tersembunyi.

innerTexttidak ada di firefox hingga FireFox 45 menurut caniuse tetapi sekarang didukung di semua browser utama.

.textContentoutput text/plainsementara .innerHTMLoutput text/html.

Contoh cepat:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

output: <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

output: google

Anda dapat melihat dari contoh pertama bahwa output tipe text/plaintidak diuraikan oleh browser dan menghasilkan tampilan konten lengkap. Keluaran dari tipe text/htmlmemberitahu browser untuk menguraikannya sebelum menampilkannya.

MDN innerHTML , MDN textContent , MDN nodeValue

Dua yang saya tahu dan bekerja dengan baik adalah innerHTML dan textContent .

Saya menggunakan textContent ketika saya hanya ingin mengubah teks paragraf atau heading seperti ini:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Jadi, textContent hanya mengubah teks, tetapi tidak mem-parsing HTML, seperti yang dapat kita ketahui dari tag yang terlihat dalam teks biasa pada hasil di sana.

Jika kami ingin mem-parsing HTML, kami menggunakan innerHTML seperti ini:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Jadi, contoh kedua mem-parsing string yang saya tetapkan ke properti innerHTML elemen DOM sebagai HTML.

Ini luar biasa, dan kerentanan keamanan besar:)

(cari XSS jika Anda ingin tahu tentang keamanan untuk ini)

innerText kira-kira adalah apa yang akan Anda dapatkan jika Anda memilih teks dan menyalinnya. Elemen yang tidak dirender tidak ada di innerText.

textContent adalah gabungan dari nilai-nilai semua TextNodes di sub-tree. Apakah diberikan atau tidak.

Berikut ini adalah posting bagus yang merinci perbedaan

innerHTML tidak boleh dimasukkan dalam perbandingan dengan innerText atau textContent, karena ini benar-benar berbeda, dan Anda harus benar-benar tahu mengapa :-) Cari secara terpisah

[Catatan: posting ini lebih tentang berbagi data tertentu yang mungkin membantu seseorang daripada memberi tahu orang lain apa yang harus dilakukan]

Jika seseorang bertanya-tanya apa yang tercepat hari ini: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( untuk pengujian kedua, konten span adalah teks biasa, hasilnya dapat berubah sesuai dengan kontennya)

Sepertinya itu .innerHtmladalah pemenang hebat dalam hal kecepatan murni!

(CATATAN: Saya hanya berbicara tentang kecepatan di sini, Anda mungkin ingin mencari kriteria lain sebelum memilih mana yang akan digunakan!)

Properti Element.innerHTML ke set, atau getkode HTML elemen.

Misalnya: Kami memiliki <h1>tag dan gaya yang kuat dengannya:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Agar getkonten elemen memiliki id sama dengan "myHeader", kami akan melakukan hal yang sama:

var element = document.getElementById("myHeader");
element.innerHTML

Hasil pengembalian:

<strong>My Header</strong> Normal Text`

Untuk "mengatur" konten (nilai) baru untuk elemen ini, kode akan ada di sini:

Element.innerHTML = "My Header My Text";

Jadi properti ini tidak hanya berfungsi dengan teks biasa, tetapi juga ditujukan untuk meneruskan atau menyalin kode HTML.

=> Kita seharusnya tidak menggunakannya.

Namun, banyak programmer (termasuk saya) menggunakan atribut ini untuk menyisipkan teks ke halaman web, dan metode ini membawa risiko potensial:

1. Operasi yang salah: memasukkan setiap teks kadang-kadang hanya menghapus semua kode HTML lain dari elemen yang dimasukkan.
2. Untuk keamanan: Tentu saja, dua contoh di atas benar-benar tidak berbahaya, bahkan jika menggunakan tag masih tidak ada masalah karena standar HTML5 telah mencegah eksekusi baris perintah di dalam tag. ketika dimasukkan ke halaman web melalui atribut innerHTML. Lihat aturan ini di sini .

Karena alasan ini, penggunaan innerHTMLtidak disarankan saat menyisipkan teks biasa, melainkan gunakan textContent. The textContentproperti tidak akan mengerti bahwa kode Anda lulus adalah sintaks HTML, tetapi hanya 100% teks tidak lebih dan tidak kurang.

Hasilnya kembali jika menggunakan textContentdalam contoh di atas:

My Header My Text