[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-domda-element-secme-ve-guncelleme-pratik-javascript-ornekleri":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},21229,"DOM'da Element Seçme ve Güncelleme: Pratik JavaScript Örnekleri","Bu rehberde DOM'da element seçmeyi (querySelector/querySelectorAll) ve seçtiğiniz elementleri metin (textContent/innerText) ile sınıf (classList) üzerinden güncellemeyi pratik örneklerle öğreneceksiniz. Ayrıca innerHTML kullanımında veri kaynağına göre oluşabilecek güvenlik risklerine karşı temel önlemleri göreceksiniz.","\u003Ch2>DOM nedir ve neden “seçme + güncelleme” iki temel adımdır?\u003C/h2>\n\u003Cp>Web sayfasındaki görünen (ve görünmeyen) tüm yapı taşları, tarayıcı içinde \u003Cem>DOM\u003C/em> (Document Object Model) denen ağaç yapısıyla temsil edilir. JavaScript ile arayüzü değiştirmek genellikle iki adımda ilerler:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Element seçme:\u003C/strong> Hangi düğüm(ler) üzerinde çalışacağını belirlemek.\u003C/li>\n\u003Cli>\u003Cstrong>Güncelleme:\u003C/strong> Metin, sınıf (class), öznitelik (attribute) veya çocuk düğümleri değiştirmek.\u003C/li>\n\u003C/ul>\n\u003Cp>Bu yazı, “günlük iş” ihtiyaçlarını hedefler: doğru seçiciyi yazmak, \u003Cem>null\u003C/em> kontrolü yapmak, metni güvenli biçimde güncellemek ve class yönetimini temiz tutmak.\u003C/p>\n\u003Chr>\n\u003Ch2>1) Element seçme: \u003Cem>querySelector\u003C/em> ve \u003Cem>querySelectorAll\u003C/em>\u003C/h2>\n\u003Ch3>document.querySelector(): ilk eşleşeni seçer (yoksa null)\u003C/h3>\n\u003Cp>\u003Cstrong>document.querySelector(selectors)\u003C/strong>, verdiğiniz CSS seçiciyle eşleşen \u003Cem>ilk\u003C/em> elementi döndürür; eşleşme yoksa \u003Cstrong>null\u003C/strong> döner. Bu davranış hem pratik kaynaklarda hem de DOM Standard tanımında yer alır.\u003C/p>\n\u003Cp>Kaynaklar: \u003Ca href=\"https://developer.mozilla.org/docs/Web/API/Document/querySelector?utm_source=openai\">MDN querySelector()\u003C/a>, \u003Ca href=\"https://dom.spec.whatwg.org/?utm_source=openai\">WHATWG DOM Standard\u003C/a>.\u003C/p>\n\u003Ch4>Örnek: tek bir elementi güvenli şekilde seçip güncellemek\u003C/h4>\n\u003Cblockquote>\nconst titleEl = document.querySelector('h1');\u003Cbr>\nif (titleEl) {\u003Cbr>\n  titleEl.textContent = 'Merhaba DOM!';\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Neden null kontrolü?\u003C/strong> Çünkü seçici sayfada yoksa, dönen değer null olur ve doğrudan özellik çağırmak hata üretir. Giriş seviyesinde en sık atlanan adımlardan biri budur.\u003C/p>\n\u003Ch3>querySelectorAll(): birden çok eşleşme ve statik NodeList\u003C/h3>\n\u003Cp>\u003Cstrong>element.querySelectorAll(selectors)\u003C/strong> (ve document üzerinde kullanımı), eşleşen tüm elementleri bir \u003Cstrong>NodeList\u003C/strong> olarak döndürür. Bu listenin \u003Cem>statik\u003C/em> olduğu (DOM sonradan değişse bile listenin kendiliğinden güncellenmeyebileceği) DOM Standard’da tanımlanır.\u003C/p>\n\u003Cp>Kaynak: \u003Ca href=\"https://dom.spec.whatwg.org/?utm_source=openai\">WHATWG DOM Standard\u003C/a>.\u003C/p>\n\u003Ch4>Örnek: çoklu elementi döngüyle güncellemek\u003C/h4>\n\u003Cblockquote>\ndocument.querySelectorAll('.tag').forEach((el) => {\u003Cbr>\n  el.textContent = '#javascript';\u003Cbr>\n});\u003Cbr>\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>İpucu:\u003C/strong> NodeList çoğu modern tarayıcıda \u003Cem>forEach\u003C/em> destekler; ancak daha geniş uyumluluk gerekiyorsa \u003Cem>Array.from(...)\u003C/em> ile diziye çevirmek iyi bir alışkanlık olabilir.\u003C/p>\n\u003Ch3>Seçimi daraltın: element.querySelector ile “scope” kullanımı\u003C/h3>\n\u003Cp>Büyük sayfalarda, tüm document üzerinde aramak yerine önce bir kapsayıcı seçip onun içinde aramak hem okunabilirliği artırır hem de yanlış eşleşme riskini azaltır.\u003C/p>\n\u003Cblockquote>\nconst card = document.querySelector('.product-card');\u003Cbr>\nif (card) {\u003Cbr>\n  const price = card.querySelector('.price');\u003Cbr>\n  if (price) price.textContent = '$19.99';\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>2) Metin güncelleme: textContent, innerText ve innerHTML farkı\u003C/h2>\n\u003Ch3>textContent: ham metin okur/yazar\u003C/h3>\n\u003Cp>\u003Cstrong>textContent\u003C/strong>, bir düğümün metin içeriğini (alt düğümler dahil) “ham metin” olarak okur ve yazar. Arayüzde görünen metni güncellemenin en güvenli ve basit yollarından biridir.\u003C/p>\n\u003Cp>Kaynak: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent?utm_source=openai\">MDN: Node.textContent\u003C/a>.\u003C/p>\n\u003Ch4>Örnek: kullanıcıya durum mesajı göstermek\u003C/h4>\n\u003Cblockquote>\nconst statusEl = document.querySelector('#status');\u003Cbr>\nif (statusEl) {\u003Cbr>\n  statusEl.textContent = 'Yükleme tamamlandı.';\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Ch3>innerText: görünür metne odaklanır, stil/yerleşim etkileri olabilir\u003C/h3>\n\u003Cp>\u003Cstrong>innerText\u003C/strong> çoğunlukla “görünen metin” ile ilgilidir ve bazı durumlarda stil/ görünürlük hesaplamalarından etkilenebilir. MDN, innerText’in okuma sırasında yerleşim hesaplamalarını (reflow) tetikleyebileceğine dair notlar paylaşır. Bu nedenle, yalnızca gerçekten “görünen metni” hedeflediğiniz durumlarda kullanmak daha temkinli bir yaklaşımdır.\u003C/p>\n\u003Cp>Kaynak: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent?utm_source=openai\">MDN: Node.textContent (innerText karşılaştırmaları)\u003C/a>.\u003C/p>\n\u003Ch3>innerHTML: HTML ayrıştırır; dış veride dikkat gerektirir\u003C/h3>\n\u003Cp>\u003Cstrong>innerHTML\u003C/strong>, verdiğiniz string’i HTML olarak ayrıştırıp DOM’a yazar. Bu pratik görünebilir; ancak içerik \u003Cem>kullanıcıdan\u003C/em> veya \u003Cem>harici bir kaynaktan\u003C/em> geliyorsa, uygun şekilde temizlenmeden (sanitize edilmeden) kullanmak ciddi güvenlik riskleri doğurabilir. Metin basmak istiyorsanız genellikle \u003Cstrong>textContent\u003C/strong> tercih edilir.\u003C/p>\n\u003Cp>Kaynak: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent?utm_source=openai\">MDN: Node.textContent\u003C/a>.\u003C/p>\n\u003Ch4>Pratik kural: Hangi durumda hangisi?\u003C/h4>\n\u003Cul>\n\u003Cli>\u003Cstrong>Sadece yazı güncelle:\u003C/strong> \u003Cem>textContent\u003C/em>\u003C/li>\n\u003Cli>\u003Cstrong>“Görünür metin” davranışı önemli:\u003C/strong> \u003Cem>innerText\u003C/em> (gerektiğinde)\u003C/li>\n\u003Cli>\u003Cstrong>Kontrollü, sabit HTML şablonu:\u003C/strong> Dikkatle \u003Cem>innerHTML\u003C/em> (dış veride sanitize düşün)\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>3) class yönetimi: classList ile durum (state) yönetimi\u003C/h2>\n\u003Cp>CSS sınıflarını string birleştirerek yönetmek yerine \u003Cstrong>classList\u003C/strong> ile yönetmek daha okunabilir ve daha az sürprizli bir yaklaşımdır. \u003Cem>add/remove/toggle/contains\u003C/em> gibi metotlar sunar.\u003C/p>\n\u003Cp>Kaynak: \u003Ca href=\"https://frost.cs.uchicago.edu/ref/JavaScript/developer.mozilla.org/en-US/docs/Web/API/Element/classList.html?utm_source=openai\">MDN: Element.classList\u003C/a>.\u003C/p>\n\u003Ch3>Örnek: aktif/pasif görünümü toggle etmek\u003C/h3>\n\u003Cblockquote>\nconst panel = document.querySelector('.panel');\u003Cbr>\nif (panel) {\u003Cbr>\n  panel.classList.toggle('is-open');\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Ch3>Örnek: bir sınıf var mı kontrol etmek\u003C/h3>\n\u003Cblockquote>\nconst btn = document.querySelector('.cta');\u003Cbr>\nif (btn && !btn.classList.contains('disabled')) {\u003Cbr>\n  btn.classList.add('highlight');\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Not:\u003C/strong> classList kullanımı, sınıf adlarının “boşlukla ayrılan liste” mantığıyla düzgün yönetilmesini kolaylaştırır.\u003C/p>\n\u003Chr>\n\u003Ch2>4) Sık güncellenen diğer şeyler: attribute vs property\u003C/h2>\n\u003Cp>DOM’da bazı değerler hem “attribute” hem de “property” olarak karşınıza çıkar. Pratikte şu yaklaşım iş görür:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Girdi değerleri\u003C/strong> (ör. input.value gibi) çoğunlukla \u003Cem>property\u003C/em> üzerinden yönetilir.\u003C/li>\n\u003Cli>\u003Cstrong>Standart HTML öznitelikleri\u003C/strong> (ör. href, aria-*, data-*) için \u003Cem>setAttribute/getAttribute\u003C/em> kullanılabilir.\u003C/li>\n\u003C/ul>\n\u003Ch3>Örnek: data attribute ile durum tutmak\u003C/h3>\n\u003Cblockquote>\nconst item = document.querySelector('.item');\u003Cbr>\nif (item) {\u003Cbr>\n  item.setAttribute('data-state', 'ready');\u003Cbr>\n  const state = item.getAttribute('data-state');\u003Cbr>\n  console.log(state);\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>5) DOM güncelleme örnekleri: küçük görevlerle pratik\u003C/h2>\n\u003Ch3>Örnek A: Liste elemanlarını toplu güncelleme\u003C/h3>\n\u003Cp>Diyelim ki bir ürün listesinde tüm fiyat etiketlerini güncellemek istiyorsunuz. İlk olarak hepsini seçin, sonra tek bir döngüyle metni değiştirin:\u003C/p>\n\u003Cblockquote>\ndocument.querySelectorAll('.price').forEach((el) => {\u003Cbr>\n  el.textContent = '$0.00';\u003Cbr>\n});\u003Cbr>\n\u003C/blockquote>\n\u003Ch3>Örnek B: Bir kart içindeki alanları hedefleyerek güncelleme\u003C/h3>\n\u003Cp>Kart bazlı UI’larda, aynı sınıf isimleri birden çok yerde tekrar eder. Bu durumda “önce kartı seç, sonra içeride ara” yaklaşımı düzen sağlar:\u003C/p>\n\u003Cblockquote>\nconst cards = document.querySelectorAll('.product-card');\u003Cbr>\ncards.forEach((card) => {\u003Cbr>\n  const nameEl = card.querySelector('.name');\u003Cbr>\n  const badgeEl = card.querySelector('.badge');\u003Cbr>\n  if (nameEl) nameEl.textContent = 'Yeni Ürün';\u003Cbr>\n  if (badgeEl) badgeEl.classList.add('is-new');\u003Cbr>\n});\u003Cbr>\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>6) Performans notu: çok sayıda değişikliği “toplu” uygulamayı düşünün\u003C/h2>\n\u003Cp>Birkaç element güncellemesinde genellikle sorun yaşamazsınız. Ancak çok sayıda düğüm ekleyip çıkarıyorsanız, her küçük değişikliği tek tek yapmak tarayıcı tarafında ek maliyetler doğurabilir. Bu gibi senaryolarda \u003Cstrong>DocumentFragment\u003C/strong> veya \u003Cstrong>replaceChildren\u003C/strong> gibi yaklaşımlar “toplu güncelleme” için düşünülebilir.\u003C/p>\n\u003Cp>DOM Standard, düğüm ekleme/çıkarma ve \u003Cem>replaceChildren\u003C/em> gibi işlemlerin nasıl çalıştığını tanımlar. Kaynak: \u003Ca href=\"https://dom.spec.whatwg.org/?utm_source=openai\">WHATWG DOM Standard\u003C/a>.\u003C/p>\n\u003Ch3>Örnek: replaceChildren ile listeyi tek seferde yenilemek\u003C/h3>\n\u003Cp>Aşağıdaki örnekte, yeni liste elemanlarını önce fragment’e kurup ardından tek hamlede değiştirirsiniz. Bu, kodu daha “toplu” hale getirir:\u003C/p>\n\u003Cblockquote>\nconst list = document.querySelector('#results');\u003Cbr>\nif (list) {\u003Cbr>\n  const frag = document.createDocumentFragment();\u003Cbr>\n  ['A', 'B', 'C'].forEach((label) => {\u003Cbr>\n    const li = document.createElement('li');\u003Cbr>\n    li.textContent = label;\u003Cbr>\n    frag.append(li);\u003Cbr>\n  });\u003Cbr>\n  list.replaceChildren(frag);\u003Cbr>\n}\u003Cbr>\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Sınır:\u003C/strong> Bu yazı benchmark (ölçüm) verisi sunmaz. Gerçek performans; DOM boyutu, cihaz ve tarayıcıya göre değişir. Büyük ölçekli güncellemelerde ölçüm yaparak ilerlemek daha sağlıklıdır.\u003C/p>\n\u003Chr>\n\u003Ch2>7) Mini kontrol listesi: DOM ile çalışırken daha az sürpriz için\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Seçici sonrası null kontrolü\u003C/strong> yapın (özellikle querySelector ile).\u003C/li>\n\u003Cli>\u003Cstrong>Metin basmak için\u003C/strong> önce \u003Cstrong>textContent\u003C/strong> düşünün.\u003C/li>\n\u003Cli>\u003Cstrong>Dış kaynaktan gelen HTML\u003C/strong> string’ini innerHTML’e doğrudan basmamaya çalışın; gerekiyorsa temizleme yaklaşımını planlayın.\u003C/li>\n\u003Cli>\u003Cstrong>Class yönetiminde\u003C/strong> string birleştirmek yerine \u003Cstrong>classList\u003C/strong> kullanın.\u003C/li>\n\u003Cli>\u003Cstrong>Çok sayıda güncellemede\u003C/strong> fragment/replaceChildren gibi toplu yaklaşımları değerlendirin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Kaynaklar ve notlar\u003C/h2>\n\u003Cp>Bu rehber, temel davranışlar için WHATWG DOM Standard ve MDN dokümantasyonuna dayanır. Tarayıcılar arası davranış farklılıkları ve ileri seviye güvenlik (sanitize stratejileri, politika tabanlı korumalar) gibi konular için ek araştırma gerekebilir.\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https://dom.spec.whatwg.org/?utm_source=openai\">WHATWG DOM Standard\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://developer.mozilla.org/docs/Web/API/Document/querySelector?utm_source=openai\">MDN: Document.querySelector()\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent?utm_source=openai\">MDN: Node.textContent\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://frost.cs.uchicago.edu/ref/JavaScript/developer.mozilla.org/en-US/docs/Web/API/Element/classList.html?utm_source=openai\">MDN: Element.classList\u003C/a>\u003C/li>\n\u003C/ul>","DOM'da Element Seçme ve Güncelleme (JavaScript): querySelect","JavaScript başlangıç kodlarıyla DOM'da element seçme, metin ve class güncelleme, textContent–innerText farkı ve innerHTML için güvenlik notları. Pratik örnekler","javascript başlangıç kodları, document.querySelector, innerText, textContent, classList, DOM güncelleme örnekleri, querySelectorAll","domda-element-secme-ve-guncelleme-pratik-javascript-ornekleri","2026-03-09T14:56:23.000Z",{"id":16,"title":17,"slug":18},204,"JavaScript DOM Manipülasyonu","javascript-dom-manipulasyonu",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/77c6f9b04106dd5e43b072000829e4b5.jpg","/media/blog/77c6f9b04106dd5e43b072000829e4b5_thumb.jpg","/media/blog/77c6f9b04106dd5e43b072000829e4b5.webp","/media/blog/77c6f9b04106dd5e43b072000829e4b5_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},6,1034,0,"6 dk okuma süresi","/blog/javascript-dom-manipulasyonu/domda-element-secme-ve-guncelleme-pratik-javascript-ornekleri",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/77c6f9b04106dd5e43b072000829e4b5.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/domda-element-secme-ve-guncelleme-pratik-javascript-ornekleri",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/javascript-dom-manipulasyonu/domda-element-secme-ve-guncelleme-pratik-javascript-ornekleri",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu",{"@type":102,"position":114,"name":7,"item":65},4]