nodeValue - innerHTML ve textContent karşılaştırması. Nasıl seçilir?

Bir etiket öğesinin iç metnini değiştirmek için düz js kullanıyorum ve innerHTML veya nodeValue veya textContent'i hangi gerekçelerle kullanmam gerektiğinden emin değildim. Yeni bir düğüm oluşturmama veya HTML öğelerini veya herhangi bir şeyi değiştirmeme gerek yok - sadece metni değiştirin. İşte kodun bir örneği:

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.

JQuery kaynağına baktım ve nodeValue'u tam olarak bir kez kullanıyor, ancak innerHTML ve textContent'i birkaç kez kullanıyor. Sonra, firstChild.nodeValue değerinin önemli ölçüde daha hızlı olduğunu gösteren bu jsperf testini buldum. En azından onu kastettiğim bu.

FirstChild.nodeValue çok daha hızlıysa, yakalama nedir? Yaygın olarak desteklenmiyor mu? Başka bir sorun var mı?

MDN'de textContent / innerText / innerHTML arasındaki farklar.

Ve innerText / nodeValue hakkında bir Stackoverflow yanıtı.

özet

1. innerHTML , içeriği HTML olarak ayrıştırır, bu nedenle daha uzun sürer.
2. nodeValue düz metin kullanır, HTML'yi ayrıştırmaz ve daha hızlıdır.
3. textContent düz metin kullanır, HTML'yi ayrıştırmaz ve daha hızlıdır.
4. innerText Stilleri dikkate alır. Örneğin gizli metin almayacaktır.

innerTextcaniuse'ye göre FireFox 45'e kadar firefox'ta yoktu , ancak şimdi tüm büyük tarayıcılarda destekleniyor.

.textContentçıktılar text/plainiken .innerHTMLçıktılar text/html.

Hızlı örnek:

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

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

çıktı: <a href="http://google.com"> google </a>

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

çıktı: google

İlk örnekte, tür çıktısının text/plaintarayıcı tarafından ayrıştırılmadığını ve tüm içeriğin görüntülenmesiyle sonuçlandığını görebilirsiniz. Türün çıktısı text/html, tarayıcıya görüntülemeden önce ayrıştırmasını söyler.

MDN innerHTML , MDN textContent , MDN nodeValue

İyi bildiğim ve birlikte çalıştığım ikisi, innerHTML ve textContent .

Kullandığım textContent Sadece şöyle bir paragraf ya da başlığın metnini değiştirmek istediğinizde:

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>

Dolayısıyla, textContent yalnızca metni değiştirir, ancak sonuçta düz metinde görünen etiketlerden anlayabileceğimiz gibi HTML'yi ayrıştırmaz.

Olduğunuz HTML ayrıştırmak istiyorsanız, kullandığımız innerHTML böyle:

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>

Dolayısıyla, bu ikinci örnek DOM öğesinin innerHTML özelliğine atadığım dizeyi HTML olarak ayrıştırıyor .

Bu harika ve büyük bir güvenlik açığı :)

(bunun için güvenlik hakkında bilgi edinmek istiyorsanız XSS'ye bakın)

innerText kabaca, metni seçip kopyalarsanız elde edeceğiniz şeydir. Oluşturulmayan öğeler, innerText'te mevcut değildir.

textContent , alt ağaçtaki tüm TextNode değerlerinin birleşimidir . İşlenmiş olsun ya da olmasın.

İşte farklılıkları detaylandıran harika bir gönderi

innerHTML , tamamen farklı olduğu için innerText veya textContent ile karşılaştırmaya dahil edilmemelidir ve nedenini gerçekten bilmelisin :-) Ayrı olarak bak

[Not: Bu gönderi, insanlara ne yapacaklarını söylemekten çok birisine yardımcı olabilecek belirli bir veriyi paylaşmakla ilgilidir]

Birisi bugün neyin en hızlı olduğunu merak ediyor ise: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( ikinci test için, yayılma içeriği düz metindir, sonuçlar içeriğine göre değişebilir)

Görünüşe .innerHtmlgöre saf hız açısından en büyük kazanan bu!

(NOT: Burada sadece hızdan bahsediyorum, hangisini kullanacağınızı seçmeden önce başka kriterlere bakmak isteyebilirsiniz!)

Element.innerHTML özelliği setveya getelementin HTML kodu.

Ör: Bir <h1>etiketimiz ve güçlü bir tarzımız var:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> To getelemanın içeriği kimliği, biz yapacağız "myHeader" aynı eşittir vardır:

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

Dönüş sonucu:

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

Bu öğe için yeni içeriği (değeri) "ayarlamak" için kod burada olacaktır:

Element.innerHTML = "My Header My Text";

Dolayısıyla bu özellik yalnızca düz metinle çalışmakla kalmaz, aynı zamanda HTML kodunu iletmeyi veya kopyalamayı amaçlar.

=> Kullanmamalıyız.

Bununla birlikte, birçok programcı (ben dahil) bir web sayfasına metin eklemek için bu özelliği kullanır ve bu yöntem potansiyel bir risk taşır:

1. Yanlış işlem: her bir metni yalnızca bazen eklemek, eklenen öğenin diğer tüm HTML kodunu siler.
2. Güvenlik için: Tabii ki yukarıdaki iki örnek, HTML5 standardı etiket içindeki komut satırının çalıştırılmasını engellediğinden, etiketi kullanmak hala sorun olmasa bile tamamen zararsızdır. innerHTML özelliği ile web sayfasına eklendiğinde. Bu kuralı burada görün .

Bu nedenle, innerHTMLdüz metin eklerken kullanılması önerilmez, bunun yerine kullanın textContent. textContentÖzelliği geçmesi kodu bir HTML sözdizimi olduğunu anlıyorum, ama olmaz sadece% 100 metin artık ve ne eksik.

textContentYukarıdaki örnekte kullanılırsa sonuç döndürülür :

My Header My Text