{"id":32704,"date":"2025-10-25T01:40:54","date_gmt":"2025-10-24T22:40:54","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32704"},"modified":"2025-10-25T01:40:54","modified_gmt":"2025-10-24T22:40:54","slug":"javascriptte-innertext-ve-innerhtml-kullanarak-dom-manipulasyonu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-innertext-ve-innerhtml-kullanarak-dom-manipulasyonu\/","title":{"rendered":"JavaScript’te innerText ve innerHTML Kullanarak DOM Manip\u00fclasyonu"},"content":{"rendered":"

<\/p>\n

JavaScript’te innerText ve innerHTML Kullanarak DOM Manip\u00fclasyonu<\/h2>\n

Web sayfalar\u0131, kullan\u0131c\u0131larla etkile\u015fim kuran dinamik yap\u0131lar haline geldik\u00e7e, JavaScript’in bu sayfalar\u0131 de\u011fi\u015ftirebilme yetene\u011fi kritik bir \u00f6neme sahip olmu\u015ftur. Bu yetene\u011fin temelinde Yorumlanabilir Belge Modeli (Document Object Model – DOM) ve bu modeli manip\u00fcle etmek i\u00e7in kullan\u0131lan \u00e7e\u015fitli JavaScript \u00f6zellikleri yatar. DOM, bir web sayfas\u0131n\u0131n yap\u0131land\u0131r\u0131lm\u0131\u015f bir g\u00f6sterimidir ve JavaScript’in sayfadaki her bir \u00f6\u011feye eri\u015fmesine ve bunlar\u0131 de\u011fi\u015ftirmesine olanak tan\u0131r. Bu makalede, DOM manip\u00fclasyonunun en yayg\u0131n ve g\u00fc\u00e7l\u00fc yollar\u0131ndan ikisi olan innerText<\/code> ve innerHTML<\/code> \u00f6zelliklerini derinlemesine inceleyece\u011fiz. Bu iki \u00f6zelli\u011fin ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, birbirlerinden farklar\u0131n\u0131, g\u00fcvenlik ve performans etkilerini ve hangi durumlarda hangisinin tercih edilmesi gerekti\u011fini detayl\u0131 \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n

DOM (Document Object Model) Nedir?<\/h3>\n

DOM, HTML ve XML belgeleri i\u00e7in bir programlama aray\u00fcz\u00fcd\u00fcr. Bir web sayfas\u0131n\u0131, her biri belgenin bir par\u00e7as\u0131n\u0131 temsil eden nesnelerin ve d\u00fc\u011f\u00fcmlerin (nodes) bir a\u011fac\u0131 olarak temsil eder. Bu a\u011fa\u00e7 yap\u0131s\u0131 sayesinde JavaScript, belgenin i\u00e7eri\u011fini, yap\u0131s\u0131n\u0131 ve stilini dinamik olarak de\u011fi\u015ftirebilir. \u00d6rne\u011fin, bir sayfadaki bir paragraf\u0131n metnini de\u011fi\u015ftirebilir, yeni bir resim ekleyebilir veya bir d\u00fc\u011fmenin rengini de\u011fi\u015ftirebilirsiniz.<\/p>\n

DOM’un temel \u00f6\u011feleri \u015funlard\u0131r:
\n* Belge (Document) Nesnesi:<\/strong> T\u00fcm DOM a\u011fac\u0131n\u0131n k\u00f6k\u00fcd\u00fcr ve sayfan\u0131n kendisine eri\u015fim sa\u011flar.
\n* Element Nesneleri:<\/strong> HTML etiketlerini (<\/p>\n

<\/code>, <\/p>\n

<\/code>, <\/code> vb.) temsil eder.
\n* Metin (Text) D\u00fc\u011f\u00fcmleri:<\/strong> Elementlerin i\u00e7indeki saf metni temsil eder.
\n* \u00d6znitelik (Attribute) D\u00fc\u011f\u00fcmleri:<\/strong> Elementlerin \u00f6zniteliklerini (href<\/code>, src<\/code>, class<\/code> vb.) temsil eder.<\/p>\n

JavaScript, bu nesneler ve d\u00fc\u011f\u00fcmler arac\u0131l\u0131\u011f\u0131yla DOM ile etkile\u015fime girer. document.getElementById()<\/code>, document.querySelector()<\/code> gibi metotlar belirli elementlere eri\u015fmek i\u00e7in kullan\u0131l\u0131rken, innerText<\/code> ve innerHTML<\/code> gibi \u00f6zellikler bu elementlerin i\u00e7eri\u011fini okumak veya de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

innerText \u00d6zelli\u011fi<\/h3>\n

innerText<\/code> \u00f6zelli\u011fi, bir HTML elementinin “g\u00f6r\u00fcn\u00fcr” metin i\u00e7eri\u011fini temsil eder. Yani, kullan\u0131c\u0131 taraf\u0131ndan taray\u0131c\u0131da g\u00f6r\u00fcnen metni d\u00f6nd\u00fcr\u00fcr veya ayarlar. Bu \u00f6zellik, elementin i\u00e7indeki t\u00fcm HTML etiketlerini g\u00f6z ard\u0131 eder ve yaln\u0131zca metin i\u00e7eri\u011fini dikkate al\u0131r.<\/p>\n

innerText’in Kullan\u0131m\u0131<\/h4>\n

Bir elementin metin i\u00e7eri\u011fini okuma:<\/strong>
\nBir elementin mevcut metin i\u00e7eri\u011fini almak i\u00e7in innerText<\/code> \u00f6zelli\u011fini kullanabilirsiniz.<\/p>\n

\/\/ HTML yap\u0131s\u0131: 
Merhaba D\u00fcnya!<\/p>\nlet paragraf = document.getElementById('mesaj');\nlet metin = paragraf.innerText;\nconsole.log(metin); \/\/ \u00c7\u0131kt\u0131: \"Merhaba D\u00fcnya!\"<\/code><\/pre>\n
Bir elementin metin i\u00e7eri\u011fini de\u011fi\u015ftirme:<\/strong>
\nBir elementin metin i\u00e7eri\u011fini de\u011fi\u015ftirmek i\u00e7in innerText<\/code> \u00f6zelli\u011fine yeni bir dize atayabilirsiniz.<\/p>\n
\/\/ HTML yap\u0131s\u0131: 
Eski bilgi<\/div>\nlet bilgiDiv = document.getElementById('bilgi');\nbilgiDiv.innerText = 'Yeni ve g\u00fcncel bilgi.';\n\/\/ Art\u0131k div i\u00e7eri\u011fi: 
Yeni ve g\u00fcncel bilgi.<\/div><\/code><\/pre>\n
E\u011fer atad\u0131\u011f\u0131n\u0131z dize HTML etiketleri i\u00e7eriyorsa, innerText<\/code> bu etiketleri metin olarak i\u015fler ve taray\u0131c\u0131da do\u011frudan g\u00f6r\u00fcnt\u00fcler.<\/p>\n
\/\/ HTML yap\u0131s\u0131: <\/span>\nlet uyariSpan = document.getElementById('uyari');\nuyariSpan.innerText = 'Dikkat:<\/strong> Bu bir uyar\u0131d\u0131r.';\n\/\/ Art\u0131k span i\u00e7eri\u011fi: <strong>Dikkat:<\/strong> Bu bir uyar\u0131d\u0131r.<\/span>\n\/\/ Taray\u0131c\u0131da: Dikkat:<\/strong> Bu bir uyar\u0131d\u0131r. \u015feklinde g\u00f6r\u00fcn\u00fcr.<\/code><\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, innerText<\/code> HTML etiketlerini otomatik olarak ka\u00e7\u0131r\u0131r (escape eder), yani onlar\u0131 \u00f6zel karakterlere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr (<<\/code> -> <<\/code>, ><\/code> -> ><\/code>). Bu, g\u00fcvenlik a\u00e7\u0131s\u0131ndan \u00f6nemli bir \u00f6zelliktir.<\/p>\n
innerText'in \u00d6zellikleri ve Davran\u0131\u015flar\u0131<\/h4>\n
*   G\u00f6r\u00fcn\u00fcr Metin Odakl\u0131l\u0131k:<\/strong> innerText<\/code>, bir elementin kullan\u0131c\u0131 taraf\u0131ndan g\u00f6r\u00fcnen metin i\u00e7eri\u011fini d\u00f6nd\u00fcr\u00fcr. Bu, CSS ile display: none;<\/code> veya visibility: hidden;<\/code> gibi stillerle gizlenmi\u015f metinleri i\u00e7ermeyece\u011fi anlam\u0131na gelir.<\/p>\n
\/\/ HTML yap\u0131s\u0131:\n    \/\/ 
\n    \/\/   
G\u00f6r\u00fcn\u00fcr metin.<\/p>\n    \/\/   Gizli metin.<\/span>\n    \/\/ <\/div>\n    let kapsayici = document.getElementById('kapsayici');\n    console.log(kapsayici.innerText); \/\/ \u00c7\u0131kt\u0131: \"G\u00f6r\u00fcn\u00fcr metin.\" (Gizli metin dahil edilmez)<\/code><\/pre>\n
*   Stil Hesaplamas\u0131:<\/strong> innerText<\/code> de\u011feri al\u0131n\u0131rken taray\u0131c\u0131, elementin nihai hesaplanm\u0131\u015f stilini dikkate al\u0131r. Bu, DOM'un yeniden d\u00fczenlenmesini (reflow) tetikleyebilir ve b\u00fcy\u00fck veya karma\u015f\u0131k DOM a\u011fa\u00e7lar\u0131nda performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olabilir.
\n*   Bo\u015fluk ve Sat\u0131r Sonu Karakterleri:<\/strong> innerText<\/code>, metin i\u00e7eri\u011findeki bo\u015fluklar\u0131 ve sat\u0131r sonu karakterlerini genellikle taray\u0131c\u0131n\u0131n g\u00f6r\u00fcnt\u00fcleme \u015fekline uygun olarak korur. \u00d6rne\u011fin, birden fazla bo\u015fluk tek bir bo\u015flu\u011fa indirgenebilir (CSS white-space<\/code> \u00f6zelli\u011fine ba\u011fl\u0131 olarak).
\n*   G\u00fcvenlik:<\/strong> innerText<\/code> \u00f6zelli\u011fi, i\u00e7erisine atanan t\u00fcm HTML etiketlerini metin olarak i\u015fledi\u011fi i\u00e7in XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 do\u011fal bir koruma sa\u011flar. Kullan\u0131c\u0131dan gelen verileri g\u00fcvenli bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek i\u00e7in idealdir.<\/p>\n
innerText'in Avantajlar\u0131<\/h4>\n
*   G\u00fcvenlik:<\/strong> XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 do\u011fal koruma sa\u011flar. Kullan\u0131c\u0131 taraf\u0131ndan girilen verileri g\u00fcvenli bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek i\u00e7in en iyi se\u00e7enektir.
\n*   Basitlik:<\/strong> Sadece metin i\u00e7eri\u011fiyle ilgileniyorsan\u0131z kullan\u0131m\u0131 son derece basittir.
\n*   G\u00f6r\u00fcn\u00fcrl\u00fck:<\/strong> Yaln\u0131zca kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc metni d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, sayfan\u0131n mevcut g\u00f6rsel durumunu yans\u0131t\u0131r.<\/p>\n
innerText'in Dezavantajlar\u0131<\/h4>\n
*   HTML Ekleme K\u0131s\u0131tlamas\u0131:<\/strong> HTML etiketlerini metin olarak i\u015fledi\u011fi i\u00e7in, dinamik olarak HTML yap\u0131lar\u0131 olu\u015fturmak veya zengin metin i\u00e7eri\u011fi eklemek i\u00e7in kullan\u0131lamaz.
\n*   Performans:<\/strong> De\u011ferini al\u0131rken taray\u0131c\u0131n\u0131n stil hesaplamas\u0131 yapmas\u0131 gerekti\u011fi i\u00e7in, \u00f6zellikle b\u00fcy\u00fck DOM a\u011fa\u00e7lar\u0131nda veya s\u0131k\u00e7a \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olabilir. Bu, reflow ve repaint i\u015flemlerini tetikler.<\/p>\n
innerHTML \u00d6zelli\u011fi<\/h3>\n
innerHTML<\/code> \u00f6zelli\u011fi, bir HTML elementinin \"i\u00e7 HTML\" i\u00e7eri\u011fini temsil eder. Yani, elementin ba\u015flang\u0131\u00e7 ve biti\u015f etiketleri aras\u0131ndaki t\u00fcm HTML i\u015faretlemesini (etiketler, metin, yorumlar vb.) d\u00f6nd\u00fcr\u00fcr veya ayarlar. Bu \u00f6zellik, dinamik olarak karma\u015f\u0131k HTML yap\u0131lar\u0131 olu\u015fturmak veya mevcut bir elementin i\u00e7eri\u011fini tamamen de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
innerHTML'in Kullan\u0131m\u0131<\/h4>\n
Bir elementin HTML i\u00e7eri\u011fini okuma:<\/strong>
\nBir elementin mevcut HTML i\u00e7eri\u011fini almak i\u00e7in innerHTML<\/code> \u00f6zelli\u011fini kullanabilirsiniz.<\/p>\n
\/\/ HTML yap\u0131s\u0131: 
  • \u00d6\u011fe 1<\/li>
  • \u00d6\u011fe 2<\/li><\/ul><\/div>\nlet listeDiv = document.getElementById('liste');\nlet htmlIcerik = listeDiv.innerHTML;\nconsole.log(htmlIcerik); \/\/ \u00c7\u0131kt\u0131: \"
    • \u00d6\u011fe 1<\/li>
    • \u00d6\u011fe 2<\/li><\/ul>\"<\/code><\/pre>\n
      Bir elementin HTML i\u00e7eri\u011fini de\u011fi\u015ftirme:<\/strong>
      \nBir elementin HTML i\u00e7eri\u011fini de\u011fi\u015ftirmek veya yeni HTML eklemek i\u00e7in innerHTML<\/code> \u00f6zelli\u011fine bir HTML dizesi atayabilirsiniz.<\/p>\n
      \/\/ HTML yap\u0131s\u0131: 
      Eski i\u00e7erik<\/div>\nlet icerikDiv = document.getElementById('icerik');\nicerikDiv.innerHTML = '
      Bu yeni<\/strong> bir paragraft\u0131r.<\/p>';\n\/\/ Art\u0131k div i\u00e7eri\u011fi: 
      Bu yeni<\/strong> bir paragraft\u0131r.<\/p><\/div><\/code><\/pre>\n
      Bu \u00f6rnekte, icerikDiv<\/code>'in t\u00fcm eski i\u00e7eri\u011fi silinir ve yerine yeni <\/p>\n
      <\/code> etiketi ve i\u00e7indeki metin yerle\u015ftirilir. Taray\u0131c\u0131, atanan HTML dizesini ayr\u0131\u015ft\u0131r\u0131r ve ilgili DOM d\u00fc\u011f\u00fcmlerini olu\u015fturur.<\/p>\n
      Mevcut i\u00e7eri\u011fe ekleme yapma:<\/strong>
      \ninnerHTML<\/code> mevcut i\u00e7eri\u011fi tamamen de\u011fi\u015ftirdi\u011fi i\u00e7in, mevcut i\u00e7eri\u011fe ekleme yapmak istiyorsan\u0131z, mevcut innerHTML<\/code> de\u011ferini al\u0131p yeni i\u00e7eri\u011fi buna ekleyip tekrar ataman\u0131z gerekir.<\/p>\n
      \/\/ HTML yap\u0131s\u0131: 
      • Mevcut \u00d6\u011fe<\/li><\/ul>\nlet liste = document.getElementById('liste');\nliste.innerHTML += '
      • Yeni \u00d6\u011fe<\/li>';\n\/\/ Art\u0131k liste i\u00e7eri\u011fi: 
        • Mevcut \u00d6\u011fe<\/li>
        • Yeni \u00d6\u011fe<\/li><\/ul><\/code><\/pre>\n
          Ancak, bu yakla\u015f\u0131m (mevcut innerHTML<\/code>'i al\u0131p \u00fczerine ekleyip tekrar atama) b\u00fcy\u00fck DOM yap\u0131lar\u0131 i\u00e7in performans sorunlar\u0131na yol a\u00e7abilir, \u00e7\u00fcnk\u00fc her atamada taray\u0131c\u0131 t\u00fcm i\u00e7eri\u011fi yeniden ayr\u0131\u015ft\u0131r\u0131r ve DOM'u yeniden olu\u015fturur. Bu t\u00fcr durumlarda insertAdjacentHTML<\/code> veya DOM API'lerini kullanmak daha verimlidir.<\/p>\n
          innerHTML'in \u00d6zellikleri ve Davran\u0131\u015flar\u0131<\/h4>\n
          *   HTML Ayr\u0131\u015ft\u0131rma:<\/strong> innerHTML<\/code>'e bir dize atand\u0131\u011f\u0131nda, taray\u0131c\u0131 bu dizeyi HTML olarak ayr\u0131\u015ft\u0131r\u0131r ve ortaya \u00e7\u0131kan DOM d\u00fc\u011f\u00fcmlerini hedef elementin i\u00e7ine yerle\u015ftirir. Bu i\u015flem, mevcut t\u00fcm \u00e7ocuk d\u00fc\u011f\u00fcmlerinin kald\u0131r\u0131lmas\u0131 ve yenilerinin olu\u015fturulmas\u0131 anlam\u0131na gelir.
          \n*   G\u00fcvenlik Riski (XSS):<\/strong> innerHTML<\/code>, atanan dizeyi HTML olarak yorumlad\u0131\u011f\u0131 i\u00e7in, k\u00f6t\u00fc niyetli kullan\u0131c\u0131 girdileriyle kullan\u0131ld\u0131\u011f\u0131nda XSS sald\u0131r\u0131lar\u0131na kap\u0131 a\u00e7abilir. E\u011fer kullan\u0131c\u0131dan gelen ve g\u00fcvenilmeyen bir dizeyi do\u011frudan innerHTML<\/code>'e atarsan\u0131z, bu dize i\u00e7indeki