[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-ile-dom-manipulasyonu-temelleri-baslangic-rehberi-ve-kod-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},21839,"JavaScript ile DOM Manipülasyonu Temelleri: Başlangıç Rehberi ve Kod Örnekleri","JavaScript ile DOM Manipülasyonu temellerini öğrenerek web sayfalarınızı dinamik hale getirin. Temel DOM işlemleri ve kod örnekleriyle hemen başlayın.","\u003Ch1>JavaScript ile DOM Manipülasyonu Temelleri: Başlangıç Rehberi ve Kod Örnekleri\u003C/h1>\u003Cp>Web geliştirme dünyasında, \u003Cstrong>JavaScript\u003C/strong> kullanarak sayfalarınızı daha etkileşimli ve dinamik hale getirmek için \u003Cstrong>DOM Manipülasyonu\u003C/strong> temel bir beceridir. Bu yazıda, \u003Cstrong>Temel DOM işlemleri\u003C/strong> nelerdir, nasıl uygulanır ve pratik \u003Cstrong>Kod örnekleri\u003C/strong> ile nasıl öğrenebilirsiniz, detaylıca ele alacağız.\u003C/p>\u003Ch2>DOM Nedir ve Neden Önemlidir?\u003C/h2>\u003Cp>\u003Cstrong>DOM\u003C/strong> (Document Object Model), bir web sayfasının yapısını temsil eden, HTML ve XML belgelerini nesne tabanlı olarak modelleyen bir arayüzdür. JavaScript ile bu yapıya erişerek, sayfa içeriğini, yapısını ve stilini dinamik olarak değiştirebilirsiniz. Bu sayede kullanıcı deneyimini artırabilir, sayfayı daha interaktif hale getirebilirsiniz.\u003C/p>\u003Ch2>JavaScript ile Temel DOM İşlemleri\u003C/h2>\u003Cp>\u003Cstrong>DOM Manipülasyonu\u003C/strong> yaparken en sık kullanılan temel işlemler şunlardır:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Element Seçme:\u003C/strong> Sayfadaki belirli HTML elemanlarına erişmek için kullanılır.\u003C/li>\u003Cli>\u003Cstrong>İçerik Değiştirme:\u003C/strong> Seçilen elemanın metin veya HTML içeriğini değiştirmek.\u003C/li>\u003Cli>\u003Cstrong>Özellik ve Stil Değiştirme:\u003C/strong> Elemanın özelliklerini (attribute) ve CSS stillerini değiştirmek.\u003C/li>\u003Cli>\u003Cstrong>Element Ekleme ve Silme:\u003C/strong> Yeni elemanlar oluşturmak veya mevcut elemanları kaldırmak.\u003C/li>\u003C/ul>\u003Ch3>Element Seçme Yöntemleri\u003C/h3>\u003Cp>JavaScript'te DOM elemanlarını seçmek için birkaç yöntem vardır:\u003C/p>\u003Cul>\u003Cli>\u003Ccode>document.getElementById('id')\u003C/code>: Belirli bir ID'ye sahip elementi seçer.\u003C/li>\u003Cli>\u003Ccode>document.getElementsByClassName('class')\u003C/code>: Belirli bir sınıfa sahip elementleri seçer.\u003C/li>\u003Cli>\u003Ccode>document.getElementsByTagName('tag')\u003C/code>: Belirli bir etikete sahip elementleri seçer.\u003C/li>\u003Cli>\u003Ccode>document.querySelector('selector')\u003C/code>: CSS seçicisi kullanarak ilk eşleşen elementi seçer.\u003C/li>\u003Cli>\u003Ccode>document.querySelectorAll('selector')\u003C/code>: CSS seçicisi kullanarak tüm eşleşen elementleri seçer.\u003C/li>\u003C/ul>\u003Ch3>İçerik Değiştirme\u003C/h3>\u003Cp>Seçilen elementin içeriğini değiştirmek için \u003Ccode>innerHTML\u003C/code> veya \u003Ccode>textContent\u003C/code> özellikleri kullanılır:\u003C/p>\u003Cpre>\u003Ccode>const element = document.getElementById('baslik');\nelement.innerHTML = 'Yeni Başlık';\n\u003C/code>\u003C/pre>\u003Cp>\u003Ccode>innerHTML\u003C/code> HTML içeriğini değiştirmek için kullanılırken, \u003Ccode>textContent\u003C/code> sadece metin içeriğini değiştirir.\u003C/p>\u003Ch3>Özellik ve Stil Değiştirme\u003C/h3>\u003Cp>Elementlerin özelliklerini değiştirmek için \u003Ccode>setAttribute\u003C/code> veya doğrudan özellik ataması yapılabilir:\u003C/p>\u003Cpre>\u003Ccode>const link = document.querySelector('a');\nlink.setAttribute('href', 'https://www.example.com');\nlink.style.color = 'red';\n\u003C/code>\u003C/pre>\u003Cp>Bu örnekte, bir bağlantının URL'si değiştirilmiş ve metin rengi kırmızı yapılmıştır.\u003C/p>\u003Ch3>Element Ekleme ve Silme\u003C/h3>\u003Cp>Yeni element oluşturmak için \u003Ccode>document.createElement\u003C/code> kullanılır ve ardından DOM'a eklenir:\u003C/p>\u003Cpre>\u003Ccode>const yeniParagraf = document.createElement('p');\nyeniParagraf.textContent = 'Bu yeni bir paragraf.';\ndocument.body.appendChild(yeniParagraf);\n\u003C/code>\u003C/pre>\u003Cp>Bir elementi silmek için ise \u003Ccode>remove()\u003C/code> metodu kullanılır:\u003C/p>\u003Cpre>\u003Ccode>const silinecekElement = document.getElementById('eski');\nsilinecekElement.remove();\n\u003C/code>\u003C/pre>\u003Ch2>Pratik Kod Örnekleri ile DOM Manipülasyonu\u003C/h2>\u003Cp>Aşağıda, \u003Cstrong>JavaScript\u003C/strong> ile yapılan bazı temel \u003Cstrong>DOM Manipülasyonu\u003C/strong> örneklerini bulabilirsiniz:\u003C/p>\u003Ch3>1. Butona Tıklayınca Metin Değiştirme\u003C/h3>\u003Cpre>\u003Ccode>const buton = document.getElementById('degistirButon');\nbuton.addEventListener('click', function() {\n  const yazi = document.getElementById('yazi');\n  yazi.textContent = 'Metin değiştirildi!';\n});\n\u003C/code>\u003C/pre>\u003Ch3>2. Listeye Yeni Eleman Ekleme\u003C/h3>\u003Cpre>\u003Ccode>const liste = document.getElementById('liste');\nconst yeniEleman = document.createElement('li');\nyeniEleman.textContent = 'Yeni Liste Elemanı';\nliste.appendChild(yeniEleman);\n\u003C/code>\u003C/pre>\u003Ch3>3. Elementin Stilini Değiştirme\u003C/h3>\u003Cpre>\u003Ccode>const kutu = document.querySelector('.kutu');\nkutu.style.backgroundColor = 'lightblue';\nkutu.style.border = '2px solid blue';\n\u003C/code>\u003C/pre>\u003Ch2>Başlangıç Seviyesi Kod & Snippet Rehberi ile Öğrenmeye Devam Edin\u003C/h2>\u003Cp>\u003Cstrong>JavaScript\u003C/strong> ve \u003Cstrong>DOM Manipülasyonu\u003C/strong> konularında kendinizi geliştirmek için \u003Cstrong>Başlangıç Seviyesi Kod & Snippet Rehberi\u003C/strong> tarafından sunulan rehberler ve kod snippetleri harika bir kaynaktır. Adım adım anlatımlar ve örneklerle, web geliştirme becerilerinizi kolayca ilerletebilirsiniz.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>JavaScript\u003C/strong> ile \u003Cstrong>DOM Manipülasyonu\u003C/strong> web geliştirme sürecinde vazgeçilmez bir yetenektir. Temel DOM işlemleri olan element seçme, içerik değiştirme, stil ve özellik ayarlama, element ekleme ve silme gibi işlemlerle sayfalarınızı dinamik hale getirebilirsiniz. Yukarıdaki \u003Cstrong>Kod örnekleri\u003C/strong> sayesinde, bu işlemleri nasıl yapacağınızı pratik olarak görebilir ve kendi projelerinizde uygulayabilirsiniz. Unutmayın, pratik yapmak ve farklı örnekler üzerinde çalışmak öğrenmenin en etkili yoludur.\u003C/p>\u003Cp>Bu temel bilgilerle başlayarak, web sayfalarınızı kullanıcı dostu ve interaktif hale getirebilir, modern web geliştirme dünyasında önemli bir adım atabilirsiniz.\u003C/p>","2026 Yazılım Öğrenme Rehberi – Programlama Adımları ve Kod Örnekleri","JavaScript ile DOM Manipülasyonu temellerini öğrenin. Temel DOM işlemleri ve kod örnekleri ile web sayfalarınızı dinamik hale getirin.","JavaScript, DOM Manipulasyonu, Temel DOM islemleri, Kod ornekleri, Web Geliirme","javascript-ile-dom-manipulasyonu-temelleri-baslangic-rehberi-ve-kod-ornekleri","2026-03-12T20:35:37.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/dd547ffc6cf56e3d05cc4320d5056a19.jpg","/media/blog/dd547ffc6cf56e3d05cc4320d5056a19_thumb.jpg","/media/blog/dd547ffc6cf56e3d05cc4320d5056a19.webp","/media/blog/dd547ffc6cf56e3d05cc4320d5056a19_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,518,0,"3 dk okuma süresi","/blog/javascript-dom-manipulasyonu/javascript-ile-dom-manipulasyonu-temelleri-baslangic-rehberi-ve-kod-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/dd547ffc6cf56e3d05cc4320d5056a19.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/javascript-ile-dom-manipulasyonu-temelleri-baslangic-rehberi-ve-kod-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/javascript-ile-dom-manipulasyonu-temelleri-baslangic-rehberi-ve-kod-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,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]