[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-ile-element-secme-ve-guncelleme-5-kisa-ornek":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},31091,"DOM ile element seçme ve güncelleme: 5 kısa örnek","Bu makale, JavaScript ile DOM'da element seçme ve güncelleme üzerine 5 kısa ve uygulanabilir örnek sunar.","\u003Ch2>DOM ile element seçme ve güncelleme: 5 kısa örnek\u003C/h2>\n\u003Cp>Web sayfalarında dinamik değişiklikler yapmak için Document Object Model (DOM) ile çalışmak temel bir beceridir. Bu rehberde modern tarayıcılarda sık kullanılan seçme ve güncelleme yöntemlerini kısa, uygulamalı örneklerle göstereceğim. Örnekler basit ve pratik olacak; gerçek projeye uygularken tarayıcı uyumluluğu ve güvenlik kontrollerini unutmayın.\u003C/p>\n\u003Cp>Bu makalede ele alınan temel kavramlar ve kullanım notları için bakabilirsiniz: \u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">TechLead — DOM rehberi\u003C/a>, \u003Ca href=\"https://www.javascripttutorial.net/dom/manipulating/get-and-set-the-text-content-of-an-element/\">JavaScript Tutorial — textContent\u003C/a> ve \u003Ca href=\"https://www.devhandbook.com/javascript/dom/dom-manipulation/\">Dev Handbook — DOM manipülasyonu\u003C/a>.\u003C/p>\n\n\u003Ch3>Temel yöntemler: kısa referans\u003C/h3>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Yöntem\u003C/th>\n      \u003Cth>Kısa açıklama\u003C/th>\n    \u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\u003Cstrong>document.querySelector(selector)\u003C/strong>\u003C/td>\n      \u003Ctd>CSS seçici kullanarak DOM'daki ilk eşleşen elementi döndürür. (ilk eşleşme)\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>\u003Cstrong>document.querySelectorAll(selector)\u003C/strong>\u003C/td>\n      \u003Ctd>CSS seçici ile eşleşen tüm elementleri NodeList olarak döndürür; üzerinde döngü ile işlem yapılır.\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>\u003Cstrong>element.textContent\u003C/strong>\u003C/td>\n      \u003Ctd>Elementin metin içeriğini güvenli şekilde alıp/ayarlamak için kullanılır; ham HTML yorumlanmaz.\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>\u003Cstrong>element.innerHTML\u003C/strong>\u003C/td>\n      \u003Ctd>Elementin HTML içeriğini alıp/ayarlamak için kullanılır; HTML işlenir — bu sebeple kullanırken dikkat gerekir.\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>\u003Cstrong>document.createElement / parent.appendChild\u003C/strong>\u003C/td>\n      \u003Ctd>Yeni bir element oluşturup DOM'a eklemek için kullanılır.\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>\u003Cstrong>element.classList / setAttribute\u003C/strong>\u003C/td>\n      \u003Ctd>CSS sınıfı ekleme/çıkartma ve attribute (örn. src, alt) güncelleme için kullanılır.\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\n\u003Cp>Bu yöntemlerin detaylı açıklamaları ve örnekleri için kaynaklara göz atabilirsiniz: \u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">TechLead\u003C/a>, \u003Ca href=\"https://www.javascripttutorial.net/dom/manipulating/get-and-set-the-text-content-of-an-element/\">JavaScript Tutorial\u003C/a>, \u003Ca href=\"https://www.devhandbook.com/javascript/dom/dom-manipulation/\">Dev Handbook\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 1 — document.querySelector ile tek elementi seçip textContent güncelleme\u003C/h3>\n\u003Col>\n  \u003Cli>\u003Cstrong>const heading = document.querySelector('h1.site-title');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>if (heading) heading.textContent = 'Yeni Başlık';\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: \u003Cstrong>querySelector\u003C/strong> ilk eşleşeni döndürür; yoksa \u003Cstrong>null\u003C/strong> gelir. Bu nedenle doğrudan erişmeden önce null kontrolü yapın. Sadece düz metin ekliyorsanız \u003Cstrong>textContent\u003C/strong> kullanmak daha güvenlidir (HTML olarak yorumlanmaz). Kaynak: \u003Ca href=\"https://www.javascripttutorial.net/dom/manipulating/get-and-set-the-text-content-of-an-element/\">JavaScript Tutorial\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 2 — querySelectorAll ile birden çok elementi güncelleme\u003C/h3>\n\u003Col>\n  \u003Cli>\u003Cstrong>const items = document.querySelectorAll('.todo .item');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>items.forEach((el, i) => el.textContent = `${i + 1}. ${el.textContent}`);\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: \u003Cstrong>querySelectorAll\u003C/strong> bir NodeList döndürür; modern tarayıcılarda NodeList üzerinde \u003Cstrong>forEach\u003C/strong> çalışır. Daha geniş uyumluluk için \u003Cstrong>Array.from(items)\u003C/strong> ile diziye çevirebilirsiniz. Bu örnek, bir liste öğelerini numaralandırmak için kullanışlıdır. Kaynak: \u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">TechLead\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 3 — createElement ve appendChild ile yeni element ekleme\u003C/h3>\n\u003Col>\n  \u003Cli>\u003Cstrong>const li = document.createElement('li');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>li.textContent = 'Yeni madde';\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>const list = document.querySelector('#list');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>if (list) list.appendChild(li);\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: \u003Cstrong>createElement\u003C/strong> ile oluşturulan elementin içeriğini \u003Cstrong>textContent\u003C/strong> ile ayarlamak, HTML enjeksiyonunu engeller. Ardından \u003Cstrong>appendChild\u003C/strong> veya \u003Cstrong>insertAdjacentElement\u003C/strong> ile DOM'a ekleyebilirsiniz. Kaynak: \u003Ca href=\"https://www.devhandbook.com/javascript/dom/dom-manipulation/\">Dev Handbook\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 4 — innerHTML kullanımı ve daha güvenli alternatif\u003C/h3>\n\u003Col>\n  \u003Cli>\u003Cstrong>const container = document.querySelector('#container');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>if (container) container.innerHTML = '<p><strong>Merhaba</strong></p>';\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: \u003Cstrong>innerHTML\u003C/strong> HTML içeriğini direkt olarak işlediği için hızlı ve pratiktir, ancak dışarıdan gelen ham HTML (özellikle kullanıcı girdisi) doğrudan eklendiğinde risk oluşturabilir. Mümkünse HTML içeriğini sunucu tarafında temizleyin veya DOM API'si ile element/tekst oluşturun:\u003C/p>\n\u003Col>\n  \u003Cli>\u003Cstrong>const p = document.createElement('p');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>p.textContent = 'Merhaba';\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>container.appendChild(p);\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>Daha fazla bilgi için: \u003Ca href=\"https://www.devhandbook.com/javascript/dom/dom-manipulation/\">Dev Handbook\u003C/a>, güvenlik notları için ilgili kaynaklara bakabilirsiniz.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 5 — attribute ve classList güncelleme (resim örneği)\u003C/h3>\n\u003Col>\n  \u003Cli>\u003Cstrong>const img = document.querySelector('#hero img');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>if (img) {\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>  img.setAttribute('alt', 'Açıklayıcı metin');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>  img.src = 'https://example.com/photo.jpg';\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>  img.classList.toggle('visible');\u003C/strong>\u003C/li>\n  \u003Cli>\u003Cstrong>}\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cp>Açıklama: \u003Cstrong>setAttribute\u003C/strong> ile attribute'ü güncelleyebilir veya doğrudan \u003Cstrong>img.src\u003C/strong> gibi property atayabilirsiniz. \u003Cstrong>classList\u003C/strong> ile sınıf ekleme/çıkarma/toggle işlemleri temiz ve okunaklıdır.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>İyi uygulamalar ve ipuçları\u003C/h3>\n\u003Cul>\n  \u003Cli>Element seçmeden önce uygun bir seçici kullanın; id için \u003Cstrong>#id\u003C/strong>, sınıf için \u003Cstrong>.class\u003C/strong>.\u003C/li>\n  \u003Cli>Her zaman null kontrolü yapın: \u003Cstrong>const el = document.querySelector(...); if (el) { ... }\u003C/strong>.\u003C/li>\n  \u003Cli>Plain metin için \u003Cstrong>textContent\u003C/strong>, HTML eklemek gerektiğinde dikkatli \u003Cstrong>innerHTML\u003C/strong> veya \u003Cstrong>createElement\u003C/strong> kombinasyonu kullanın.\u003C/li>\n  \u003Cli>Birden fazla element için \u003Cstrong>querySelectorAll\u003C/strong> sonrası \u003Cstrong>forEach\u003C/strong> veya \u003Cstrong>Array.from()\u003C/strong> kullanın.\u003C/li>\n  \u003Cli>Kullanıcıdan gelen veriyi doğrudan HTML olarak eklemeyin; sanitize veya DOM API ile güvenli ekleme tercih edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Hızlı kontrol listesi (checklist)\u003C/h3>\n\u003Cul>\n  \u003Cli>Seçici doğru mu? (id/class/tag)\u003C/li>\n  \u003Cli>Null kontrolü yapıldı mı?\u003C/li>\n  \u003Cli>Metin mi ekleniyor yoksa HTML mi? (textContent vs innerHTML)\u003C/li>\n  \u003Cli>Güvenlik: kullanıcı girdisi temizlendi mi?\u003C/li>\n  \u003Cli>Performans: sık DOM erişimleri gruplanıp tek seferde mi yapılıyor?\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Sınırlamalar ve notlar\u003C/h3>\n\u003Cp>Örnekler modern tarayıcı ve ES6 desteği varsayar. Sunucu tarafı veya non-browser ortamlarında (ör. Node.js) DOM farklı kütüphaneler gerektirebilir (ör. \u003Cem>jsdom\u003C/em>). HTML içeriği eklerken güvenlik önemlidir; bu yazıda güvenlik tavsiyeleri özetlenmiştir fakat uygulamaya özel değerlendirme ve testler yapmanız önerilir.\u003C/p>\n\n\u003Ch3>Kaynaklar ve ileri okuma\u003C/h3>\n\u003Cp>Daha detaylı rehberler:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://frontendtechlead.com/learn-js/dom\">DOM Manipulation - JavaScript Tutorial | TechLead\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.javascripttutorial.net/dom/manipulating/get-and-set-the-text-content-of-an-element/\">How to Set and Get the Text Content of an Element | JavaScript Tutorial\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.devhandbook.com/javascript/dom/dom-manipulation/\">How to manipulate the DOM | Dev Handbook\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>Uygulamalı örnekleri kendi sayfanıza kopyalayıp test ederken geliştirici konsolunu kullanın ve değişiklikleri adım adım doğrulayın.\u003C/p>\n","DOM ile element seçme ve güncelleme — 5 kısa JavaScript örne","document.querySelector, textContent, createElement gibi temel yöntemlerle DOM'da nasıl element seçip güncelleyeceğinizi 5 kısa örnekle gösterir.","JavaScript DOM Manipülasyonu, document.querySelector örnekleri, DOM textContent güncelleme, element oluşturma js örnekleri, querySelectorAll örnek","dom-ile-element-secme-ve-guncelleme-5-kisa-ornek","2026-05-04T11:22:46.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/a483bb6c385387cffd7feb05bb8ed488.jpg","/media/blog/a483bb6c385387cffd7feb05bb8ed488_thumb.jpg","/media/blog/a483bb6c385387cffd7feb05bb8ed488.webp","/media/blog/a483bb6c385387cffd7feb05bb8ed488_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,691,0,"4 dk okuma süresi","/blog/javascript-dom-manipulasyonu/dom-ile-element-secme-ve-guncelleme-5-kisa-ornek",[],["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/a483bb6c385387cffd7feb05bb8ed488.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-dom-manipulasyonu/dom-ile-element-secme-ve-guncelleme-5-kisa-ornek",{"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-ile-element-secme-ve-guncelleme-5-kisa-ornek",["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}]