[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-manipulasyonu-oge-secme-icerik-guncelleme-ve-ornekler":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},33393,"DOM Manipülasyonu: Öğe Seçme, İçerik Güncelleme ve Örnekler","Bu makale, JavaScript ile DOM (Document Object Model) manipülasyonunun temel kavramlarını ve pratik kullanımını açıklar. Öğeleri nasıl seçeceğinizi, içerik güncelleme yöntemlerini (textContent ve innerHTML), öğe ekleme/silme işlemlerini ve gerçek dünya örnekleriyle adım adım uygulamaları gösterir.","\u003Ch2>Giriş: DOM nedir ve neden önemlidir?\u003C/h2>\n\u003Cp>DOM (Document Object Model), bir web sayfasının yapısını ağaç biçiminde temsil eden nesne modelidir. JavaScript ile DOM üzerinde işlem yaparak sayfayı dinamik hale getirebilir, kullanıcı etkileşimlerine göre içerik değiştirebilir veya yeni öğeler ekleyebilirsiniz. Temel tanım ve yaklaşım için bkz. Codecademy'nin DOM açıklaması.\u003C/p>\n\u003Cp>DOM öğelerini seçmek, değiştirmek ve yönetmek modern web geliştirmenin sık yapılan görevlerindendir; bu işlemler kullanıcı deneyimini zenginleştirir ve sayfayı interaktif hâle getirir.\u003C/p>\n\u003Cp>\u003Cstrong>Kaynak:\u003C/strong> \u003Ca href=\"https://www.codecademy.com/resources/docs/javascript/dom-manipulation\">JavaScript DOM Manipulation — Codecademy\u003C/a>\u003C/p>\n\n\u003Ch2>Öğe seçme yöntemleri\u003C/h2>\n\u003Cp>DOM'da öğe seçmek için birden çok yöntem vardır. Doğru seçim yöntemi, hedeflediğiniz öğenin yapısına ve performans gereksinimlerinize bağlıdır. Aşağıda yaygın yöntemler ve kısa açıklamaları yer alıyor.\u003C/p>\n\n\u003Ch3>getElementById()\u003C/h3>\n\u003Cp>ID ile tek bir öğeyi seçer. En hızlı ve doğrudan yöntemlerden biridir; aynı sayfada tekil ID kullanımı varsayımına dayanır.\u003C/p>\n\u003Cblockquote>const baslik = document.getElementById('baslik');\u003C/blockquote>\n\u003Cp>Bu yöntem, sayfada ilgili ID varsa o öğeyi döner. Birden fazla öğede aynı ID olmamalıdır.\u003C/p>\n\n\u003Ch3>getElementsByClassName() ve getElementsByTagName()\u003C/h3>\n\u003Cp>Bu yöntemler canlı HTMLCollection döner; yani DOM değişirse koleksiyon güncellenir. Sınıf adı veya etiket adına göre seçime uygundur.\u003C/p>\n\u003Cblockquote>const kartlar = document.getElementsByClassName('card');\nconst paragraflar = document.getElementsByTagName('p');\u003C/blockquote>\n\n\u003Ch3>querySelector() ve querySelectorAll()\u003C/h3>\n\u003Cp>CSS seçicileri kullanarak öğe seçmeye olanak verir. querySelector ilk eşleşeni, querySelectorAll tüm eşleşenleri (NodeList) döner. Çok yönlü ve okunması kolay bir yaklaşımdır.\u003C/p>\n\u003Cblockquote>const ilkBaslik = document.querySelector('.card .title');\nconst tumBasliklar = document.querySelectorAll('.card .title');\u003C/blockquote>\n\u003Cp>\u003Cstrong>Kaynak:\u003C/strong> \u003Ca href=\"https://www.javascripttutorial.net/javascript-dom/\">JavaScript DOM Tutorial — JavaScript Tutorial\u003C/a>\u003C/p>\n\n\u003Ch2>İçerik güncelleme: textContent vs innerHTML\u003C/h2>\n\u003Cp>Bir öğenin içeriğini değiştirmek için iki sık kullanılan yol vardır: \u003Cstrong>textContent\u003C/strong> ve \u003Cstrong>innerHTML\u003C/strong>. Aralarındaki farkları anlamak önemlidir.\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>textContent\u003C/strong>: Öğenin düz metin içeriğini ayarlar veya okur. HTML etiketlerini metin olarak ekler; içerik HTML olarak işlenmez.\u003C/li>\n  \u003Cli>\u003Cstrong>innerHTML\u003C/strong>: Öğenin HTML içeriğini ayarlar veya okur. HTML stringleri parse edilerek DOM'a dönüştürülür.\u003C/li>\n\u003C/ul>\n\u003Cp>Örnekler:\u003C/p>\n\u003Cblockquote>document.getElementById('baslik').textContent = 'Yeni Başlık';\n// veya\nconst liste = document.getElementById('liste');\nliste.innerHTML = \"<li>İlk öğe</li><li>İkinci öğe</li>\";\u003C/blockquote>\n\u003Cp>innerHTML kullanırken, özellikle kullanıcı girdisini doğrudan ekliyorsanız XSS (cross-site scripting) risklerini göz önünde bulundurun. Güvenilir olmayan verileri doğrudan innerHTML ile eklememek iyi bir uygulamadır.\u003C/p>\n\u003Cp>\u003Cstrong>Kaynak:\u003C/strong> \u003Ca href=\"https://www.javascripttutorial.net/dom/manipulating/\">Manipulating DOM Elements — JavaScript Tutorial\u003C/a>\u003C/p>\n\n\u003Ch2>Öğeler ekleme, taşıma ve silme\u003C/h2>\n\u003Cp>Yeni öğe oluşturmak ve DOM'a eklemek için yaygın adımlar şunlardır:\u003C/p>\n\u003Col>\n  \u003Cli>document.createElement() ile yeni bir öğe oluşturun.\u003C/li>\n  \u003Cli>element.textContent veya element.innerHTML ile içerik ekleyin.\u003C/li>\n  \u003Cli>parent.appendChild() veya parent.insertBefore() ile DOM'a iliştirin.\u003C/li>\n\u003C/ol>\n\u003Cblockquote>const li = document.createElement('li');\nli.textContent = 'Yeni madde';\ndocument.getElementById('liste').appendChild(li);\u003C/blockquote>\n\u003Cp>Bir öğeyi silmek için modern tarayıcılarda \u003Cstrong>element.remove()\u003C/strong> kullanılabilir veya eski yöntemlerle parentNode.removeChild(element) tercih edilir.\u003C/p>\n\n\u003Ch2>Etkileşim örneği: düğme ile içerik değiştirme\u003C/h2>\n\u003Cp>Olay dinleyicileri (event listeners) ile kullanıcı etkileşimlerine tepki verebilirsiniz. Aşağıdaki örnek, bir butona tıklandığında başlığı değiştiren basit bir yaklaşımı gösterir.\u003C/p>\n\u003Cblockquote>const btn = document.getElementById('degistir');\nbtn.addEventListener('click', () => {\n  document.getElementById('baslik').textContent = 'Tıklandı — Başlık güncellendi';\n});\u003C/blockquote>\n\u003Cp>Bu örnek, DOM seçimi, olay bağlama ve içerik güncelleme adımlarını birleştirir.\u003C/p>\n\n\u003Ch2>Performans ve iyi uygulamalar\u003C/h2>\n\u003Cp>DOM manipülasyonları tarayıcı yeniden çizimine (reflow/repaint) neden olabilir. Çok sayıda DOM işlemi gerekiyorsa şu yaklaşımlar performansı artırır:\u003C/p>\n\u003Cul>\n  \u003Cli>Değişiklikleri bir arada uygulamak için DocumentFragment kullanın veya öğeyi belgeden geçici olarak ayırarak güncelleyin.\u003C/li>\n  \u003Cli>querySelector ve benzeri seçicileri gerektiğinde önbelleğe alın; aynı öğeyi tekrar tekrar seçmekten kaçının.\u003C/li>\n  \u003Cli>innerHTML ile büyük HTML blokları eklerken tek bir atama yaparak tekrar tekrar DOM manipülasyonunu azaltın.\u003C/li>\n\u003C/ul>\n\u003Cp>Bu hususlar, kullanıcıya daha akıcı bir deneyim sağlamak için önemlidir.\u003C/p>\n\n\u003Ch2>Adım adım: Basit bir \"Görev Ekle\" örneği\u003C/h2>\n\u003Cp>Aşağıdaki akış, minimal HTML varsayımıyla bir görev ekleme işlevinin mantığını gösterir. (HTML elemanları: input id=\"yeni-gorev\", button id=\"ekleBtn\", ul id=\"gorevListesi\".)\u003C/p>\n\u003Col>\n  \u003Cli>Butona tıklandığında input değerini okuyun: const val = document.getElementById('yeni-gorev').value;\u003C/li>\n  \u003Cli>Yeni bir li öğesi oluşturun: const li = document.createElement('li'); li.textContent = val;\u003C/li>\n  \u003Cli>Listeye ekleyin: document.getElementById('gorevListesi').appendChild(li);\u003C/li>\n  \u003Cli>Input'u temizleyin ve odaklayın: input.value = ''; input.focus();\u003C/li>\n\u003C/ol>\n\u003Cblockquote>document.getElementById('ekleBtn').addEventListener('click', () => {\n  const input = document.getElementById('yeni-gorev');\n  const val = input.value.trim();\n  if (!val) return; // boşsa ekleme yapma\n  const li = document.createElement('li');\n  li.textContent = val;\n  document.getElementById('gorevListesi').appendChild(li);\n  input.value = '';\n  input.focus();\n});\u003C/blockquote>\n\u003Cp>Bu örnek, DOM seçme, yeni öğe oluşturma, içerik atama ve ekleme adımlarını birleştirir. Daha gelişmiş versiyonlarda görev silme, düzenleme veya localStorage ile kalıcılık ekleyebilirsiniz.\u003C/p>\n\n\u003Ch2>Sık yapılan hatalar ve çözümler\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Cstrong>DOM yüklü değilken seçim yapmak:\u003C/strong> Kodun DOMContentLoaded veya window.onload sonrası çalıştığından emin olun.\u003C/li>\n  \u003Cli>\u003Cstrong>Yanlış seçici kullanımı:\u003C/strong> querySelectorAll NodeList döner; döngü veya forEach ile erişin.\u003C/li>\n  \u003Cli>\u003Cstrong>innerHTML ile kullanıcı verisi eklemek:\u003C/strong> Kullanıcı girdisini doğrudan innerHTML ile eklemek XSS riski doğurabilir; mümkünse textContent kullanın.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Cp>\u003Cstrong>Ek kaynaklar ve daha fazla okuma:\u003C/strong> DOM ve manipulasyon teknikleri hakkında derinlemesine kılavuzlar için \u003Ca href=\"https://www.javascripttutorial.net/javascript-dom/\">JavaScript Tutorial\u003C/a> ve \u003Ca href=\"https://www.codecademy.com/resources/docs/javascript/dom-manipulation\">Codecademy\u003C/a> sayfalarına bakabilirsiniz.\u003C/p>\n","JavaScript DOM Manipülasyonu — Öğe Seçme, İçerik Güncelleme,","JavaScript ile DOM manipülasyonu nasıl yapılır: öğe seçme yöntemleri, textContent vs innerHTML, element ekleme/silme ve pratik örneklerle adım adım rehber. Tems","JavaScript DOM Manipülasyonu, element seçme örnekleri, js ile DOM değiştirme, basit programlama örnekleri, querySelector, textContent, innerHTML","dom-manipulasyonu-oge-secme-icerik-guncelleme-ve-ornekler","2026-05-10T12:17:30.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/d1c41e6ba1c0af7e3bbe80ab21365ab0.jpg","/media/blog/d1c41e6ba1c0af7e3bbe80ab21365ab0_thumb.jpg","/media/blog/d1c41e6ba1c0af7e3bbe80ab21365ab0.webp","/media/blog/d1c41e6ba1c0af7e3bbe80ab21365ab0_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,735,0,"4 dk okuma süresi","/blog/javascript-dom-manipulasyonu/dom-manipulasyonu-oge-secme-icerik-guncelleme-ve-ornekler",[],["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/d1c41e6ba1c0af7e3bbe80ab21365ab0.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/dom-manipulasyonu-oge-secme-icerik-guncelleme-ve-ornekler",{"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/dom-manipulasyonu-oge-secme-icerik-guncelleme-ve-ornekler",["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":30,"name":7,"item":65}]