JavaScript Html DOM innerText ve textContent Kullanımı

JavaScript ile Html DOM üzerindeki bir öğenin metnini alabilir veya seçtiğimiz Html öğesinin içerisine metin ekleyebiliriz. Bunun için JavaScript’deki innerText veya textContent özelliklerini kullanıyoruz.

Bu iki özellik aslında aynı amaç için kullanılıyor. Aralarında sadece birkaç fark bulunuyor. Yazımın ilerleyen kısımlarında bu farklardan da bahsedeceğim.

JavaScript innerText Kullanımı

⇒ Örneğin id’si box olan bir div etiketi oluşturalım.

⇒ Div etiketinin içerisine de birkaç Html kodu yazalım.

⇒ Son olarak innerText ile div etiketinin içerisindeki metni almaya çalışalım.

<div id="box">
<p>
<b>JavaScript</b>
</p>
</div> 
<script> 
let word = document.querySelector("#box").innerText;
console.log(word);
</script>

<p>

<b>JavaScript</b>

</p>

</div>

let word = document.querySelector("#box").innerText;

console.log(word);

</script>

Çıktısı : JavaScript

Gördüğünüz gibi innerText ile div etiketinin içerisindeki metni alabildik. Dikkat ederseniz burada sadece metni alabiliyoruz. Eğer div’in içerisindeki metni p etiketi ile birlikte almak istiyorsanız innerHtml özelliğini kullanmalısınız.

JavaScript innerHtml kullanımı ile ilgili detaylı bilgi için JavaScript Html DOM innerHtml Kullanımı yazımı okuyabilirsiniz.

⇒ Şimdi de bir p etiketi oluşturup innerText ile içerisine metin eklemeye çalışalım.

<p id="prgf"></p> 
<script> 
let p = document.querySelector("#prgf");
p.innerText = "Hello World!";
console.log(p);
</script>

let p = document.querySelector("#prgf");

p.innerText = "Hello World!";

console.log(p);

</script>

Çıktısı :

<p id="prgf">Hello World!</p>

<p id="prgf">Hello World!</p>

Gördüğünüz gibi innerText ile p etiketinin içerisine istediğimiz metni yazabildik.

Html öğelerine erişim metodları hakkında detaylı bilgi için şu yazılarımı okuyabilirsiniz.

JavaScript Html DOM Erişim Yöntemleri – 1

JavaScript Html DOM Erişim Yöntemleri – 2

JavaScript textContent Kullanımı

JavaScript’te innerText ile textContent aynı amaç için kullanılıyor. innerText kullanımını yukarıda anlattığım için textContent kullanımını detaylı olarak anlatmayacağım.

Şimdi innerText ile textContent arasındaki farklara bakalım.

1 – innerText, <script> ve <style> öğeleri hariç tüm Html öğelerinin metin içeriğini döndürürken textContent tüm Html öğelerinin metin içeriğini döndürür.

2 – innerText, Css ile gizlenen Html öğelerinin metnini döndürmez fakat textContent döndürür. Bu farkı bir örnek üzerinde inceleyelim.

innerText ile :

<p id="prgf">JavaScript Html DOM <span style="display:none"> innerText </span> ve <span> textContent</span> kullanımı</p>
<script>
let metin = document.querySelector("#prgf").innerText;
console.log(metin);
</script>

<p id="prgf">JavaScript Html DOM <span style="display:none"> innerText </span> ve <span> textContent</span> kullanımı</p>

let metin = document.querySelector("#prgf").innerText;

console.log(metin);

</script>

Çıktısı : JavaScript Html DOM ve textContent kullanımı

textContent ile :

<p id="prgf">JavaScript Html DOM <span style="display:none"> innerText </span> ve <span> textContent</span> kullanımı</p>
<script>
let metin = document.querySelector("#prgf").textContent;
console.log(metin);
</script>

<p id="prgf">JavaScript Html DOM <span style="display:none"> innerText </span> ve <span> textContent</span> kullanımı</p>

let metin = document.querySelector("#prgf").textContent;

console.log(metin);

</script>

Çıktısı : JavaScript Html DOM innerText ve textContent kullanımı

Gördüğünüz gibi innerText kullanımında Css ile gizlediğimiz span etiketinin içerisindeki metin console’a yazdırılmadı.

Ama textContent ile metni almaya çalıştığımızda gizli olan span etiketinin içerisindeki metin de console ekranına yazdırıldı.

3 – innerText, Html öğesinin içerisinden alacağımız metinde bulunan boşlukları göz ardı ederken textContent alacağımız metni bu boşluklar ile birlikte alır. Bu farkı da bir örnek üzerinde inceleyelim.

<p id="prgf">     JavaScript Html          DOM innerText ve textContent   kullanımı</p>
<script>
let iText = document.querySelector("#prgf").innerText;
let tContent = document.querySelector("#prgf").textContent;
console.log(iText);
console.log(tContent);
</script>

<p id="prgf"> JavaScript Html DOM innerText ve textContent kullanımı</p>

let iText = document.querySelector("#prgf").innerText;

let tContent = document.querySelector("#prgf").textContent;

console.log(iText);

console.log(tContent);

</script>

innerText Çıktısı : JavaScript Html DOM innerText ve textContent kullanımı

textContent Çıktısı : JavaScript Html DOM innerText ve textContent kullanımı

Son olarak JavaScript innerText ve textContent özelliklerinin tarayıcı desteklerine bakalım.

⇒ JavaScript innerText özelliğinin tarayıcı desteği aşağıdaki gibidir.

Chrome – 4.0
Internet Explorer / Edge – 10.0
Firefox – 45.0
Safari – 3.0
Opera – 9.6

⇒ JavaScript textContent özelliğinin tarayıcı desteği aşağıdaki gibidir.

Chrome – 1.0
Internet Explorer / Edge – 9.0
Firefox – Tamamı
Safari – Tamamı
Opera – Tamamı

Umarım “JavaScript Html DOM innerText ve textContent Kullanımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

jQuery text(), html(), val() Metodları ve Kullanımları

Yeni bir yazımda görüşmek üzere.

JavaScript Html DOM innerText ve textContent Kullanımı

JavaScript innerText Kullanımı

JavaScript textContent Kullanımı

Yazar Hakkında

Yorum Yazın

JavaScript innerText Kullanımı

JavaScript textContent Kullanımı

Benzer Yazılar

Yazar Hakkında

Yorum Yazın