[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-manipulasyonu-7-kisa-javascript-ornegi-ile-adim-adim":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},25169,"DOM Manipülasyonu: 7 Kısa JavaScript Örneği ile Adım Adım","Bu rehber, JavaScript DOM Manipülasyonu konusunu 7 kısa ve uygulamalı örnekle adım adım açıklar; element seçme, içerik/stil değiştirme, yeni eleman ekleme ve olay dinleyicileri gibi temel teknikleri kapsar.","\u003Ch2>DOM Manipülasyonu: 7 Kısa JavaScript Örneği ile Adım Adım\u003C/h2>\n\u003Cp>Document Object Model (DOM), bir web sayfasının yapısını nesneler/hiyerarşi olarak temsil eder ve JavaScript ile bu yapı üzerinde değişiklik yaparak sayfaları dinamik hâle getirebilirsiniz. DOM'un ne olduğu ve temel kavramlara giriş için Emre Demir ve 1Kodum'daki özetler faydalıdır (\u003Ca href=\"https://www.emredemir.tech/blog/dom-manipulation\">Emre Demir\u003C/a>, \u003Ca href=\"https://1kodum.com/javascript-dom-nedir/\">1Kodum\u003C/a>).\u003C/p>\n\n\u003Ch3>Hızlı Özet: Sık Kullanılan API'ler\u003C/h3>\n\u003Cp>DOM ile çalışırken yaygın kullanılan yöntemler şunlardır: \u003Cstrong>getElementById\u003C/strong>, \u003Cstrong>getElementsByClassName\u003C/strong>, \u003Cstrong>getElementsByTagName\u003C/strong>, \u003Cstrong>querySelector\u003C/strong>, \u003Cstrong>querySelectorAll\u003C/strong>. İçerik değiştirmek için \u003Cstrong>textContent\u003C/strong>, \u003Cstrong>innerText\u003C/strong> ve \u003Cstrong>innerHTML\u003C/strong>; stil ve sınıf yönetimi için \u003Cstrong>style\u003C/strong> ve \u003Cstrong>classList\u003C/strong>; yeni eleman eklemek için \u003Cstrong>createElement\u003C/strong>, \u003Cstrong>appendChild\u003C/strong>, \u003Cstrong>insertBefore\u003C/strong>; olay eklemek için \u003Cstrong>addEventListener\u003C/strong> kullanılır (\u003Ca href=\"https://www.technopat.net/sosyal/konu/javascript-ile-dom-manipuelasyonu.3244308/\">Technopat\u003C/a>).\u003C/p>\n\n\u003Ch3>Nasıl Başlanır? Kısa Hazırlık\u003C/h3>\n\u003Cul>\n  \u003Cli>Basit bir HTML dosyası açın veya tarayıcı konsolunda test edin.\u003C/li>\n  \u003Cli>Denemeler için şu minimal yapıyı kullanabilirsiniz: \u003Cem><div id=\"app\"></div>\u003C/em>.\u003C/li>\n  \u003Cli>Değişiklikleri doğrudan tarayıcı konsolunda veya ayrı bir .js dosyasında çalıştırın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>7 Kısa Örnek — Her biri adım adım\u003C/h2>\n\n\u003Ch3>1) Element Seçme\u003C/h3>\n\u003Cp>Açıklama: Önce DOM'da hangi öğeyle çalışacağınızı seçmelisiniz. Farklı seçim metodları farklı durumlar için uygundur.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const app = document.getElementById('app');\u003Cbr>const btn = document.querySelector('.btn');\u003Cbr>const items = document.querySelectorAll('li');\u003C/p>\n\u003Cp>Notlar: \u003Cstrong>querySelectorAll\u003C/strong> NodeList döner; üzerinde forEach çalıştırabilirsiniz. \u003Cstrong>getElementsByClassName\u003C/strong> canlı (live) bir HTMLCollection dönebilir; bu farklar davranışı etkileyebilir (\u003Ca href=\"https://www.technopat.net/sosyal/konu/javascript-ile-dom-manipuelasyonu.3244308/\">Technopat\u003C/a>).\u003C/p>\n\n\u003Ch3>2) İçerik Değiştirme\u003C/h3>\n\u003Cp>Açıklama: Metin veya HTML içeriğini değiştirmek için üç yaygın seçenek vardır. Hangi duruma uygun olduğunu bilin.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const title = document.querySelector('h1');\u003Cbr>title.textContent = 'Yeni Başlık';\u003Cbr>title.innerHTML = '<em>Vurgulu</em> Başlık';\u003C/p>\n\u003Cp>İpuçları: \u003Cstrong>textContent\u003C/strong> düz metin ekler; \u003Cstrong>innerHTML\u003C/strong> HTML yorumlanır. Eğer kullanıcıdan gelen veri doğrudan HTML olarak yerleştirilecekse, veri temizlenmeli veya şablonlama tercih edilmelidir; aksi hâlde güvenlikle ilgili sorunlar çıkabilir (\u003Ca href=\"https://www.technopat.net/sosyal/konu/javascript-ile-dom-manipuelasyonu.3244308/\">Technopat\u003C/a>).\u003C/p>\n\n\u003Ch3>3) Stil ve Sınıf Yönetimi\u003C/h3>\n\u003Cp>Açıklama: Tek seferlik stil değişiklikleri için \u003Cstrong>style\u003C/strong>, CSS sınıflarıyla yönetim için \u003Cstrong>classList\u003C/strong> kullanın.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const box = document.querySelector('.box');\u003Cbr>box.style.backgroundColor = 'lightblue';\u003Cbr>box.classList.add('active');\u003Cbr>box.classList.toggle('hidden');\u003C/p>\n\u003Cp>Pratik: Birden fazla stil değişikliği gerektiğinde doğrudan stil atamak yerine sınıf eklemek/çıkarmak genelde daha düzenlidir.\u003C/p>\n\n\u003Ch3>4) Yeni Eleman Oluşturma ve Ekleme\u003C/h3>\n\u003Cp>Açıklama: Dinamik liste veya içerik oluşturmak için element yaratıp DOM'a ekleyin.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const li = document.createElement('li');\u003Cbr>li.textContent = 'Yeni öğe';\u003Cbr>document.querySelector('#list').appendChild(li);\u003C/p>\n\u003Cp>İleri seviye: Birden çok öğe ekliyorsanız \u003Cstrong>DocumentFragment\u003C/strong> kullanmak performansı iyileştirir çünkü bir kerede tek append yapılır.\u003C/p>\n\n\u003Ch3>5) Olay Dinleyicileri (Event Listeners)\u003C/h3>\n\u003Cp>Açıklama: Kullanıcı etkileşimleri için \u003Cstrong>addEventListener\u003C/strong> kullanın; olay delegasyonu büyük DOM listelerinde avantaj sağlar.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const btn = document.querySelector('#save');\u003Cbr>btn.addEventListener('click', (e) => {\u003Cbr>  e.preventDefault();\u003Cbr>  console.log('Kaydet tıklandı');\u003Cbr>});\u003C/p>\n\u003Cp>Delegasyon örneği: Çok sayıda öğe için ana kapsayıcıya tek bir click dinleyicisi ekleyip \u003Cstrong>event.target.matches('.item')\u003C/strong> ile hedefi kontrol etmek performans ve yönetim açısından faydalıdır (\u003Ca href=\"https://legalyazilim.com/javascript-dom-manipulasyonu-ve-olaylar-events/\">Legal Yazılım\u003C/a>).\u003C/p>\n\n\u003Ch3>6) Form Verisi Okuma ve Basit Doğrulama\u003C/h3>\n\u003Cp>Açıklama: Form gönderiminde veriyi alıp kontrol etmek ve gerektiğinde gönderimi engellemek sık yapılan bir işlemdir.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const form = document.querySelector('#form');\u003Cbr>form.addEventListener('submit', (e) => {\u003Cbr>  e.preventDefault();\u003Cbr>  const name = form.querySelector('input[name=\"name\"]').value; \u003Cbr>  if (!name.trim()) { alert('İsim gerekli'); return; }\u003Cbr>  console.log('Gönderiliyor:', name);\u003Cbr>});\u003C/p>\n\u003Cp>Uyarı: Tarayıcı taraflı doğrulama kullanıcı deneyimi için iyidir; ancak sunucu tarafında da doğrulama yapılmalıdır.\u003C/p>\n\n\u003Ch3>7) Eleman Kaldırma ve Yeniden Düzenleme\u003C/h3>\n\u003Cp>Açıklama: Bir öğeyi kaldırmak veya başka bir konuma taşımak gerektiğinde DOM API'sini kullanın.\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003Cbr>const item = document.querySelector('.to-remove');\u003Cbr>item.remove();\u003Cbr>// Alternatif: item.parentNode.removeChild(item);\u003C/p>\n\u003Cp>Açıklama: remove() modern tarayıcılarda çalışır; daha eski destek gerekiyorsa parentNode.removeChild kullanımı bir alternatiftir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>İyi Uygulamalar (Checklist)\u003C/h3>\n\u003Cul>\n  \u003Cli>Seçimleri önbelleğe alın: aynı öğeyi tekrar tekrar seçmek yerine bir değişkene atayın.\u003C/li>\n  \u003Cli>DOM yazma işlemlerini gruplayın: önce veri hazırlayın, sonra tek seferde DOM'a yansıtın (DocumentFragment faydalı).\u003C/li>\n  \u003Cli>innerHTML yerine \u003Cstrong>textContent\u003C/strong> kullanın; gerçekten HTML gerekiyorsa girdi temizlenmeli veya güvenli şablonlama tercih edilmelidir.\u003C/li>\n  \u003Cli>Büyük listelerde olay delegasyonu kullanın.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Hata Ayıklama ve Performans İpuçları\u003C/h3>\n\u003Cp>Tarayıcı geliştirici araçlarını (Elements, Console, Performance) kullanarak DOM değişikliklerinin etkisini izleyin. console.log ile ara değerleri kontrol edebilir, breakpoint ile fonksiyon akışını inceleyebilirsiniz. Çok sayıda stil değişikliği yaparken yeniden akış (reflow) ve yeniden çizim (repaint) maliyetlerini azaltmaya çalışın.\u003C/p>\n\n\u003Ch3>Kaynakça ve İleri Okuma\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.technopat.net/sosyal/konu/javascript-ile-dom-manipuelasyonu.3244308/\">Rehber: JavaScript ile DOM Manipülasyonu — Technopat\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.emredemir.tech/blog/dom-manipulation\">JavaScript'de DOM Manipulation nedir? — Emre Demir\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://legalyazilim.com/javascript-dom-manipulasyonu-ve-olaylar-events/\">Javascript Dom Manipülasyonu ve Olaylar — Legal Yazılım\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://1kodum.com/javascript-dom-nedir/\">JavaScript DOM Nedir? — 1Kodum\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Sık Sorulan Sorular\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>DOM ile veri depolamak güvenli midir?\u003C/strong>\n    \u003Cp>DOM, kullanıcı arayüzü için uygundur ancak hassas verileri (şifre, kredi kartı vb.) doğrudan DOM'da tutmaktan kaçının; bu tür veriler güvenli saklama çözümlerinde olmalıdır.\u003C/p>\n  \u003C/li>\n  \u003Cli>\u003Cstrong>querySelector ile getElementById arasındaki fark nedir?\u003C/strong>\n    \u003Cp>querySelector CSS seçici sözdizimini destekler ve ilk eşleşeni döndürür; getElementById ise id ile doğrudan erişim sağlar ve daha hızlı olabilir. İhtiyaca göre her ikisi de kullanılabilir.\u003C/p>\n  \u003C/li>\n  \u003Cli>\u003Cstrong>innerHTML ne zaman tercih edilmeli?\u003C/strong>\n    \u003Cp>HTML yapısını dinamik oluşturmak gerekiyorsa innerHTML kullanılabilir; ancak kullanıcı girdisi içeriyorsa girdi öncesi temizleme veya şablonlama tercih edilmelidir.\u003C/p>\n  \u003C/li>\n\u003C/ul>\n","JavaScript DOM Manipülasyonu — 7 Kısa Örnekle Adım Adım Reh­","JavaScript DOM Manipülasyonu'nun temellerini öğrenin: element seçme, içerik ve stil değiştirme, yeni eleman ekleme ve olay dinleyicileri dahil 7 kısa örnekle ad","JavaScript DOM Manipülasyonu, javascript dom örnekleri, element seçme değiştirme, dom event örnekleri, adım adım dom manipülasyonu","dom-manipulasyonu-7-kisa-javascript-ornegi-ile-adim-adim","2026-04-06T19:43:19.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/bdb316d94bb291de69f3f2a2af21aea5.jpg","/media/blog/bdb316d94bb291de69f3f2a2af21aea5_thumb.jpg","/media/blog/bdb316d94bb291de69f3f2a2af21aea5.webp","/media/blog/bdb316d94bb291de69f3f2a2af21aea5_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,764,0,"4 dk okuma süresi","/blog/javascript-dom-manipulasyonu/dom-manipulasyonu-7-kisa-javascript-ornegi-ile-adim-adim",[],["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/bdb316d94bb291de69f3f2a2af21aea5.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/dom-manipulasyonu-7-kisa-javascript-ornegi-ile-adim-adim",{"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-7-kisa-javascript-ornegi-ile-adim-adim",["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}]