[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-ile-etkilesim-8-pratik-javascript-ornegi":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},40033,"DOM ile Etkileşim: 8 Pratik JavaScript Örneği","Bu makale, kodlama yapısı örnekleri bağlamında DOM (Document Object Model) ile nasıl etkileşim kuracağınızı gösterir; 8 pratik JavaScript örneği, kısa açıklamalar ve uygulanabilir ipuçları içerir.","\u003Ch2>Giriş: DOM nedir ve neden önemli?\u003C/h2>\n\u003Cp>DOM (Document Object Model), bir web sayfasının yapısını JavaScript tarafından okunup değiştirilebilen bir ağaç halinde temsil eder. Bu temsil, sayfadaki öğeleri seçmeyi, içeriği güncellemeyi, yeni eleman eklemeyi veya var olanları silmeyi mümkün kılar. Temel tanım ve yöntemler için \u003Ca href=\"https://learn.programmingline.com/learn/js/js-dom-manipulation\">Programming Line\u003C/a> ve \u003Ca href=\"https://kissjs.com/learn/dom/manipulation\">KissJS\u003C/a> kaynaklarına bakabilirsiniz.\u003C/p>\n\n\u003Ch2>Temel kavramlar\u003C/h2>\n\u003Cp>DOM manipülasyonuna başlamadan önce birkaç terime aşina olun:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Document\u003C/strong>: Sayfanın kök düğümü, genellikle \u003Cem>document\u003C/em> üzerinden erişilir.\u003C/li>\n  \u003Cli>\u003Cstrong>Element\u003C/strong>: HTML etiketlerinin temsilcileri (ör. div, button).\u003C/li>\n  \u003Cli>\u003Cstrong>NodeList / HTMLCollection\u003C/strong>: querySelectorAll gibi metotların döndürdüğü öğe listeleri.\u003C/li>\n  \u003Cli>\u003Cstrong>Event\u003C/strong>: Kullanıcı etkileşimleri (click, input vb.) ve bunlara verilen yanıtlar.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>8 Pratik JavaScript Örneği\u003C/h2>\n\n\u003Ch3>1) Öğeleri seçme — getElementById, querySelector, querySelectorAll\u003C/h3>\n\u003Cp>Öğeleri seçmenin hızlı yolları:\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const btn = document.getElementById('saveBtn');\u003Cbr>const firstItem = document.querySelector('.item');\u003Cbr>const items = document.querySelectorAll('.item');\u003C/p>\n\u003Cp>Not: \u003Cem>querySelectorAll\u003C/em> bir NodeList döndürür; tekrar eden işlemler için \u003Cstrong>Array.from(items)\u003C/strong> ile diziye çevirebilirsiniz. Bu seçme yöntemleri, dom manipülasyonu sırasında başlangıç adımıdır.\u003C/p>\n\n\u003Ch3>2) Metin ve HTML içeriğini değiştirme — textContent vs innerHTML\u003C/h3>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const title = document.querySelector('.title');\u003Cbr>title.textContent = 'Yeni Başlık';\u003C/p>\n\u003Cp>\u003Cem>textContent\u003C/em> yalnızca metni değiştirir ve DOM içinde HTML olarak yorumlanmaz. Eğer HTML içeriği eklemeniz gerekiyorsa \u003Cem>innerHTML\u003C/em> kullanılabilir, ancak kullanıcı kaynaklı veriyi doğrudan \u003Cem>innerHTML\u003C/em> ile eklemeden önce mutlaka temizlemelisiniz; aksi halde XSS gibi güvenlik riskleri ortaya çıkabilir. Daha fazla detay için \u003Ca href=\"https://www.freecodecamp.org/news/javascript-document-object-model-explained\">freeCodeCamp\u003C/a> makalesine bakabilirsiniz.\u003C/p>\n\n\u003Ch3>3) Sınıf yönetimi — classList ile add/remove/toggle\u003C/h3>\n\u003Cp>CSS sınıflarını yönetmek için \u003Cem>classList\u003C/em> en pratik yoldur.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const box = document.querySelector('.box');\u003Cbr>box.classList.add('active');\u003Cbr>box.classList.toggle('hidden');\u003C/p>\n\u003Cp>Bu yöntem, stil değişikliklerini JavaScript ile kontrol etmenin temiz ve performanslı yoludur.\u003C/p>\n\n\u003Ch3>4) Yeni element oluşturma ve ekleme — createElement, appendChild\u003C/h3>\n\u003Cp>Dinamik içerik eklemek için yeni bir element oluşturup DOM'a ekleyebilirsiniz.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const li = document.createElement('li');\u003Cbr>li.textContent = 'Yeni öğe';\u003Cbr>document.querySelector('#list').appendChild(li);\u003C/p>\n\u003Cp>Çok sayıda öğe ekliyorsanız, \u003Cem>DocumentFragment\u003C/em> kullanmak yeniden hesaplamaları azaltarak performansı iyileştirir.\u003C/p>\n\n\u003Ch3>5) Element silme — remove ve parent.removeChild\u003C/h3>\n\u003Cp>Bir öğeyi DOM'dan kaldırmanın iki yaygın yöntemi vardır:\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const element = document.querySelector('.to-remove');\u003Cbr>// Modern yöntem\u003Cbr>element.remove();\u003Cbr>// Veya eski yöntem\u003Cbr>element.parentNode.removeChild(element);\u003C/p>\n\u003Cp>Her iki yöntem de belirli durumlarda kullanışlıdır; modern tarayıcılarda \u003Cem>remove()\u003C/em> doğrudan işinizi görür.\u003C/p>\n\n\u003Ch3>6) Olay dinleyicileri — addEventListener ile davranış ekleme\u003C/h3>\n\u003Cp>Buton tıklamaları veya form gönderimleri gibi olayları yakalamak için \u003Cem>addEventListener\u003C/em> kullanılır.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const btn = document.getElementById('saveBtn');\u003Cbr>btn.addEventListener('click', function(event) {\u003Cbr>  // event nesnesini kullanarak işlem yapın\u003Cbr>  console.log('Kaydet tuşuna basıldı');\u003Cbr>});\u003C/p>\n\u003Cp>Olay nesnesi (event) içinde ilgili hedef ve varsayılan davranış gibi bilgilere erişebilirsiniz.\u003C/p>\n\n\u003Ch3>7) Olay delegasyonu — parent üzerinden yönetim\u003C/h3>\n\u003Cp>Bir liste veya tablo gibi çok sayıda benzer öğe için ayrı ayrı dinleyici atamak yerine, ortak bir üst öğeye tek bir dinleyici koyup \u003Cem>event.target\u003C/em> ile hedefi kontrol etmek daha verimlidir.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const list = document.getElementById('list');\u003Cbr>list.addEventListener('click', function(e) {\u003Cbr>  if (e.target && e.target.matches('li')) {\u003Cbr>    console.log('Liste öğesine tıklama:', e.target.textContent);\u003Cbr>  }\u003Cbr>});\u003C/p>\n\u003Cp>Bu yöntem, dinamizm içeren arayüzlerde bellek kullanımını azaltır ve yeni eklenen öğeler için ekstra kod yazmayı gereksiz kılar.\u003C/p>\n\n\u003Ch3>8) Form etkileşimi ve ön doğrulama — preventDefault ve FormData\u003C/h3>\n\u003Cp>Form gönderimini yakalayıp JavaScript ile işlemek için:\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const form = document.getElementById('contactForm');\u003Cbr>form.addEventListener('submit', function(e) {\u003Cbr>  e.preventDefault(); // gönderimi durdurur\u003Cbr>  const data = new FormData(this);\u003Cbr>  const name = data.get('name');\u003Cbr>  // sunucuya AJAX ile gönderme veya ek kontrol\u003Cbr>});\u003C/p>\n\u003Cp>Form verilerini \u003Cem>FormData\u003C/em> ile almak, dosya ve metin alanlarını kolayca yönetmeyi sağlar.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>İyi uygulamalar ve performans ipuçları\u003C/h2>\n\u003Cul>\n  \u003Cli>Seçimleri yeniden kullanın: Aynı öğeyi tekrar tekrar seçmek yerine bir değişkene atayın.\u003C/li>\n  \u003Cli>Toplu güncellemeler için \u003Cem>DocumentFragment\u003C/em> veya bir tek parent üzerinde değişiklik yapın.\u003C/li>\n  \u003Cli>Çok sık çalışan olaylar (örn. scroll, input) için debouncing veya throttling uygulayın.\u003C/li>\n  \u003Cli>\u003Cem>innerHTML\u003C/em> kullanırken kullanıcı verisini sanitize edin; aksi halde güvenlik riski olabilir.\u003C/li>\n  \u003Cli>Event delegation ile gereksiz event listener'ları azaltın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hızlı kontrol listesi (deploy öncesi)\u003C/h2>\n\u003Cul>\n  \u003Cli>Seçimler doğru ve tekil mi? (ID için getElementById, birden çok öğe için querySelectorAll).\u003C/li>\n  \u003Cli>innerHTML kullanıyorsanız veri temizlenmiş mi?\u003C/li>\n  \u003Cli>Performans için gereksiz yeniden boyama/reflow önlendi mi?\u003C/li>\n  \u003Cli>Event listener'lar hafızada sızıntı yaratmayacak şekilde kaldırılıyor mu?\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kaynaklar ve ileri okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://learn.programmingline.com/learn/js/js-dom-manipulation\">JavaScript DOM Manipulation Explained — Programming Line\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://kissjs.com/learn/dom/manipulation\">DOM Manipulation in JavaScript — KissJS\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.freecodecamp.org/news/javascript-document-object-model-explained\">How to Manipulate the DOM in JavaScript — freeCodeCamp\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cstrong>Not:\u003C/strong> Bu makaledeki örnekler öğrenme amaçlıdır; üretim ortamında kullanmadan önce tarayıcı desteği, erişilebilirlik ve güvenlik kontrollerini uygulayın.\u003C/p>","DOM ile Etkileşim: 8 Pratik JavaScript Örneği — Kodlama Yapı","Bu rehber, kodlama yapısı örnekleri üzerinden DOM manipülasyonunun temel yöntemlerini ve 8 pratik JavaScript uygulamasını adım adım açıklar. Örnekler, seçme, ek","kodlama yapısı örnekleri, dom manipülasyonu, js dom örnekleri, element seçme ve olay yönetimi, event listener örnekleri","dom-ile-etkilesim-8-pratik-javascript-ornegi","2026-11-02T15:11:10.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/eb42469a0888885121483386bd0a46c6.jpg","/media/blog/eb42469a0888885121483386bd0a46c6_thumb.jpg","/media/blog/eb42469a0888885121483386bd0a46c6.webp","/media/blog/eb42469a0888885121483386bd0a46c6_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,671,0,"4 dk okuma süresi","/blog/javascript-dom-manipulasyonu/dom-ile-etkilesim-8-pratik-javascript-ornegi",[],["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/eb42469a0888885121483386bd0a46c6.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/dom-ile-etkilesim-8-pratik-javascript-ornegi",{"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-ile-etkilesim-8-pratik-javascript-ornegi",["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}]