innerText, innerHTML, etiket ve metin, textContent ve externalText karşılaştırması

Javascript tarafından doldurulan bir açılır listem var.

Yükte gösterilecek varsayılan değerin ne olması gerektiğine karar verirken, aşağıdaki özelliklerin tamamen aynı değerleri gösterdiğini fark ettim:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

Kendi araştırmam, kıyaslama testlerini veya bunların birkaçı arasında karşılaştırmaları gösteriyor, ancak hepsi değil.

Kendi sağduyumu kullanabilirim ve aynı sonucu verdikleri için birini veya diğerini seçebilirim, ancak verilerin değişmesi durumunda bunun iyi bir fikir olmayacağından endişe ediyorum.

Bulgularım:

• innerText değeri olduğu gibi gösterir ve dahil edilebilecek tüm HTML biçimlendirmelerini yok sayar
• innerHTML değeri gösterir ve herhangi bir HTML biçimlendirmesini uygular
• labelile aynı görünüyor innerText, bu yüzden farkı göremiyorum
• textinnerTextjQuery kısaltılmış sürümü ile aynı gibi görünüyor
• textContentaynı gibi görünür innerTextancak biçimlendirmeyi korur (örneğin \n)
• outerText ile aynı gibi görünüyor innerText

Araştırmam beni ancak düşünebildiğimi test edebildiğim veya yayınlananları okuyabildiğim kadar ileri götürebilir, herhangi biri araştırmamın doğru olup olmadığını labelve ve hakkında özel bir şey olup olmadığını doğrulayabilir outerTextmi?

Gönderen MDN'yi :

Internet Explorer element.innerText'i tanıttı. Niyet, birkaç farklılık dışında [textContent ile] hemen hemen aynıdır:

• TextContent, <script>ve <style>öğeleri dahil tüm öğelerin içeriğini alırken , çoğunlukla eşdeğer IE'ye özgü olan innerText özelliğinin bunu almadığını unutmayın.

• innerText ayrıca stilin farkındadır ve gizli öğelerin metnini döndürmez, oysa textContent.

• İnnerText, CSS stilinin farkında olduğundan, bir yeniden akışı tetikleyecek, ancak textContent tetiklemeyecektir.

Dolayısıyla innerText, CSS tarafından gizlenen metni içermez, ancak gizler textContent.

innerHTML, adından da anlaşılacağı gibi HTML'yi döndürür. Çoğu zaman, bir öğenin içindeki metni almak veya yazmak için, insanlar innerHTML kullanırlar. Bunun yerine textContent kullanılmalıdır. Metin HTML olarak ayrıştırılmadığından, muhtemelen daha iyi performansa sahip olacaktır. Dahası, bu bir XSS saldırı vektörünü önler.

Eğer o cevapsız, beni daha net bir şekilde tekrar bakalım: Do not kullanmak .innerHTMLÖzellikle bir öğesi içinde insert HTML niyetinde ve ekleme HTML zararlı içerik içeremez sağlamak için gerekli tedbirleri almış sürece. Yalnızca metin, kullanımını eklemek istiyorsanız .textContentsize IE8 desteklemek gerekmez ve daha önceki veya eğer, kullanım özelliği algılama arasındaki kapatmak .textContentve .innerText.

Bu kadar çok farklı özellik olmasının ana nedeni, farklı tarayıcıların bu özellikler için orijinal olarak farklı adlara sahip olması ve yine de tümü için tam bir tarayıcılar arası desteğin olmamasıdır. JQuery kullanıyorsanız, .text()tarayıcılar arası farklılıkları gidermek için tasarlandığından bağlı kalmalısınız . *

Diğerleri için: ait outerHTMLolduğu innerHTMLöğenin başlangıç ​​ve bitiş etiketlerini içermesi dışında temelde aynıdır . Hiç tanımlayamıyorum outerText. Bunun muhtemelen belirsiz bir miras mülk olduğunu ve bundan kaçınılması gerektiğini düşünüyorum.

Açılır liste, Optionnesnelerin bir koleksiyonunu içerir , bu nedenle .textözelliği, öğenin metinsel temsilini incelemek için kullanmalısınız.

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

btw,

.text.innerTextJQuery'nin kısaltılmış sürümü ile aynı görünüyor

Bu doğru değil; $(element).text()jQuery sürümü element.text, özellik erişim sürümüdür.

JLRishe'nin başka türlü mükemmel cevabına ek:

Hem innerText hem de externalText'in var olma nedeni, innerHTML ve externalHTML ile simetri içindir. Bu , mülke atadığınızda önemli hale gelir .

eHTML kodlu bir öğeniz olduğunu varsayalım <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent biçimlendirilmeyecek (\ n)

Belirli tarayıcıları hedefliyorsanız http://www.quirksmode.org/dom/html/ tarayıcı uyumluluğuna bakın . Çünkü hepsinin kendi işleyiş tarzları var gibi görünüyor. Bu nedenle, oyalanmak istemiyorsanız JQuery .text () ( http://api.jquery.com/text/ ) kullanmak daha iyidir .

textve labelfazla boşlukları kaldırın. Bir açılır listedeki seçenekleri sorgularken şu sonuçları aldım:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"