element.setAttribute()<\/code> y\u00f6ntemleri arac\u0131l\u0131\u011f\u0131yla eri\u015filir ve de\u011fi\u015ftirilir.<\/p>\nYorum (Comment)<\/h4>\n
Comment<\/code> d\u00fc\u011f\u00fcmleri, HTML yorumlar\u0131n\u0131 (<\/code>) temsil eder. Yorumlar taray\u0131c\u0131 taraf\u0131ndan i\u015flenmez ve sayfa \u00fczerinde g\u00f6r\u00fcnmezler, ancak DOM a\u011fac\u0131nda bir d\u00fc\u011f\u00fcm olarak bulunurlar ve programatik olarak eri\u015filebilirler.<\/p>\nDOM A\u011fa\u00e7 Yap\u0131s\u0131<\/h3>\n
Bir HTML belgesi, DOM taraf\u0131ndan hiyerar\u015fik bir a\u011fa\u00e7 yap\u0131s\u0131 olarak temsil edilir. Bu yap\u0131, ebeveyn-\u00e7ocuk (parent-child) ve karde\u015f (sibling) ili\u015fkileriyle tan\u0131mlan\u0131r. A\u011fac\u0131n en tepesinde Document<\/code> d\u00fc\u011f\u00fcm\u00fc bulunur, onun alt\u0131nda <\/code> elementi yer al\u0131r ve bu elementin \u00e7ocuklar\u0131 <\/code> ve <\/code> elementleridir. Bu yap\u0131, bir dosya sistemindeki dizin ve dosya yap\u0131s\u0131na benzetilebilir.<\/p>\n\u00d6rnek bir HTML yap\u0131s\u0131 ve bunun DOM a\u011fac\u0131ndaki temsili:<\/p>\n
\n\n\n DOM \u00d6rne\u011fi<\/title>\n<\/head>\n<body>\n <div id=\"container\">\n \n <p class=\"intro\">Bu bir paragraft\u0131r.<\/p>\n <ul>\n <li>Madde 1<\/li>\n <li>Madde 2<\/li>\n <\/ul>\n <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu HTML yap\u0131s\u0131 DOM’da \u015fu \u015fekilde temsil edilir:<\/p>\n<p>* <strong>Document<\/strong> (K\u00f6k D\u00fc\u011f\u00fcm)<br \/>\n * <strong>html<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>head<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>title<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>“DOM \u00d6rne\u011fi”<\/strong> (Metin D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>body<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>div<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc, id=”container”)<br \/>\n * <strong>h1<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>“Ba\u015fl\u0131k”<\/strong> (Metin D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>p<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc, class=”intro”)<br \/>\n * <strong>“Bu bir paragraft\u0131r.”<\/strong> (Metin D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>ul<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>li<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>“Madde 1”<\/strong> (Metin D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>li<\/strong> (Element D\u00fc\u011f\u00fcm\u00fc)<br \/>\n * <strong>“Madde 2”<\/strong> (Metin D\u00fc\u011f\u00fcm\u00fc)<\/p>\n<p>Bu a\u011fa\u00e7 yap\u0131s\u0131nda:<br \/>\n* <code>html<\/code> elementi <code>Document<\/code>‘\u0131n \u00e7ocu\u011fudur.<br \/>\n* <code>head<\/code> ve <code>body<\/code> elementleri <code>html<\/code>‘in \u00e7ocuklar\u0131 ve birbirlerinin karde\u015fleridir.<br \/>\n* <code>h1<\/code>, <code>p<\/code> ve <code>ul<\/code> elementleri <code>div<\/code>‘in \u00e7ocuklar\u0131 ve birbirlerinin karde\u015fleridir.<br \/>\n* “Ba\u015fl\u0131k” metni <code>h1<\/code> elementinin \u00e7ocu\u011fudur.<\/p>\n<p>Bu hiyerar\u015fik yap\u0131, JavaScript’in belirli bir \u00f6\u011feye eri\u015fmesini, onun \u00e7ocuklar\u0131n\u0131 veya ebeveynini bulmas\u0131n\u0131 ve sayfan\u0131n herhangi bir b\u00f6l\u00fcm\u00fcn\u00fc programatik olarak de\u011fi\u015ftirmesini sa\u011flar.<\/p>\n<h3>DOM ile Etkile\u015fim: JavaScript<\/h3>\n<p>JavaScript, web sayfalar\u0131yla etkile\u015fim kurmak ve DOM’u manip\u00fcle etmek i\u00e7in en yayg\u0131n kullan\u0131lan dildir. DOM aray\u00fcz\u00fc, JavaScript’e belgedeki her bir d\u00fc\u011f\u00fcme eri\u015fim ve bu d\u00fc\u011f\u00fcmleri de\u011fi\u015ftirme yetene\u011fi sunar.<\/p>\n<h4>Elementleri Se\u00e7me<\/h4>\n<p>DOM manip\u00fclasyonunun ilk ad\u0131m\u0131, \u00fczerinde i\u015flem yap\u0131lacak elementi (veya elementleri) se\u00e7mektir. JavaScript, bu ama\u00e7la \u00e7e\u015fitli y\u00f6ntemler sunar:<\/p>\n<p>* <strong><code>document.getElementById(id)<\/code>:<\/strong> Belirli bir <code>id<\/code> \u00f6zniteli\u011fine sahip tek bir elementi d\u00f6nd\u00fcr\u00fcr. <code>id<\/code>‘ler bir belgede benzersiz olmal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">const container = document.getElementById('container');\n console.log(container); \/\/ <div id=\"container\">...<\/div><\/code><\/pre>\n<p>* <strong><code>document.getElementsByClassName(className)<\/code>:<\/strong> Belirli bir s\u0131n\u0131f ad\u0131na sahip t\u00fcm elementleri i\u00e7eren canl\u0131 bir <code>HTMLCollection<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">const introParagraphs = document.getElementsByClassName('intro');\n console.log(introParagraphs[0]); \/\/ <p class=\"intro\">Bu bir paragraft\u0131r.<\/p><\/code><\/pre>\n<p>* <strong><code>document.getElementsByTagName(tagName)<\/code>:<\/strong> Belirli bir etiket ad\u0131na sahip t\u00fcm elementleri i\u00e7eren canl\u0131 bir <code>HTMLCollection<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">const listItems = document.getElementsByTagName('li');\n console.log(listItems); \/\/ HTMLCollection(2) [li, li]<\/code><\/pre>\n<p>* <strong><code>document.querySelector(cssSelector)<\/code>:<\/strong> Belirtilen CSS se\u00e7icisiyle e\u015fle\u015fen ilk elementi d\u00f6nd\u00fcr\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">const firstListItem = document.querySelector('ul li');\n console.log(firstListItem); \/\/ <li>Madde 1<\/li><\/code><\/pre>\n<p>* <strong><code>document.querySelectorAll(cssSelector)<\/code>:<\/strong> Belirtilen CSS se\u00e7icisiyle e\u015fle\u015fen t\u00fcm elementleri i\u00e7eren statik bir <code>NodeList<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">const allParagraphs = document.querySelectorAll('p');\n console.log(allParagraphs); \/\/ NodeList(1) [p.intro]<\/code><\/pre>\n<p><code>querySelector<\/code> ve <code>querySelectorAll<\/code>, modern web geli\u015ftirmede daha esnek olduklar\u0131 ve CSS se\u00e7icilerinin t\u00fcm g\u00fcc\u00fcn\u00fc kulland\u0131klar\u0131 i\u00e7in s\u0131kl\u0131kla tercih edilir.<\/p>\n<h4>Element Olu\u015fturma ve Ekleme<\/h4>\n<p>DOM’a yeni i\u00e7erik eklemek de olduk\u00e7a yayg\u0131n bir i\u015flemdir:<\/p>\n<p>* <strong><code>document.createElement(tagName)<\/code>:<\/strong> Belirtilen etiket ad\u0131na sahip yeni bir HTML elementi olu\u015fturur.<\/p>\n<pre><code class=\"language-javascript\">const newParagraph = document.createElement('p');<\/code><\/pre>\n<p>* <strong><code>document.createTextNode(text)<\/code>:<\/strong> Yeni bir metin d\u00fc\u011f\u00fcm\u00fc olu\u015fturur.<\/p>\n<pre><code class=\"language-javascript\">const textContent = document.createTextNode('Yeni bir paragraf i\u00e7eri\u011fi.');<\/code><\/pre>\n<p>* <strong><code>parentElement.appendChild(childElement)<\/code>:<\/strong> Bir \u00e7ocu\u011fu, belirtilen ebeveyn elementin son \u00e7ocu\u011fu olarak ekler.<\/p>\n<pre><code class=\"language-javascript\">newParagraph.appendChild(textContent); \/\/ Metni paragrafa ekle\n const container = document.getElementById('container');\n container.appendChild(newParagraph); \/\/ Paragraf\u0131 containera ekle<\/code><\/pre>\n<p>* <strong><code>parentElement.insertBefore(newElement, referenceElement)<\/code>:<\/strong> Yeni bir elementi, belirtilen referans elementinden \u00f6nce ebeveynin \u00e7ocuklar\u0131 aras\u0131na ekler.<\/p>\n<pre><code class=\"language-javascript\">const firstListItem = document.querySelector('ul li');\n const newListItem = document.createElement('li');\n newListItem.textContent = 'Yeni Madde';\n firstListItem.parentNode.insertBefore(newListItem, firstListItem); \/\/ \u0130lk maddenin \u00f6n\u00fcne ekle<\/code><\/pre>\n<h4>Element \u0130\u00e7eri\u011fini ve Niteliklerini De\u011fi\u015ftirme<\/h4>\n<p>Mevcut elementlerin i\u00e7eri\u011fini veya \u00f6zniteliklerini de\u011fi\u015ftirmek de DOM manip\u00fclasyonunun \u00f6nemli bir par\u00e7as\u0131d\u0131r:<\/p>\n<p>* <strong><code>element.textContent<\/code>:<\/strong> Bir elementin ve onun alt elementlerinin t\u00fcm metin i\u00e7eri\u011fini al\u0131r veya ayarlar. HTML etiketlerini ayr\u0131\u015ft\u0131rmaz, sadece d\u00fcz metin olarak ele al\u0131r. G\u00fcvenlidir.<\/p>\n<pre><code class=\"language-javascript\">const heading = document.querySelector('h1');\n heading.textContent = 'Yeni Ba\u015fl\u0131k Metni';<\/code><\/pre>\n<p>* <strong><code>element.innerText<\/code>:<\/strong> <code>textContent<\/code>‘a benzer, ancak taray\u0131c\u0131n\u0131n olu\u015fturma stilini dikkate al\u0131r (\u00f6rne\u011fin, gizli \u00f6\u011felerin metnini d\u00f6nd\u00fcrmez). Performans a\u00e7\u0131s\u0131ndan <code>textContent<\/code>‘tan daha pahal\u0131 olabilir.<br \/>\n* <strong><code>element.innerHTML<\/code>:<\/strong> Bir elementin HTML i\u00e7eri\u011fini al\u0131r veya ayarlar. Bu, hem metin hem de HTML etiketlerini i\u00e7erebilir. Kullan\u0131c\u0131dan gelen verilerle dikkatli kullan\u0131lmazsa XSS (Cross-Site Scripting) g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir.<\/p>\n<pre><code class=\"language-javascript\">const paragraph = document.querySelector('.intro');\n paragraph.innerHTML = 'Bu <strong>kal\u0131n<\/strong> bir paragraft\u0131r.';<\/code><\/pre>\n<p>* <strong><code>element.setAttribute(name, value)<\/code>:<\/strong> Bir elementin belirli bir \u00f6zniteli\u011finin de\u011ferini ayarlar veya yeni bir \u00f6znitelik ekler.<\/p>\n<pre><code class=\"language-javascript\">const image = document.createElement('img');\n image.setAttribute('src', 'resim.jpg');\n image.setAttribute('alt', '\u00d6rnek Resim');\n container.appendChild(image);<\/code><\/pre>\n<p>* <strong><code>element.getAttribute(name)<\/code>:<\/strong> Bir elementin belirli bir \u00f6zniteli\u011finin de\u011ferini d\u00f6nd\u00fcr\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">const imgSrc = image.getAttribute('src');\n console.log(imgSrc); \/\/ resim.jpg<\/code><\/pre>\n<p>* <strong><code>element.removeAttribute(name)<\/code>:<\/strong> Bir elementten belirli bir \u00f6zniteli\u011fi kald\u0131r\u0131r.<\/p>\n<pre><code class=\"language-javascript\">image.removeAttribute('alt');<\/code><\/pre>\n<p>* <strong><code>element.classList<\/code>:<\/strong> Bir elementin CSS s\u0131n\u0131flar\u0131n\u0131 y\u00f6netmek i\u00e7in bir dizi y\u00f6ntem sunar.<br \/>\n * <code>element.classList.add('className')<\/code>: Bir s\u0131n\u0131f ekler.<br \/>\n * <code>element.classList.remove('className')<\/code>: Bir s\u0131n\u0131f\u0131 kald\u0131r\u0131r.<br \/>\n * <code>element.classList.toggle('className')<\/code>: Bir s\u0131n\u0131f varsa kald\u0131r\u0131r, yoksa ekler.<br \/>\n * <code>element.classList.contains('className')<\/code>: Bir s\u0131n\u0131f\u0131n var olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<\/p>\n<pre><code class=\"language-javascript\">const paragraph = document.querySelector('.intro');\n paragraph.classList.add('highlight'); \/\/ highlight s\u0131n\u0131f\u0131n\u0131 ekle\n paragraph.classList.remove('intro'); \/\/ intro s\u0131n\u0131f\u0131n\u0131 kald\u0131r<\/code><\/pre>\n<h4>Olay Dinleyicileri<\/h4>\n<p>Web sayfalar\u0131n\u0131 etkile\u015fimli hale getirmenin anahtar\u0131, kullan\u0131c\u0131 eylemlerine (olaylara) yan\u0131t vermektir. JavaScript, olay dinleyicileri (event listeners) arac\u0131l\u0131\u011f\u0131yla bu yan\u0131t\u0131 sa\u011flar.<\/p>\n<p>* <strong><code>element.addEventListener(event, handlerFunction)<\/code>:<\/strong> Belirli bir olaya yan\u0131t vermek i\u00e7in bir i\u015flev (handler function) kaydeder.<\/p>\n<pre><code class=\"language-javascript\">const myButton = document.createElement('button');\n myButton.textContent = 'Bana T\u0131kla';\n container.appendChild(myButton);\n\n myButton.addEventListener('click', function() {\n alert('Butona t\u0131kland\u0131!');\n heading.textContent = 'T\u0131kland\u0131!';\n });<\/code><\/pre>\n<p>Yayg\u0131n olay t\u00fcrleri \u015funlard\u0131r:<br \/>\n* <code>'click'<\/code>: Bir \u00f6\u011feye t\u0131kland\u0131\u011f\u0131nda.<br \/>\n* <code>'mouseover'<\/code>, <code>'mouseout'<\/code>: Fare bir \u00f6\u011fenin \u00fczerine geldi\u011finde veya ayr\u0131ld\u0131\u011f\u0131nda.<br \/>\n* <code>'keydown'<\/code>, <code>'keyup'<\/code>: Bir tu\u015fa bas\u0131ld\u0131\u011f\u0131nda veya b\u0131rak\u0131ld\u0131\u011f\u0131nda.<br \/>\n* <code>'submit'<\/code>: Bir form g\u00f6nderildi\u011finde.<br \/>\n* <code>'load'<\/code>: Bir sayfa veya kaynak y\u00fcklendi\u011finde.<br \/>\n* <code>'change'<\/code>: Bir form alan\u0131n\u0131n de\u011feri de\u011fi\u015fti\u011finde.<\/p>\n<p>Olay i\u015fleyici fonksiyonlar\u0131, olay\u0131n kendisi hakk\u0131nda bilgi i\u00e7eren bir <code>Event<\/code> nesnesi al\u0131r. \u00d6rne\u011fin, <code>event.target<\/code> \u00f6zelli\u011fi, olay\u0131n tetiklendi\u011fi \u00f6\u011feyi g\u00f6sterir.<\/p>\n<h3>DOM Manip\u00fclasyonu \u0130\u00e7in En \u0130yi Uygulamalar<\/h3>\n<p>DOM manip\u00fclasyonu, web sayfalar\u0131n\u0131 dinamik hale getirse de, yanl\u0131\u015f yap\u0131ld\u0131\u011f\u0131nda performans sorunlar\u0131na veya g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir. \u0130\u015fte baz\u0131 en iyi uygulamalar:<\/p>\n<h4>Performans \u0130pu\u00e7lar\u0131<\/h4>\n<p>* <strong>DOM Eri\u015fimi ve Manip\u00fclasyonunu Minimize Edin:<\/strong> DOM i\u015flemleri pahal\u0131d\u0131r. Herhangi bir DOM \u00f6\u011fesine eri\u015fmek veya onu de\u011fi\u015ftirmek, taray\u0131c\u0131n\u0131n yeniden d\u00fczenleme (reflow) ve yeniden boyama (repaint) i\u015flemlerini tetikleyebilir. Bu i\u015flemler, \u00f6zellikle b\u00fcy\u00fck veya karma\u015f\u0131k DOM a\u011fa\u00e7lar\u0131nda performans\u0131 d\u00fc\u015f\u00fcrebilir.<br \/>\n* <strong>Toplu De\u011fi\u015fiklikler Yap\u0131n:<\/strong> Birden fazla DOM de\u011fi\u015fikli\u011fi yapman\u0131z gerekti\u011finde, bu de\u011fi\u015fiklikleri bir kerede yapmak daha iyidir. \u00d6rne\u011fin, birden fazla \u00f6\u011fe ekleyecekseniz, bunlar\u0131 bir <code>DocumentFragment<\/code> i\u00e7inde olu\u015fturup d\u00fczenleyin ve ard\u0131ndan tek bir i\u015flemle DOM’a ekleyin.<\/p>\n<pre><code class=\"language-javascript\">const fragment = document.createDocumentFragment();\n for (let i = 0; i < 100; i++) {\n const li = document.createElement('li');\n li.textContent = <code>Madde ${i + 1}<\/code>;\n fragment.appendChild(li);\n }\n document.querySelector('ul').appendChild(fragment); \/\/ Tek seferde DOM'a ekle<\/code><\/pre>\n<p>* <strong>DOM Referanslar\u0131n\u0131 \u00d6nbelle\u011fe Al\u0131n:<\/strong> S\u0131k\u00e7a kulland\u0131\u011f\u0131n\u0131z DOM \u00f6\u011felerini tekrar tekrar <code>getElementById<\/code> veya <code>querySelector<\/code> ile aramak yerine, bir de\u011fi\u015fkende saklayarak \u00f6nbelle\u011fe al\u0131n.<\/p>\n<pre><code class=\"language-javascript\">const myContainer = document.getElementById('container');\n \/\/ myContainer'\u0131 tekrar tekrar kullan\u0131n<\/code><\/pre>\n<p>* <strong>Stil De\u011fi\u015fikliklerini Ak\u0131ll\u0131ca Y\u00f6netin:<\/strong> CSS s\u0131n\u0131flar\u0131n\u0131 kullanarak stilleri de\u011fi\u015ftirmek, do\u011frudan <code>element.style<\/code> \u00f6zelliklerini de\u011fi\u015ftirmekten genellikle daha verimlidir, \u00e7\u00fcnk\u00fc taray\u0131c\u0131 stil de\u011fi\u015fikliklerini optimize edebilir.<\/p>\n<h4>G\u00fcvenlik Konular\u0131<\/h4>\n<p>* <strong><code>innerHTML<\/code> Kullan\u0131m\u0131nda Dikkat:<\/strong> Kullan\u0131c\u0131dan al\u0131nan verileri do\u011frudan <code>innerHTML<\/code> ile bir sayfaya eklemek, XSS sald\u0131r\u0131lar\u0131na kap\u0131 aralayabilir. K\u00f6t\u00fc niyetli kullan\u0131c\u0131lar, bu yolla zararl\u0131 betikler enjekte edebilir. M\u00fcmk\u00fcnse <code>textContent<\/code> kullan\u0131n veya <code>innerHTML<\/code> kullanmadan \u00f6nce girdileri dikkatlice temizleyin (sanitize edin).<\/p>\n<pre><code class=\"language-javascript\">\/\/ K\u00f6t\u00fc: Kullan\u0131c\u0131dan gelen input\n \/\/ const userInput = '<img decoding=\"async\" src=\"x\" onerror=\"alert(\\'XSS Sald\u0131r\u0131s\u0131!\\')\">';\n \/\/ element.innerHTML = userInput;\n\n \/\/ \u0130yi: Sadece metin i\u00e7eri\u011fini kullan\u0131n\n \/\/ element.textContent = userInput;\n\n \/\/ Veya bir sanitizasyon k\u00fct\u00fcphanesi kullan\u0131n<\/code><\/pre>\n<h3>DOM ve Modern Web Geli\u015ftirme<\/h3>\n<p>G\u00fcn\u00fcm\u00fczde React, Vue, Angular gibi pop\u00fcler JavaScript framework’leri ve k\u00fct\u00fcphaneleri, geli\u015ftiricilerin do\u011frudan DOM manip\u00fclasyonuyla u\u011fra\u015fmas\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azaltm\u0131\u015ft\u0131r. Bu ara\u00e7lar, geli\u015ftiricilerin uygulaman\u0131n durumunu y\u00f6netmeye ve bile\u015fen tabanl\u0131 bir mimariyle aray\u00fczler olu\u015fturmaya odaklanmas\u0131n\u0131 sa\u011flar. Ancak, bu framework’ler bile temelde DOM ile etkile\u015fime girerler.<\/p>\n<h4>Framework’ler ve K\u00fct\u00fcphaneler<\/h4>\n<p>Bu ara\u00e7lar, soyutlama katmanlar\u0131 sa\u011flayarak DOM’u daha verimli ve y\u00f6netilebilir bir \u015fekilde kullan\u0131r. Geli\u015ftiriciler, do\u011frudan DOM API’lerini \u00e7a\u011f\u0131rmak yerine, framework’\u00fcn kendi bile\u015fen modellerini ve veri ba\u011flama mekanizmalar\u0131n\u0131 kullan\u0131r. Framework, daha sonra bu soyutlamalar\u0131 ger\u00e7ek DOM de\u011fi\u015fikliklerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, hatalar\u0131 azalt\u0131r ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4>Virtual DOM<\/h4>\n<p>React ve Vue gibi baz\u0131 framework’ler, “Virtual DOM” (Sanal DOM) ad\u0131 verilen bir konsept kullan\u0131r. Virtual DOM, ger\u00e7ek DOM’un bellekteki hafif bir kopyas\u0131d\u0131r. Bir uygulaman\u0131n durumu de\u011fi\u015fti\u011finde, framework \u00f6nce bu de\u011fi\u015fiklikleri Virtual DOM \u00fczerinde yapar. Daha sonra, g\u00fcncellenmi\u015f Virtual DOM ile \u00f6nceki Virtual DOM aras\u0131ndaki farklar\u0131 (diff) hesaplar. Yaln\u0131zca bu farklar, ger\u00e7ek DOM’a minimal ve optimize edilmi\u015f bir \u015fekilde uygulan\u0131r.<\/p>\n<p>Virtual DOM’un avantajlar\u0131 \u015funlard\u0131r:<br \/>\n* <strong>Performans \u0130yile\u015ftirmesi:<\/strong> Do\u011frudan DOM manip\u00fclasyonu yerine, sadece gerekli de\u011fi\u015fikliklerin toplu olarak yap\u0131lmas\u0131, performans\u0131 art\u0131r\u0131r. Ger\u00e7ek DOM’a yap\u0131lan yazma i\u015flemleri pahal\u0131 oldu\u011fundan, bu yakla\u015f\u0131m taray\u0131c\u0131n\u0131n yeniden d\u00fczenleme ve yeniden boyama i\u015flemlerini en aza indirir.<br \/>\n* <strong>Geli\u015ftirici Deneyimi:<\/strong> Geli\u015ftiriciler, uygulaman\u0131n durumunu d\u00fc\u015f\u00fcnerek aray\u00fcz\u00fc “nas\u0131l” de\u011fi\u015ftirecekleri yerine, aray\u00fcz\u00fcn “neye” benzemesi gerekti\u011fini bildiren deklaratif bir yakla\u015f\u0131mla \u00e7al\u0131\u015f\u0131r. Framework, bu deklaratif tan\u0131mlar\u0131 verimli DOM i\u015flemlerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n<p>Virtual DOM, DOM’un temel prensiplerini daha performansl\u0131 ve soyut bir \u015fekilde kullanarak modern web uygulamalar\u0131n\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 y\u00f6netmeye yard\u0131mc\u0131 olan bir optimizasyon tekni\u011fidir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Belge Nesne Modeli (DOM), web sayfalar\u0131n\u0131n statik belgelerden dinamik ve etkile\u015fimli uygulamalara d\u00f6n\u00fc\u015fmesini sa\u011flayan temel bir teknolojidir. HTML belgesini programatik olarak eri\u015filebilir ve de\u011fi\u015ftirilebilir bir nesne a\u011fac\u0131na d\u00f6n\u00fc\u015ft\u00fcrerek, JavaScript gibi betik dillerinin sayfa i\u00e7eri\u011fini, yap\u0131s\u0131n\u0131 ve stilini manip\u00fcle etmesine olanak tan\u0131r.<\/p>\n<p>DOM’un temel kavramlar\u0131n\u0131 (d\u00fc\u011f\u00fcm, belge, element, metin, \u00f6znitelik) ve JavaScript ile elementleri se\u00e7me, olu\u015fturma, de\u011fi\u015ftirme ve olaylar\u0131 dinleme y\u00f6ntemlerini anlamak, her web geli\u015ftiricisinin sahip olmas\u0131 gereken kritik bir beceridir. Modern framework’ler ve Virtual DOM gibi teknikler, do\u011frudan DOM manip\u00fclasyonunun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 soyutlasa da, bu ara\u00e7lar\u0131n alt\u0131nda yatan DOM prensiplerini kavramak, daha derinlemesine bir anlay\u0131\u015f ve daha etkili sorun giderme yetene\u011fi sa\u011flar.<\/p>\n<p>Web teknolojileri geli\u015ftik\u00e7e, DOM’un temel rol\u00fc de\u011fi\u015fmeyecek, aksine daha sofistike ara\u00e7larla entegre olarak web’in gelece\u011fini \u015fekillendirmeye devam edecektir. Bu nedenle, DOM’u iyi anlamak, sa\u011flam ve performansl\u0131 web uygulamalar\u0131 geli\u015ftirmek i\u00e7in vazge\u00e7ilmezdir.<\/p>\n","protected":false},"excerpt":{"rendered":"DOM’a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi\nWeb, s\u00fcrekli geli\u015fen ve dinamikle\u015fen bir platformdur. G\u00fcn\u00fcm\u00fcz\u00fcn mo","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-35354","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi\" \/>\n<meta property=\"og:description\" content=\"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi Web, s\u00fcrekli geli\u015fen ve dinamikle\u015fen bir platformdur. G\u00fcn\u00fcm\u00fcz\u00fcn mo\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-28T15:40:47+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"DOM’a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi\",\"datePublished\":\"2025-11-28T15:40:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\"},\"wordCount\":2743,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\",\"name\":\"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-28T15:40:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DOM’a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/","og_locale":"tr_TR","og_type":"article","og_title":"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi","og_description":"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi Web, s\u00fcrekli geli\u015fen ve dinamikle\u015fen bir platformdur. G\u00fcn\u00fcm\u00fcz\u00fcn mo","og_url":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-28T15:40:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"DOM’a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi","datePublished":"2025-11-28T15:40:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/"},"wordCount":2743,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/","url":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/","name":"DOM'a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-28T15:40:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/doma-giris-web-sayfalarinin-yapi-tasi-ve-javascript-ile-etkilesimi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"DOM’a Giri\u015f: Web Sayfalar\u0131n\u0131n Yap\u0131 Ta\u015f\u0131 ve JavaScript ile Etkile\u015fimi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35354"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35354\/revisions"}],"predecessor-version":[{"id":35355,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35354\/revisions\/35355"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"A\u00e7\u0131klama\"](\"resim.jpg\")
<\/code>).