[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-ile-dom-manipulasyonuna-giris-temel-islemler-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},30511,"JavaScript ile DOM Manipülasyonuna Giriş: Temel İşlemler ve Örnekler","JavaScript kullanarak DOM manipülasyonunun temel kavramlarını ve işlemlerini öğrenin. Başlangıç seviyesindeki örneklerle web sayfalarınızı dinamik hale getirin.","\u003Ch1>JavaScript ile DOM Manipülasyonuna Giriş\u003C/h1>\u003Cp>Web geliştirme dünyasında, \u003Cstrong>JavaScript\u003C/strong> ve \u003Cstrong>DOM\u003C/strong> (Document Object Model) birlikte kullanılarak web sayfalarının dinamik ve etkileşimli hale getirilmesi sağlanır. \u003Cstrong>DOM manipülasyon\u003C/strong> işlemleri, sayfa içeriğini, yapısını ve stilini programatik olarak değiştirmeye olanak tanır. Bu yazıda, \u003Cstrong>başlangıç\u003C/strong> seviyesinde \u003Cstrong>JavaScript\u003C/strong> ile \u003Cstrong>DOM\u003C/strong> manipülasyonunun temel işlemlerini ve örneklerini keşfedeceğiz.\u003C/p>\u003Ch2>DOM Nedir?\u003C/h2>\u003Cp>\u003Cstrong>DOM\u003C/strong>, bir web sayfasının yapısını temsil eden ağaç benzeri bir modeldir. HTML belgeleri, bu modelde düğümler (node) olarak gösterilir ve JavaScript aracılığıyla bu düğümlere erişip üzerinde değişiklik yapabiliriz. Böylece sayfa içeriğini dinamik olarak değiştirmek, yeni elemanlar eklemek veya mevcutları kaldırmak mümkün olur.\u003C/p>\u003Ch2>JavaScript ile DOM Manipülasyonunun Temel İşlemleri\u003C/h2>\u003Cp>\u003Cstrong>DOM manipülasyon\u003C/strong> işlemleri genellikle şu adımları içerir:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Eleman Seçimi:\u003C/strong> Sayfa üzerindeki belirli bir HTML elemanına erişmek.\u003C/li>\u003Cli>\u003Cstrong>Eleman İçeriği ve Özelliklerini Değiştirme:\u003C/strong> Seçilen elemanın içeriğini, stilini veya diğer özelliklerini değiştirmek.\u003C/li>\u003Cli>\u003Cstrong>Yeni Eleman Oluşturma ve Ekleme:\u003C/strong> Sayfaya yeni HTML elemanları eklemek.\u003C/li>\u003Cli>\u003Cstrong>Eleman Silme:\u003C/strong> Mevcut elemanları sayfadan kaldırmak.\u003C/li>\u003C/ul>\u003Ch3>Eleman Seçimi\u003C/h3>\u003Cp>DOM üzerinde işlem yapabilmek için öncelikle hedef elemanı seçmemiz gerekir. JavaScript'te bunun için çeşitli yöntemler bulunur:\u003C/p>\u003Cul>\u003Cli>\u003Ccode>document.getElementById('id')\u003C/code>: Belirtilen id'ye sahip elemanı seçer.\u003C/li>\u003Cli>\u003Ccode>document.getElementsByClassName('class')\u003C/code>: Belirtilen sınıfa sahip tüm elemanları seçer.\u003C/li>\u003Cli>\u003Ccode>document.getElementsByTagName('tag')\u003C/code>: Belirtilen etikete sahip tüm elemanları seçer.\u003C/li>\u003Cli>\u003Ccode>document.querySelector('selector')\u003C/code>: CSS seçicisi ile ilk eşleşen elemanı seçer.\u003C/li>\u003Cli>\u003Ccode>document.querySelectorAll('selector')\u003C/code>: CSS seçicisi ile tüm eşleşen elemanları seçer.\u003C/li>\u003C/ul>\u003Ch3>Eleman İçeriği ve Özelliklerini Değiştirme\u003C/h3>\u003Cp>Seçilen elemanın içeriğini değiştirmek için \u003Ccode>innerHTML\u003C/code> veya \u003Ccode>textContent\u003C/code> özellikleri kullanılır. Ayrıca stil ve diğer özellikler de değiştirilebilir:\u003C/p>\u003Cul>\u003Cli>\u003Ccode>element.innerHTML = 'Yeni içerik';\u003C/code>\u003C/li>\u003Cli>\u003Ccode>element.textContent = 'Yeni metin';\u003C/code>\u003C/li>\u003Cli>\u003Ccode>element.style.color = 'red';\u003C/code>\u003C/li>\u003Cli>\u003Ccode>element.setAttribute('class', 'yeni-sinif');\u003C/code>\u003C/li>\u003C/ul>\u003Ch3>Yeni Eleman Oluşturma ve Ekleme\u003C/h3>\u003Cp>Yeni bir HTML elemanı oluşturmak için \u003Ccode>document.createElement()\u003C/code> kullanılır. Oluşturulan eleman, \u003Ccode>appendChild()\u003C/code> veya \u003Ccode>insertBefore()\u003C/code> gibi yöntemlerle DOM'a eklenir:\u003C/p>\u003Cpre>\u003Ccode>const yeniDiv = document.createElement('div');\nyeniDiv.textContent = 'Merhaba Dünya!';\ndocument.body.appendChild(yeniDiv);\n\u003C/code>\u003C/pre>\u003Ch3>Eleman Silme\u003C/h3>\u003Cp>Bir elemanı DOM'dan kaldırmak için \u003Ccode>removeChild()\u003C/code> veya modern tarayıcılarda doğrudan \u003Ccode>element.remove()\u003C/code> kullanılabilir:\u003C/p>\u003Cpre>\u003Ccode>const silinecekEleman = document.getElementById('eskiDiv');\nsilinecekEleman.remove();\n\u003C/code>\u003C/pre>\u003Ch2>Basit Bir Örnek: Butona Tıklayınca Metin Değiştirme\u003C/h2>\u003Cp>Aşağıdaki örnek, bir butona tıklandığında bir paragrafın içeriğini değiştiren basit bir \u003Cstrong>DOM manipülasyon\u003C/strong> örneğidir:\u003C/p>\u003Cpre>\u003Ccode><button id=\"degistirBtn\">Metni Değiştir</button>\n<p id=\"paragraf\">Bu metin değişecek.</p>\n\n<script>\n  const buton = document.getElementById('degistirBtn');\n  const paragraf = document.getElementById('paragraf');\n\n  buton.addEventListener('click', function() {\n    paragraf.textContent = 'Metin başarıyla değiştirildi!';\n  });\n</script>\n\u003C/code>\u003C/pre>\u003Ch2>Başlangıç Seviyesi İçin İpuçları\u003C/h2>\u003Cp>\u003Cstrong>JavaScript\u003C/strong> ile \u003Cstrong>DOM\u003C/strong> manipülasyonuna yeni başlayanlar için bazı öneriler:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Küçük adımlarla ilerleyin:\u003C/strong> Öncelikle eleman seçme ve içerik değiştirme gibi temel işlemleri öğrenin.\u003C/li>\u003Cli>\u003Cstrong>Tarayıcı konsolunu kullanın:\u003C/strong> Hataları görmek ve kodu test etmek için tarayıcı geliştirici araçlarını kullanın.\u003C/li>\u003Cli>\u003Cstrong>Etkinlik dinleyicileri ekleyin:\u003C/strong> Kullanıcı etkileşimlerini yakalamak için \u003Ccode>addEventListener\u003C/code> metodunu öğrenin.\u003C/li>\u003Cli>\u003Cstrong>Temiz ve anlaşılır kod yazın:\u003C/strong> Kodunuzu modüler ve okunabilir tutmaya özen gösterin.\u003C/li>\u003C/ul>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>JavaScript\u003C/strong> ile \u003Cstrong>DOM manipülasyon\u003C/strong> temel web geliştirme becerilerinden biridir. Sayfa içeriğini dinamik olarak değiştirmek, kullanıcı deneyimini artırmak için vazgeçilmezdir. Bu yazıda ele aldığımız temel işlemler ve örnekler, \u003Cstrong>başlangıç\u003C/strong> seviyesindeki geliştiricilerin \u003Cstrong>DOM\u003C/strong> manipülasyonuna sağlam bir giriş yapmasını sağlar. Daha ileri seviyede, animasyonlar, AJAX işlemleri ve framework kullanımları ile bu beceriler genişletilebilir.\u003C/p>\u003Cp>Başlangıç Seviyesi Kod & Snippet Rehberi olarak, \u003Cstrong>JavaScript\u003C/strong> ve \u003Cstrong>DOM\u003C/strong> manipülasyonu konusunda rehberlik eden kod snippetleri ve öğretici içerikler sunuyoruz. Bu sayede öğrenme süreciniz daha hızlı ve etkili hale gelir.\u003C/p>","Yazılım Öğrenme Rehberi – Adım Adım Programlama ve Başlangıç Düzeyi Kod Rehberi","JavaScript ile DOM manipülasyonunun temel işlemlerini öğrenin. Başlangıç seviyesinde örneklerle web sayfalarınızı dinamik hale getirin.","JavaScript, DOM, manipilasyon, temel islemler, baslangic, web gelistirme, kodlama","javascript-ile-dom-manipulasyonuna-giris-temel-islemler-ve-ornekler","2026-04-27T04:29:44.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/8a6d583858b4b22d116af903eb75be24.jpg","/media/blog/8a6d583858b4b22d116af903eb75be24_thumb.jpg","/media/blog/8a6d583858b4b22d116af903eb75be24.webp","/media/blog/8a6d583858b4b22d116af903eb75be24_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,510,0,"3 dk okuma süresi","/blog/javascript-dom-manipulasyonu/javascript-ile-dom-manipulasyonuna-giris-temel-islemler-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/8a6d583858b4b22d116af903eb75be24.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/javascript-ile-dom-manipulasyonuna-giris-temel-islemler-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/javascript-ile-dom-manipulasyonuna-giris-temel-islemler-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,112],{"@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":30,"name":17,"item":111},"https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu",{"@type":102,"position":113,"name":7,"item":65},4]