Birkaç hafta önce, bir şey üzerinde çalışıyordum ve 'Aha!' Bir şeyin o kadar derin anlam ifade ettiği anlar, kendime onu keşfetmem ve yazmam gerektiğini söyledim.

Ne yazık ki, ne üzerinde çalıştığımı ya da ne 'Aha!' dediğimi hatırlamıyorum . an tam olarak buydu. Bu yüzden, dalacağım ve onu yeniden keşfedip keşfedemeyeceğime bakacağım.

iç metin

Vanilla JavaScript'te innerText, bir HTML öğesinin yalnızca işlenmiş metnini alır. Özünde, tarayıcıda görünen metin innerText'in yakaladığı şeydir.

HTML

<p id=“example”>This is an <span> example </span>.</p>

JavaScript

var x = document.getElementById(“example”).innerText;

Akılda tutulması gereken bazı şeyler:

• öğeler CSS ile gizlenmişse ('görüntüleme' veya 'görünürlük' özellikleri gibi bir şey kullanarak) innerText bunlara erişemez
• innerText, <script> veya <style> öğelerinin içeriğini döndürmez

Bu aslında bir HTML öğesinin iç içeriğini alır veya ayarlar.

İç içeriği aldığında, boşluk ve <li> veya <span> vb. gibi iç öğe etiketlerini de içerecektir.

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).innerHTML;

Bir HTML öğesinin içeriğini değiştirmek için:

document.getElementById(“example”).innerHTML = “And <strong> NOW </strong> the contents have been changed!”;

*** innerHTML bir sayfanın içeriğini değiştirmek için kullanılabildiğinden, tehlikeli <script> etiketleri ve diğer JavaScript saldırılarının yürütülmesi mümkündür.***

***Bu nedenle innerHTML kullanılması önerilmez.***

Bunun yerine textContent'i kullanmayı deneyin.

Metin içeriği

Bu, metin içeriğini boşlukla (innerHTML'ye benzer) ancak herhangi bir iç öğe etiketi olmadan döndürür.

textContent'i almak için:

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).textContent;

textContent'i ayarlamak için yukarıdaki innerHTML örneğindeki gibi yapın.

document.getElementById(“example”).textContent = “And <strong> NOW </strong> the contents have been changed!”;

• <script> ve <style> dahil tüm öğelerin metin içeriğini döndürür
• CSS ile gizlenmiş öğelerin metnini döndürür