[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-secimi-ve-manipulasyon-butonla-icerik-degistirme-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},33500,"DOM Seçimi ve Manipülasyon: Butonla İçerik Değiştirme Örneği","Bu makalede, \u003Cstrong>JavaScript DOM Manipülasyonu\u003C/strong> tekniklerini kullanarak buton ile HTML içerik değiştirme yöntemlerini detaylıca öğrenebilirsiniz. \u003Cstrong>document.querySelector örnek\u003C/strong>leri ve \u003Cstrong>dom manipulation örnekleri\u003C/strong> ile temel kavramlar açıklanmaktadır.","\u003Ch1>DOM Seçimi ve Manipülasyon: Butonla İçerik Değiştirme Örneği\u003C/h1>\u003Cp>\u003Cstrong>JavaScript DOM Manipülasyonu\u003C/strong>, web geliştirme sürecinde kullanıcı etkileşimlerini ve sayfa dinamiklerini yönetmenin temel yollarından biridir. Bu yazıda, \u003Cstrong>javascript dom örnekleri\u003C/strong> üzerinden ilerleyerek, özellikle bir buton kullanarak HTML içerik değiştirme işlemini nasıl yapabileceğinizi ayrıntılı olarak ele alacağız.\u003C/p>\u003Ch2>DOM Nedir ve Neden Önemlidir?\u003C/h2>\u003Cp>DOM (Document Object Model), bir web sayfasının yapısını temsil eden nesne tabanlı bir modeldir. HTML ve XML dokümanlarının tarayıcı tarafından okunabilir ve manipüle edilebilir bir yapıya dönüştürülmesini sağlar. \u003Cstrong>JavaScript DOM Manipülasyonu\u003C/strong> sayesinde, geliştiriciler sayfanın içeriğini, stilini ve yapısını dinamik olarak değiştirebilirler.\u003C/p>\u003Ch2>DOM Seçimi: Temel Yöntemler\u003C/h2>\u003Cp>DOM üzerinde işlem yapmanın ilk adımı, hedef elementlerin seçilmesidir. Bunlar arasında en sık kullanılan yöntemler şunlardır:\u003C/p>\u003Cul>\u003Cli>\u003Ccode>document.getElementById()\u003C/code>: ID ile seçim yapar.\u003C/li>\u003Cli>\u003Ccode>document.getElementsByClassName()\u003C/code>: Sınıf adı ile seçim yapar.\u003C/li>\u003Cli>\u003Ccode>document.getElementsByTagName()\u003C/code>: Etiket adı ile seçim yapar.\u003C/li>\u003Cli>\u003Ccode>document.querySelector()\u003C/code>: CSS seçici kullanarak ilk eşleşeni döndürür.\u003C/li>\u003Cli>\u003Ccode>document.querySelectorAll()\u003C/code>: CSS seçici kullanarak tüm eşleşen elementleri döndürür.\u003C/li>\u003C/ul>\u003Cp>Bu yöntemlerin içinde modern ve esnek yapısıyla \u003Cstrong>document.querySelector örnek\u003C/strong>leri en çok tercih edilenlerdendir.\u003C/p>\u003Ch3>document.querySelector ile Örnek Seçim\u003C/h3>\u003Cp>Örneğin, bir buton elementini seçmek için:\u003C/p>\u003Cpre>\u003Ccode>const button = document.querySelector('button#changeContent');\u003C/code>\u003C/pre>\u003Cp>Burada \u003Ccode>#changeContent\u003C/code> id'sine sahip buton seçilir. CSS seçiciler sayesinde sınıf, etiket veya diğer özelliklerle karmaşık seçimler yapılabilir.\u003C/p>\u003Ch2>Butonla İçerik Değiştirme Örneği\u003C/h2>\u003Cp>Şimdi, bir butona tıklandığında sayfadaki bir paragrafın içeriğini değiştiren basit bir \u003Cstrong>javascript dom örnekleri\u003C/strong> uygulamasını inceleyelim.\u003C/p>\u003Ch3>HTML Kısmı\u003C/h3>\u003Cpre>\u003Ccode><button id=\"changeContent\">İçeriği Değiştir</button>\n<p id=\"text\">Bu, değiştirilecek orijinal içeriktir.</p>\u003C/code>\u003C/pre>\u003Ch3>JavaScript Kısmı\u003C/h3>\u003Cpre>\u003Ccode>const button = document.querySelector('#changeContent');\nconst text = document.querySelector('#text');\n\nbutton.addEventListener('click', () => {\n  text.textContent = 'İçerik başarıyla değiştirildi!';\n});\u003C/code>\u003C/pre>\u003Cp>Burada, \u003Ccode>button\u003C/code> değişkeni buton elementini, \u003Ccode>text\u003C/code> değişkeni ise paragraf elementini temsil eder. Butona her tıklama olayı gerçekleştiğinde, paragrafın metni \u003Cstrong>html içerik değiştirme\u003C/strong> yöntemi olan \u003Ccode>textContent\u003C/code> ile güncellenir.\u003C/p>\u003Ch2>DOM Manipülasyonu İpuçları ve İyi Uygulamalar\u003C/h2>\u003Cul>\u003Cli>\u003Cstrong>Seçicileri optimize edin:\u003C/strong> Gereksiz karmaşık seçiciler performansı düşürebilir. ID ile seçimler hızlıdır.\u003C/li>\u003Cli>\u003Cstrong>Event listener kullanımı:\u003C/strong> Özellikle dinamik içeriklerde, event delegation yöntemini kullanmak faydalıdır.\u003C/li>\u003Cli>\u003Cstrong>Güvenlik:\u003C/strong> İçerik değiştirirken \u003Ccode>innerHTML\u003C/code> kullanımı XSS riskini artırabilir. Mümkünse \u003Ccode>textContent\u003C/code> tercih edin.\u003C/li>\u003Cli>\u003Cstrong>Tarayıcı uyumluluğu:\u003C/strong> Modern tarayıcılar \u003Ccode>querySelector\u003C/code> ve \u003Ccode>addEventListener\u003C/code> destekler, ancak eski tarayıcılar için polyfill gerekebilir.\u003C/li>\u003C/ul>\u003Ch2>Gelişmiş Örnek: Butonla Farklı İçeriklere Geçiş\u003C/h2>\u003Cp>Aşağıdaki örnek, birden fazla buton ve içerik alanı ile dinamik içerik değiştirmeyi gösterir:\u003C/p>\u003Cpre>\u003Ccode><button class=\"tab\" data-content=\"1\">Birinci</button>\n<button class=\"tab\" data-content=\"2\">İkinci</button>\n<div id=\"contentArea\">Birinci içerik burada gösteriliyor.</div>\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode>const tabs = document.querySelectorAll('.tab');\nconst contentArea = document.querySelector('#contentArea');\n\nconst contents = {\n  '1': 'Birinci içerik burada gösteriliyor.',\n  '2': 'İkinci içerik burada gösteriliyor.'\n};\n\ntabs.forEach(tab => {\n  tab.addEventListener('click', () => {\n    const contentId = tab.getAttribute('data-content');\n    contentArea.textContent = contents[contentId];\n  });\n});\u003C/code>\u003C/pre>\u003Cp>Bu yöntemle kullanıcı farklı butonlara tıkladığında, içerik alanı uygun şekilde güncellenir. Bu basit ama etkili \u003Cstrong>dom manipulation örnekleri\u003C/strong>nden biridir.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>JavaScript DOM Manipülasyonu\u003C/strong>, web uygulamalarını daha interaktif ve kullanıcı dostu hale getirmek için vazgeçilmezdir. \u003Cstrong>dom manipulation örnekleri\u003C/strong> ile pratik yaparak, \u003Cstrong>document.querySelector örnek\u003C/strong>lerini öğrenip, \u003Cstrong>html içerik değiştirme\u003C/strong> yöntemlerini kavrayabilirsiniz. Bu sayede 2026 yılında da modern web standartlarıyla uyumlu, etkili ve güvenli kodlama yapabilirsiniz.\u003C/p>\u003Cp>Başlangıç Seviyesi Kod & Snippet Rehberi olarak, özellikle yeni başlayanlara yönelik hazırladığımız içeriklerle bu süreçte yanınızdayız. Daha fazla örnek ve detaylı rehberler için kaynaklarımızı inceleyebilirsiniz.\u003C/p>","Yeni Başlayanlar İçin Yazılım Öğrenme Rehberi – Adım Adım Programlama Öğrenme Rehberi","JavaScript DOM Manipülasyonu ile buton kullanarak html içerik değiştirme ve dom manipulation örnekleri hakkında detaylı rehber.","JavaScript DOM Maniplasyonu, dom manipulation ornekleri, document querySelector ornek, javascript dom ornekleri, html icerik degistirme","dom-secimi-ve-manipulasyon-butonla-icerik-degistirme-ornegi","2026-05-10T15:04:14.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/745a085ddd9f787426affe6d8499cacc.jpg","/media/blog/745a085ddd9f787426affe6d8499cacc_thumb.jpg","/media/blog/745a085ddd9f787426affe6d8499cacc.webp","/media/blog/745a085ddd9f787426affe6d8499cacc_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,518,0,"3 dk okuma süresi","/blog/javascript-dom-manipulasyonu/dom-secimi-ve-manipulasyon-butonla-icerik-degistirme-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/745a085ddd9f787426affe6d8499cacc.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/dom-secimi-ve-manipulasyon-butonla-icerik-degistirme-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-secimi-ve-manipulasyon-butonla-icerik-degistirme-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,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]