[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-element-secme-sinif-ekleme-ve-icerik-guncelleme-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},26922,"DOM: Element seçme, sınıf ekleme ve içerik güncelleme örnekleri","JavaScript kullanarak DOM elementlerini nasıl seçeceğinizi, sınıf ekleyip kaldıracağınızı ve içerikleri güvenli ve etkili şekilde nasıl güncelleyeceğinizi örneklerle anlatan bir rehber.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Web sayfalarında dinamik değişiklikler yapmak için DOM (Document Object Model) manipülasyonu temel bir tekniktir. DOM, bir sayfanın HTML yapısını ağaç şeklinde temsil eder ve JavaScript ile bu ağaç üzerinden eleman seçme, sınıf yönetimi ve içerik güncelleme işlemleri yapılabilir. Temel kavramları ve pratik örnekleri bu rehberde adım adım göreceksiniz (temel referanslar arasında resmi ve öğretici kaynaklar yer alır).\u003C/p>\n\n\u003Ch2>Temel kavramlar: DOM nedir ve neden önemlidir?\u003C/h2>\n\u003Cp>DOM, tarayıcının yüklediği HTML belgesini programatik olarak gezip değiştirebileceğiniz bir API kümesidir. JavaScript ile DOM üzerinde işlem yaparak sayfa içeriğini, görünümlerini ve etkileşimlerini dinamik hale getirebilirsiniz. Daha fazla teknik arka plan için \u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">TechLead - DOM açıklaması\u003C/a> kaynağına bakabilirsiniz.\u003C/p>\n\n\u003Ch2>Eleman seçme: querySelector ve querySelectorAll\u003C/h2>\n\u003Cp>DOM elemanlarını seçmek için en yaygın kullanılan yöntemler \u003Cstrong>document.querySelector\u003C/strong> ve \u003Cstrong>document.querySelectorAll\u003C/strong> metodlarıdır. Bu metotlar CSS seçicileri kullanır; tek bir eleman almak için querySelector, aynı seçiciyle eşleşen tüm elemanları almak için querySelectorAll kullanılır. W3Schools'ta bu metodların kullanımı örneklerle açıklanmıştır: \u003Ca href=\"https://www.w3schools.com/JsrEF/met_element_queryselector.asp\">W3Schools - querySelector()\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek: Basit eleman seçme\u003C/h3>\n\u003Cblockquote>/* HTML örneği (gösterim için < ve > kaçış karakterleri kullanıldı) */\u003Cbr><div id=\"app\">\u003Cbr>  <h1 id=\"title\">Merhaba</h1>\u003Cbr></div>\u003Cbr>\u003Cbr>/* JavaScript */\u003Cbr>const title = document.querySelector('#title');\u003Cbr>title.innerText = 'Yeni Başlık';\u003C/blockquote>\n\u003Cp>\u003Cstrong>Not:\u003C/strong> querySelectorAll bir \u003Cem>NodeList\u003C/em> döner; modern tarayıcılarda NodeList üzerinde \u003Ccode>forEach\u003C/code> çalışır, ihtiyaç halinde Array.from ile diziye çevrilebilir.\u003C/p>\n\n\u003Ch2>Sınıf ekleme ve yönetme: classList API\u003C/h2>\n\u003Cp>Elementlerin sınıflarını değiştirmek için \u003Cstrong>element.classList\u003C/strong> API'si kullanılır. Sık kullanılan metodlar: \u003Cstrong>add\u003C/strong>, \u003Cstrong>remove\u003C/strong>, \u003Cstrong>toggle\u003C/strong>, \u003Cstrong>contains\u003C/strong>. Bu API DOM sınıflarıyla güvenli ve basit şekilde çalışmaya uygundur. Seçme ve değiştirme örnekleri için topluluk tartışmaları ve örnekler sayfada incelenebilir: \u003Ca href=\"https://stackoverflow.com/questions/21351104/selecting-and-modifying-dom-elements\">Stack Overflow - Selecting and modifying DOM elements\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek: Sınıf ekleme/çıkarma\u003C/h3>\n\u003Cblockquote>const el = document.querySelector('.card');\u003Cbr>el.classList.add('highlight');\u003Cbr>el.classList.remove('hidden');\u003Cbr>el.classList.toggle('active');\u003C/blockquote>\n\u003Cp>classList.toggle, ikinci bir boolean parametre alarak belirli bir değere göre açık/kapat işlemini kesinleştirebilir: \u003Ccode>el.classList.toggle('active', isActive)\u003C/code>.\u003C/p>\n\n\u003Ch2>İçerik güncelleme: innerText, innerHTML ve textContent\u003C/h2>\n\u003Cp>Metin ve HTML içeriğini güncellemek için yaygın olarak kullanılan özellikler \u003Cstrong>innerText\u003C/strong>, \u003Cstrong>innerHTML\u003C/strong> ve \u003Cstrong>textContent\u003C/strong>'tir. \u003Cstrong>innerText\u003C/strong> kullanıcının gördüğü metni yansıtır; \u003Cstrong>innerHTML\u003C/strong> bir elementin HTML içeriğini okur/yazar; \u003Cstrong>textContent\u003C/strong> ise elementin tüm metinsel içeriğini ham olarak alır/yazar.\u003C/p>\n\u003Cp>innerHTML kullanırken dışarıdan gelen HTML içeriğini doğrudan eklemek XSS riski oluşturabileceği için dikkat gerektirir; eğer kullanıcı kaynaklı HTML eklenmesi gerekiyorsa, içerik uygun şekilde temizlenmelidir. innerText ve innerHTML arasındaki farkları ve ne zaman hangisini tercih edeceğinizi örneklerle inceleyebilirsiniz: \u003Ca href=\"https://codehints.io/javascript/dom-manipulation\">Code Hints - DOM Manipulation\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek: Metin güncelleme\u003C/h3>\n\u003Cblockquote>const message = document.querySelector('#msg');\u003Cbr>message.textContent = 'Form başarıyla gönderildi.';\u003C/blockquote>\n\n\u003Ch2>Yeni eleman ekleme: createElement ve appendChild\u003C/h2>\n\u003Cp>Sayfaya yeni düğümler eklemek için \u003Cstrong>document.createElement\u003C/strong> ile bir node oluşturup, hedef elemana \u003Cstrong>appendChild\u003C/strong> ile ekleyebilirsiniz. Birden fazla düğümü tek seferde eklemek için \u003Cstrong>DocumentFragment\u003C/strong> kullanmak performans açısından faydalıdır. Temel ekleme işlemleri ve prototipler için referans: \u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">TechLead - DOM manipulation örnekleri\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek: Listeye yeni öğe eklemek\u003C/h3>\n\u003Cblockquote>const li = document.createElement('li');\u003Cbr>li.textContent = 'Yeni madde';\u003Cbr>const list = document.querySelector('#todoList');\u003Cbr>list.appendChild(li);\u003C/blockquote>\n\n\u003Ch2>Pratik örnekler: adım adım senaryolar\u003C/h2>\n\u003Cp>Aşağıda sık karşılaşılan üç senaryo ve uygulanışı yer alıyor. Kodlar eğitim amaçlıdır; canlı projelerde kontrol ve doğrulama eklemeyi unutmayın.\u003C/p>\n\n\u003Ch3>1) Başlık metnini değiştirmek\u003C/h3>\n\u003Cblockquote>/* HTML */\u003Cbr><h2 id=\"headline\">Eski Başlık</h2>\u003Cbr>\u003Cbr>/* JS */\u003Cbr>const h = document.querySelector('#headline');\u003Cbr>h.innerText = 'Güncellenmiş Başlık';\u003C/blockquote>\n\n\u003Ch3>2) Butona tıklanıldığında sınıf toggle etmek\u003C/h3>\n\u003Cblockquote>/* HTML */\u003Cbr><button id=\"btn\">Göster/Gizle</button>\u003Cbr><div class=\"panel\">İçerik</div>\u003Cbr>\u003Cbr>/* JS */\u003Cbr>const btn = document.querySelector('#btn');\u003Cbr>const panel = document.querySelector('.panel');\u003Cbr>btn.addEventListener('click', () => {\u003Cbr>  panel.classList.toggle('hidden');\u003Cbr>});\u003C/blockquote>\n\n\u003Ch3>3) Formdan gelen değeri listeye eklemek\u003C/h3>\n\u003Cblockquote>/* HTML */\u003Cbr><input id=\"itemInput\" type=\"text\" />\u003Cbr><button id=\"add\">Ekle</button>\u003Cbr><ul id=\"list\"></ul>\u003Cbr>\u003Cbr>/* JS */\u003Cbr>const input = document.querySelector('#itemInput');\u003Cbr>const addBtn = document.querySelector('#add');\u003Cbr>const list = document.querySelector('#list');\u003Cbr>addBtn.addEventListener('click', () => {\u003Cbr>  if (!input.value) return; // basit kontrol\u003Cbr>  const li = document.createElement('li');\u003Cbr>  li.textContent = input.value; // metin olarak ekle\u003Cbr>  list.appendChild(li);\u003Cbr>  input.value = '';\u003Cbr>});\u003C/blockquote>\n\n\u003Ch2>İyi uygulamalar ve performans ipuçları\u003C/h2>\n\u003Cul>\n  \u003Cli>DOM erişimlerini gruplandırın: Tek tek güncellemeler yerine, mümkünse değişiklikleri bir araya toplayın.\u003C/li>\n  \u003Cli>Büyük miktarda düğüm eklerken \u003Cstrong>DocumentFragment\u003C/strong> kullanın; bu, yeniden akış sayısını azaltır.\u003C/li>\n  \u003Cli>Layout/reflow maliyeti olan işlemlerden (ör. offsetWidth okumaları) kaçının veya bunları toplu yapın.\u003C/li>\n  \u003Cli>Event delegation (olay temsilciliği) ile çok sayıda benzer eleman için tek bir dinleyici kullanmak performansı artırır.\u003C/li>\n  \u003Cli>innerHTML ile dışarıdan gelen ham HTML eklenmesi gerekiyorsa içerikleri sanitize edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hata ayıklama kontrol listesi\u003C/h2>\n\u003Col>\n  \u003Cli>Doğru seçici kullandığınızdan emin olun (id için '#', class için '.').\u003C/li>\n  \u003Cli>Script'in DOM yüklendikten sonra çalıştığını doğrulayın (ör. \u003Cem>defer\u003C/em> veya DOMContentLoaded).\u003C/li>\n  \u003Cli>console.log ile seçilen elemanın null olup olmadığını kontrol edin.\u003C/li>\n  \u003Cli>Tarayıcı geliştirici araçları ile DOM ağaç yapısını inceleyin.\u003C/li>\n  \u003Cli>innerText/innerHTML/textContent farklarına dikkat edin; amaçlarınıza uygun olanı kullanın.\u003C/li>\n\u003C/ol>\n\n\u003Chr>\n\u003Cp>Bu rehber temel ve pratik örnekler üzerinden DOM manipülasyonunu ele aldı. Daha derin örnekler ve tarayıcı uyumluluğu için referans kaynakları inceleyin:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">TechLead - DOM Manipulation\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.w3schools.com/JsrEF/met_element_queryselector.asp\">W3Schools - querySelector()\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://codehints.io/javascript/dom-manipulation\">Code Hints - DOM Manipulation\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://stackoverflow.com/questions/21351104/selecting-and-modifying-dom-elements\">Stack Overflow - DOM örnekleri\u003C/a>\u003C/li>\n\u003C/ul>","DOM: Element Seçme, Sınıf Ekleme ve İçerik Güncelleme — Java","Bu rehber, JavaScript ile DOM elementlerini seçme, sınıf yönetimi ve içerik güncellemeye dair pratik örnekler ve en iyi uygulamaları adım adım gösterir.","JavaScript DOM Manipülasyonu, querySelector, classList, innerText, appendChild, DOM örnekleri, DOM manipulation","dom-element-secme-sinif-ekleme-ve-icerik-guncelleme-ornekleri","2026-04-11T14:05:55.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/5f598e6092a804a5db1ca8692e2bce82.jpg","/media/blog/5f598e6092a804a5db1ca8692e2bce82_thumb.jpg","/media/blog/5f598e6092a804a5db1ca8692e2bce82.webp","/media/blog/5f598e6092a804a5db1ca8692e2bce82_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,786,0,"4 dk okuma süresi","/blog/javascript-dom-manipulasyonu/dom-element-secme-sinif-ekleme-ve-icerik-guncelleme-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/5f598e6092a804a5db1ca8692e2bce82.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/dom-element-secme-sinif-ekleme-ve-icerik-guncelleme-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/dom-element-secme-sinif-ekleme-ve-icerik-guncelleme-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,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}]