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.

 ⇒  Ö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.

 Çı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.

 Çıktısı :  

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’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 :

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

textContent ile :

 Çı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.

 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.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.