{"id":23961,"date":"2026-09-19T02:45:55","date_gmt":"2026-09-18T23:45:55","guid":{"rendered":"https:\/\/www.cenuta.com\/blog\/?p=23961"},"modified":"2026-09-19T02:45:57","modified_gmt":"2026-09-18T23:45:57","slug":"dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026","status":"publish","type":"post","link":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/","title":{"rendered":"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026)"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7indekiler<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ab929de2c11b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ab929de2c11b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Giris_Statik_Sayfalardan_Canli_Web_Uygulamalarina_Gecisin_Koprusu\" title=\"Giri\u015f: Statik Sayfalardan Canl\u0131 Web Uygulamalar\u0131na Ge\u00e7i\u015fin K\u00f6pr\u00fcs\u00fc\">Giri\u015f: Statik Sayfalardan Canl\u0131 Web Uygulamalar\u0131na Ge\u00e7i\u015fin K\u00f6pr\u00fcs\u00fc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Bolum_1_DOMun_Anatomisi_ve_Mantiksal_Agac_Yapisi_DOM_Tree\" title=\"B\u00f6l\u00fcm 1: DOM&#8217;un Anatomisi ve Mant\u0131ksal A\u011fa\u00e7 Yap\u0131s\u0131 (DOM Tree)\">B\u00f6l\u00fcm 1: DOM&#8217;un Anatomisi ve Mant\u0131ksal A\u011fa\u00e7 Yap\u0131s\u0131 (DOM Tree)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Bolum_2_HTML_ve_DOM_Ayni_Sey_Midir_En_Yaygin_Endustri_Yanilgisi\" title=\"B\u00f6l\u00fcm 2: HTML ve DOM Ayn\u0131 \u015eey Midir? (En Yayg\u0131n End\u00fcstri Yan\u0131lg\u0131s\u0131)\">B\u00f6l\u00fcm 2: HTML ve DOM Ayn\u0131 \u015eey Midir? (En Yayg\u0131n End\u00fcstri Yan\u0131lg\u0131s\u0131)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Bolum_3_JavaScript_ve_DOMun_Kusursuz_Ortakligi\" title=\"B\u00f6l\u00fcm 3: JavaScript ve DOM&#8217;un Kusursuz Ortakl\u0131\u011f\u0131\">B\u00f6l\u00fcm 3: JavaScript ve DOM&#8217;un Kusursuz Ortakl\u0131\u011f\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Bolum_4_Performans_Darbogazi_Reflow_Repaint_ve_Belge_Parcaciklari\" title=\"B\u00f6l\u00fcm 4: Performans Darbo\u011faz\u0131: Reflow, Repaint ve Belge Par\u00e7ac\u0131klar\u0131\">B\u00f6l\u00fcm 4: Performans Darbo\u011faz\u0131: Reflow, Repaint ve Belge Par\u00e7ac\u0131klar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Bolum_5_Olay_Yonlendirme_Event_Bubbling_ve_Capturing\" title=\"B\u00f6l\u00fcm 5: Olay Y\u00f6nlendirme (Event Bubbling ve Capturing)\">B\u00f6l\u00fcm 5: Olay Y\u00f6nlendirme (Event Bubbling ve Capturing)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Bolum_6_Modern_Webin_Devrimi_Virtual_DOM_Sanal_DOM\" title=\"B\u00f6l\u00fcm 6: Modern Web&#8217;in Devrimi: Virtual DOM (Sanal DOM)\">B\u00f6l\u00fcm 6: Modern Web&#8217;in Devrimi: Virtual DOM (Sanal DOM)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#Sonuc_Saf_Kodun_Insan_Deneyimiyle_Bulustugu_Nokta\" title=\"Sonu\u00e7: Saf Kodun \u0130nsan Deneyimiyle Bulu\u015ftu\u011fu Nokta\">Sonu\u00e7: Saf Kodun \u0130nsan Deneyimiyle Bulu\u015ftu\u011fu Nokta<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Giris_Statik_Sayfalardan_Canli_Web_Uygulamalarina_Gecisin_Koprusu\"><\/span>Giri\u015f: Statik Sayfalardan Canl\u0131 Web Uygulamalar\u0131na Ge\u00e7i\u015fin K\u00f6pr\u00fcs\u00fc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u0130nternetin ilk y\u0131llar\u0131nda web sayfalar\u0131, sadece metinlerin ve resimlerin alt alta dizildi\u011fi, kullan\u0131c\u0131n\u0131n sadece okuyup ge\u00e7ebildi\u011fi statik belgelerden ibaretti. Bir web sitesinde bir butona t\u0131klad\u0131\u011f\u0131n\u0131zda arka plan renginin de\u011fi\u015fmesi, sayfa yenilenmeden yeni verilerin ekrana gelmesi veya bir a\u00e7\u0131l\u0131r men\u00fcn\u00fcn p\u00fcr\u00fczs\u00fczce a\u015fa\u011f\u0131 kaymas\u0131 gibi dinamik etkile\u015fimler s\u00f6z konusu de\u011fildi. \u00c7\u00fcnk\u00fc HTML (Hiper Metin \u0130\u015faretleme Dili) do\u011fas\u0131 gere\u011fi cans\u0131z bir iskelettir; sayfan\u0131n sadece neye benzeyece\u011fini tan\u0131mlar, nas\u0131l davranaca\u011f\u0131n\u0131 de\u011fil.<\/p>\n\n\n\n<p>\u0130\u015fte tam bu noktada, o cans\u0131z HTML iskeletine sinir sistemi d\u00f6\u015feyerek onu hareketli, etkile\u015fimli ve &#8220;canl\u0131&#8221; bir yaz\u0131l\u0131ma d\u00f6n\u00fc\u015ft\u00fcren teknolojik standart devreye girer: <strong>DOM (Document Object Model &#8211; Belge Nesne Modeli)<\/strong>.<\/p>\n\n\n\n<p>DOM, bir web sayfas\u0131n\u0131n taray\u0131c\u0131 (Google Chrome, Safari, Firefox vb.) taraf\u0131ndan y\u00fcklendi\u011fi anda olu\u015fturulan mant\u0131ksal, hiyerar\u015fik ve nesne y\u00f6nelimli (Object-Oriented) bir haritas\u0131d\u0131r. \u0130nternet d\u00fcnyas\u0131n\u0131n en yanl\u0131\u015f anla\u015f\u0131lan kavramlar\u0131ndan biri olan DOM; asl\u0131nda bir programlama dili veya bir yaz\u0131l\u0131m k\u00fct\u00fcphanesi (\u00d6rne\u011fin jQuery veya React) de\u011fildir. O, W3C (D\u00fcnya \u00c7ap\u0131nda A\u011f Birli\u011fi) taraf\u0131ndan belirlenen evrensel bir &#8220;API&#8221; (Uygulama Programlama Aray\u00fcz\u00fc) standard\u0131d\u0131r.<\/p>\n\n\n\n<p>Bu derinlemesine rehberde; DOM&#8217;un bir a\u011fa\u00e7 gibi dallanan o karma\u015f\u0131k yap\u0131s\u0131n\u0131, HTML ile aras\u0131ndaki o ince ama kritik fark\u0131, JavaScript&#8217;in bu yap\u0131y\u0131 nas\u0131l manip\u00fcle etti\u011fini, &#8220;Reflow&#8221; ve &#8220;Repaint&#8221; gibi performans darbo\u011fazlar\u0131n\u0131 ve modern webin kaderini de\u011fi\u015ftiren &#8220;Virtual DOM&#8221; (Sanal DOM) devrimini t\u00fcm mimari detaylar\u0131yla inceliyoruz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bolum_1_DOMun_Anatomisi_ve_Mantiksal_Agac_Yapisi_DOM_Tree\"><\/span>B\u00f6l\u00fcm 1: DOM&#8217;un Anatomisi ve Mant\u0131ksal A\u011fa\u00e7 Yap\u0131s\u0131 (DOM Tree)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Taray\u0131c\u0131n\u0131za bir web adresi yaz\u0131p &#8220;Enter&#8221; tu\u015funa bast\u0131\u011f\u0131n\u0131zda, taray\u0131c\u0131 kar\u015f\u0131daki sunucudan saf bir HTML metin dosyas\u0131 indirir. Taray\u0131c\u0131n\u0131n i\u015fleme motoru (Rendering Engine), bu metin dosyas\u0131n\u0131 sat\u0131r sat\u0131r okumaya (Parsing) ba\u015flar. Okudu\u011fu her bir HTML etiketini (Tag), bellekte kar\u015f\u0131l\u0131\u011f\u0131 olan bir &#8220;Nesneye&#8221; (Object) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu nesnelerin birbirleriyle olan ebeveyn-\u00e7ocuk (Parent-Child) ili\u015fkisine g\u00f6re dizildi\u011fi bu yap\u0131ya <strong>DOM A\u011fac\u0131 (DOM Tree)<\/strong> denir.<\/p>\n\n\n\n<p>DOM a\u011fac\u0131n\u0131n en tepesinde her zaman g\u00f6r\u00fcnmez bir k\u00f6k bulunur: <code>Document<\/code> (Belge) nesnesi. Bu k\u00f6kten a\u015fa\u011f\u0131ya do\u011fru dallar uzan\u0131r:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Document:<\/strong> T\u00fcm sayfan\u0131n sahibidir.<\/li>\n\n\n\n<li><strong>HTML Elementi (<code>&lt;html><\/code>):<\/strong> K\u00f6k elemand\u0131r (Root Element). Document&#8217;in hemen alt\u0131nda yer al\u0131r ve sayfay\u0131 iki ana dala ay\u0131r\u0131r.<\/li>\n\n\n\n<li><strong>Head ve Body (<code>&lt;head><\/code>, <code>&lt;body><\/code>):<\/strong> HTML&#8217;in iki ana \u00e7ocu\u011fudur.<\/li>\n\n\n\n<li><strong>D\u00fc\u011f\u00fcmler (Nodes):<\/strong> Body etiketinin i\u00e7indeki her bir paragraf (<code>&lt;p><\/code>), her bir g\u00f6rsel (<code>&lt;img><\/code>), her bir ba\u011flant\u0131 (<code>&lt;a><\/code>) ve hatta etiketlerin i\u00e7indeki d\u00fcz metinlerin (Text) kendisi bile bu a\u011fac\u0131n birer yapra\u011f\u0131 (D\u00fc\u011f\u00fcm\u00fc &#8211; Node) olarak kabul edilir.<\/li>\n<\/ol>\n\n\n\n<p>A\u011fac\u0131n bu kusursuz yap\u0131s\u0131, programlama dillerinin sayfan\u0131n herhangi bir noktas\u0131na yolunu kaybetmeden ula\u015fabilmesini sa\u011flar. Bir butona ula\u015fmak isteyen kod, a\u011fac\u0131n k\u00f6k\u00fcnden girer, dallar\u0131 takip eder ve o butonu bir nesne olarak avucunun i\u00e7ine al\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bolum_2_HTML_ve_DOM_Ayni_Sey_Midir_En_Yaygin_Endustri_Yanilgisi\"><\/span>B\u00f6l\u00fcm 2: HTML ve DOM Ayn\u0131 \u015eey Midir? (En Yayg\u0131n End\u00fcstri Yan\u0131lg\u0131s\u0131)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Web geli\u015ftirmeye yeni ba\u015flayanlar\u0131n en s\u0131k d\u00fc\u015ft\u00fc\u011f\u00fc kavramsal hata, yazd\u0131klar\u0131 HTML kaynak kodunun do\u011frudan DOM oldu\u011funu sanmalar\u0131d\u0131r. Oysa kaynak kodu ile DOM aras\u0131nda \u00e7ok b\u00fcy\u00fck farkl\u0131l\u0131klar olabilir.<\/p>\n\n\n\n<p>SEO (Arama Motoru Optimizasyonu) uzman\u0131 olarak \u00e7al\u0131\u015fan <strong>Berrin<\/strong>, bir web sitesinin indeksleme sorunlar\u0131n\u0131 incelerken bu kritik farkla y\u00fczle\u015fir. Berrin, web sayfas\u0131nda sa\u011f t\u0131klay\u0131p &#8220;Sayfa Kayna\u011f\u0131n\u0131 G\u00f6r\u00fcnt\u00fcle&#8221; (View Page Source) dedi\u011finde sunucudan gelen saf HTML kodunu g\u00f6r\u00fcr. Ancak &#8220;\u0130ncele&#8221; (Inspect Element) se\u00e7ene\u011fine t\u0131klad\u0131\u011f\u0131nda kar\u015f\u0131s\u0131na \u00e7\u0131kan yap\u0131 (Elements sekmesi), kayna\u011f\u0131n birebir ayn\u0131s\u0131 de\u011fildir.<\/p>\n\n\n\n<p>Neden mi? \u00c7\u00fcnk\u00fc DOM, taray\u0131c\u0131n\u0131n hatalar\u0131 d\u00fczelterek ve JavaScript&#8217;in m\u00fcdahalelerini hesaba katarak olu\u015fturdu\u011fu &#8220;Canl\u0131&#8221; bir yap\u0131d\u0131r. \u00d6rne\u011fin; kaynak kodunu yazan yaz\u0131l\u0131mc\u0131 bir tablo (<code>&lt;table&gt;<\/code>) olu\u015ftururken i\u00e7ine <code>&lt;tbody&gt;<\/code> etiketini koymay\u0131 unutmu\u015f olabilir. Taray\u0131c\u0131 bu bozuk HTML&#8217;i okudu\u011funda, DOM a\u011fac\u0131n\u0131 in\u015fa ederken eksik olan <code>&lt;tbody&gt;<\/code> etiketini otomatik olarak kendisi ekler. Veya sayfa y\u00fcklendikten hemen sonra \u00e7al\u0131\u015fan bir JavaScript kodu, sayfadaki bir ba\u015fl\u0131\u011f\u0131 silmi\u015f olabilir. Kaynak kodda o ba\u015fl\u0131k hala dururken, DOM a\u011fac\u0131nda (yani ekranda) o ba\u015fl\u0131k art\u0131k yoktur. K\u0131sacas\u0131 HTML in\u015faat\u0131n plan\u0131 (Blueprint), DOM ise in\u015faat\u0131n o anki fiziksel halidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bolum_3_JavaScript_ve_DOMun_Kusursuz_Ortakligi\"><\/span>B\u00f6l\u00fcm 3: JavaScript ve DOM&#8217;un Kusursuz Ortakl\u0131\u011f\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>DOM&#8217;un varolu\u015f amac\u0131, HTML nesnelerini bir programlama dilinin anlayabilece\u011fi, de\u011fi\u015ftirebilece\u011fi ve dinleyebilece\u011fi bir formata sokmakt\u0131r. Bu programlama dili ezici bir \u00e7o\u011funlukla <strong>JavaScript<\/strong>&#8216;tir.<\/p>\n\n\n\n<p>Frontend (\u00d6n Y\u00fcz) geli\u015ftiricisi <strong>Alp<\/strong>, kullan\u0131c\u0131lar\u0131na &#8220;Karanl\u0131k Mod&#8221; (Dark Mode) deneyimi sunmak istemektedir. Alp&#8217;in yazd\u0131\u011f\u0131 statik HTML&#8217;in, bir butona t\u0131kland\u0131\u011f\u0131nda sayfan\u0131n rengini siyah yapma yetene\u011fi yoktur. Alp, JavaScript kullanarak DOM API&#8217;sine ba\u011flan\u0131r ve \u015fu b\u00fcy\u00fcl\u00fc ad\u0131mlar\u0131 izler:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Eleman\u0131 Yakalamak (Querying):<\/strong> Alp&#8217;in ilk olarak sayfadaki butonu bulmas\u0131 gerekir. JavaScript ile DOM a\u011fac\u0131na seslenir: <code>document.getElementById('tema-butonu')<\/code>. DOM, a\u011fac\u0131n i\u00e7inden o id&#8217;ye sahip butonu bulur ve Alp&#8217;e bir nesne olarak teslim eder.<\/li>\n\n\n\n<li><strong>Olay Dinleyicisi Eklemek (Event Listener):<\/strong> Alp, bu butona &#8220;T\u0131klanma&#8221; olay\u0131n\u0131 dinleyecek bir kulak (Listener) takar: <code>buton.addEventListener('click', ...)<\/code>.<\/li>\n\n\n\n<li><strong>DOM&#8217;u Manip\u00fcle Etmek (Manipulation):<\/strong> Kullan\u0131c\u0131 butona t\u0131klad\u0131\u011f\u0131nda \u00e7al\u0131\u015fan fonksiyon, sayfan\u0131n g\u00f6vde (Body) nesnesine ula\u015f\u0131r ve onun stilini de\u011fi\u015ftirir: <code>document.body.style.backgroundColor = 'black';<\/code>.<\/li>\n<\/ol>\n\n\n\n<p>Alp&#8217;in yazd\u0131\u011f\u0131 bu \u00fc\u00e7 sat\u0131rl\u0131k kod, HTML dok\u00fcman\u0131n\u0131 yeniden sunucudan y\u00fcklemeye gerek kalmadan, sadece bellekteki DOM a\u011fac\u0131n\u0131 anl\u0131k olarak de\u011fi\u015ftirerek ekran\u0131n saniyeler i\u00e7inde karanl\u0131k moda ge\u00e7mesini sa\u011flar. Kullan\u0131c\u0131 etkile\u015fimi, animasyonlar, form do\u011frulamalar\u0131 ve dinamik veri listelemelerinin tamam\u0131, JavaScript&#8217;in DOM a\u011fac\u0131 \u00fczerindeki bu diktat\u00f6rl\u00fc\u011f\u00fcn\u00fcn (Manipulation) bir sonucudur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bolum_4_Performans_Darbogazi_Reflow_Repaint_ve_Belge_Parcaciklari\"><\/span>B\u00f6l\u00fcm 4: Performans Darbo\u011faz\u0131: Reflow, Repaint ve Belge Par\u00e7ac\u0131klar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>DOM \u00fczerindeki i\u015flemler, modern yaz\u0131l\u0131m mimarilerinde en \u00e7ok kaynak (\u0130\u015flemci ve RAM) t\u00fcketen s\u00fcre\u00e7lerdir. DOM&#8217;u de\u011fi\u015ftirmek asl\u0131nda san\u0131ld\u0131\u011f\u0131 kadar &#8220;ucuz&#8221; bir i\u015flem de\u011fildir.<\/p>\n\n\n\n<p>K\u0131demli sistem mimar\u0131 <strong>Cevdet<\/strong>, e-ticaret sitesine gelen 5.000 adet \u00fcr\u00fcn\u00fc ekranda listeleyecek bir kod yazmaktad\u0131r. E\u011fer Cevdet bir d\u00f6ng\u00fc (Loop) kurup, her bir \u00fcr\u00fcn i\u00e7in DOM&#8217;a do\u011frudan m\u00fcdahale ederek (<code>appendChild<\/code>) eleman eklerse, taray\u0131c\u0131 5.000 kez \u00e7\u00f6kme noktas\u0131na gelir. \u00c7\u00fcnk\u00fc DOM a\u011fac\u0131nda fiziksel bir boyut veya konum de\u011fi\u015fikli\u011fi yap\u0131ld\u0131\u011f\u0131nda, taray\u0131c\u0131 t\u00fcm sayfan\u0131n matematiksel \u00f6l\u00e7\u00fclerini ba\u015ftan hesaplamak zorundad\u0131r. Buna <strong>&#8220;Reflow&#8221; (Yeniden Ak\u0131\u015f)<\/strong> denir. Sadece renk de\u011fi\u015fimi yap\u0131ld\u0131\u011f\u0131nda ise piksellerin yeniden \u00e7izilmesine <strong>&#8220;Repaint&#8221; (Yeniden Boyama)<\/strong> denir.<\/p>\n\n\n\n<p>Cevdet, performans\u0131 korumak i\u00e7in her d\u00f6ng\u00fcde ger\u00e7ek DOM&#8217;a dokunmak yerine, haf\u0131zada sanal bir kutu olan <strong>DocumentFragment<\/strong> olu\u015fturur. T\u00fcm 5.000 \u00fcr\u00fcn\u00fc \u00f6nce bu sanal kutuya (DOM&#8217;un d\u0131\u015f\u0131nda) ekler. Son olarak bu kutuyu tek bir hamlede ger\u00e7ek DOM&#8217;a yerle\u015ftirir. Taray\u0131c\u0131 5.000 kez de\u011fil, sadece 1 kez &#8220;Reflow&#8221; hesaplamas\u0131 yapar. Uygulaman\u0131n h\u0131z\u0131 milisaniyeler seviyesine d\u00fc\u015fer. DOM&#8217;a ne kadar az dokunursan\u0131z, uygulaman\u0131z o kadar h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bolum_5_Olay_Yonlendirme_Event_Bubbling_ve_Capturing\"><\/span>B\u00f6l\u00fcm 5: Olay Y\u00f6nlendirme (Event Bubbling ve Capturing)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>DOM mimarisindeki bir di\u011fer kritik yap\u0131, olaylar\u0131n (Events) yay\u0131lma mant\u0131\u011f\u0131d\u0131r. \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f \u00fc\u00e7 tane kutu (Div) hayal edin. En i\u00e7teki kutuya t\u0131klad\u0131\u011f\u0131n\u0131zda, asl\u0131nda mant\u0131ksal olarak d\u0131\u015f\u0131ndaki kutuya da, onun d\u0131\u015f\u0131ndakine de ve en nihayetinde t\u00fcm belgeye (Document) de t\u0131klam\u0131\u015f olursunuz.<\/p>\n\n\n\n<p>DOM, bu t\u0131klama olay\u0131n\u0131 bir su damlas\u0131n\u0131n g\u00f6lete d\u00fc\u015fmesi gibi y\u00f6netir. T\u0131klama an\u0131nda olay \u00f6nce en d\u0131\u015ftan (Root) hedefe do\u011fru iner, buna <strong>Capturing (Yakalama)<\/strong> denir. Hedefe ula\u015ft\u0131ktan sonra ise baloncuklar \u00e7\u0131kararak yukar\u0131ya, ebeveynlerine do\u011fru geri d\u00f6ner, buna da <strong>Bubbling (Baloncuklanma)<\/strong> denir.<\/p>\n\n\n\n<p>Bu mimari, y\u00fczlerce butona tek tek olay dinleyicisi (Listener) atamak yerine, t\u00fcm butonlar\u0131n ebeveyni olan kapsay\u0131c\u0131 tek bir div&#8217;e olay dinleyicisi atayarak (Event Delegation) sistem belle\u011fini devasa oranda rahatlatmam\u0131za olanak tan\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bolum_6_Modern_Webin_Devrimi_Virtual_DOM_Sanal_DOM\"><\/span>B\u00f6l\u00fcm 6: Modern Web&#8217;in Devrimi: Virtual DOM (Sanal DOM)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Standart (Ger\u00e7ek) DOM&#8217;un s\u00fcrekli g\u00fcncellenmesinin performans\u0131 ne kadar k\u00f6t\u00fc etkiledi\u011finden bahsetmi\u015ftik. 2013 y\u0131l\u0131 civar\u0131nda, karma\u015f\u0131kla\u015fan web uygulamalar\u0131n\u0131n bu h\u0131z problemine \u00e7\u00f6z\u00fcm bulmak amac\u0131yla Facebook m\u00fchendisleri bir devrime imza att\u0131 ve React k\u00fct\u00fcphanesiyle birlikte <strong>Virtual DOM (Sanal DOM)<\/strong> kavram\u0131n\u0131 hayat\u0131m\u0131za soktu. (Bug\u00fcn Vue.js gibi bir\u00e7ok modern k\u00fct\u00fcphane de bu mant\u0131\u011f\u0131 kullanmaktad\u0131r).<\/p>\n\n\n\n<p>React geli\u015ftiricisi olan <strong>Didem<\/strong>, anl\u0131k mesajla\u015fma panosu (Chat uygulamas\u0131) kodlamaktad\u0131r. Ekranda ayn\u0131 anda y\u00fczlerce mesaj vard\u0131r ve saniyede onlarca yeni mesaj gelmektedir. E\u011fer Didem bunu klasik JavaScript ile yapsayd\u0131, her yeni mesajda DOM a\u011fac\u0131 sars\u0131lacak ve taray\u0131c\u0131 yorulacakt\u0131. Ancak React&#8217;\u0131n Sanal DOM mimarisi s\u00fcreci \u015f\u00f6yle y\u00f6netir:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Uygulaman\u0131n o anki durumunun (State) t\u0131pat\u0131p ayn\u0131s\u0131 olan hafif bir &#8220;Sanal DOM&#8221; (JavaScript nesnelerinden olu\u015fan kopyas\u0131) bellekte tutulur.<\/li>\n\n\n\n<li>Yeni bir sohbet mesaj\u0131 geldi\u011finde, React ger\u00e7ek DOM&#8217;a asla dokunmaz. Hemen yeni bir Sanal DOM kopyas\u0131 daha \u00fcretir ve yeni mesaj\u0131 ona ekler.<\/li>\n\n\n\n<li>Ard\u0131ndan, yeni Sanal DOM ile eski Sanal DOM&#8217;u milisaniyeler i\u00e7inde birbiriyle kar\u015f\u0131la\u015ft\u0131r\u0131r. Bu s\u00fcrece <strong>&#8220;Diffing Algorithm&#8221; (Fark Bulma Algoritmas\u0131)<\/strong> denir.<\/li>\n\n\n\n<li>React aradaki fark\u0131n sadece &#8220;yeni gelen tek bir paragraf etiketi&#8221; oldu\u011funu tespit eder.<\/li>\n\n\n\n<li>Son olarak, ger\u00e7ek DOM&#8217;a gider ve a\u011fac\u0131n geri kalan\u0131na hi\u00e7 dokunmadan sadece ama sadece o yeni paragraf\u0131 ilgili yere yap\u0131\u015ft\u0131r\u0131r (<strong>Reconciliation &#8211; Uzla\u015ft\u0131rma<\/strong>).<\/li>\n<\/ol>\n\n\n\n<p>Sanal DOM, ger\u00e7ek DOM ile aram\u0131zda \u00e7al\u0131\u015fan ultra zeki bir menajer gibidir. Bizi yorucu hesaplamalardan kurtar\u0131r ve g\u00fcn\u00fcm\u00fcz\u00fcn Tek Sayfa Uygulamalar\u0131n\u0131n (Single Page Applications &#8211; SPA) masa\u00fcst\u00fc programlar\u0131 kadar h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sonuc_Saf_Kodun_Insan_Deneyimiyle_Bulustugu_Nokta\"><\/span>Sonu\u00e7: Saf Kodun \u0130nsan Deneyimiyle Bulu\u015ftu\u011fu Nokta<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Web geli\u015ftirme ekosisteminde; sunucular\u0131n, veritabanlar\u0131n\u0131n, API&#8217;lerin ve karma\u015f\u0131k algoritmalar\u0131n tek bir nihai amac\u0131 vard\u0131r: Son kullan\u0131c\u0131n\u0131n ekran\u0131nda anlaml\u0131 ve p\u00fcr\u00fczs\u00fcz bir deneyim yaratmak. Bu devasa veri ak\u0131\u015f\u0131n\u0131n ekrana, yani piksellere yans\u0131d\u0131\u011f\u0131 ve elle tutulur hale geldi\u011fi yer <strong>DOM (Document Object Model)<\/strong>&#8216;dir.<\/p>\n\n\n\n<p>DOM&#8217;un \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131, hiyerar\u015fik a\u011fa\u00e7 yap\u0131s\u0131n\u0131, d\u00fc\u011f\u00fcmlerin (Nodes) birbiriyle olan ileti\u015fimini ve taray\u0131c\u0131n\u0131n ekran\u0131 nas\u0131l \u00e7izdi\u011fini (Reflow\/Repaint) kavramak; sizi sadece kod yazan birinden \u00e7\u0131kar\u0131p, yazd\u0131\u011f\u0131 kodun donan\u0131m ve taray\u0131c\u0131 \u00fczerinde nas\u0131l bir fiziksel y\u00fck olu\u015fturdu\u011funu bilen profesyonel bir mimara (Software Architect) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u0130ster d\u00fcz Vanilla JavaScript kullan\u0131n, ister React veya Vue gibi en modern Sanal DOM k\u00fct\u00fcphaneleriyle \u00e7al\u0131\u015f\u0131n; arka planda d\u00f6nen sihrin kayna\u011f\u0131 daima W3C&#8217;nin y\u0131llar \u00f6nce kurgulad\u0131\u011f\u0131 bu muazzam nesne modelidir. \u0130nternetin nas\u0131l &#8220;canland\u0131\u011f\u0131n\u0131&#8221; anlamak, DOM&#8217;u anlamakla ba\u015flar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Giri\u015f: Statik Sayfalardan Canl\u0131 Web Uygulamalar\u0131na Ge\u00e7i\u015fin K\u00f6pr\u00fcs\u00fc \u0130nternetin ilk<a href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/\">&#8230;<\/a><\/p>\n","protected":false},"author":6,"featured_media":23962,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-23961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026) - Cenuta Blog\" \/>\n<meta property=\"og:description\" content=\"Giri\u015f: Statik Sayfalardan Canl\u0131 Web Uygulamalar\u0131na Ge\u00e7i\u015fin K\u00f6pr\u00fcs\u00fc \u0130nternetin ilk...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/\" \/>\n<meta property=\"og:site_name\" content=\"Cenuta Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cenutacom\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-18T23:45:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-18T23:45:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cenutacom\" \/>\n<meta name=\"twitter:site\" content=\"@cenutacom\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Baran O\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/#organization\",\"name\":\"Cenuta Telekom\u00fcnikasyon Anonim \u015eirketi\",\"url\":\"https:\/\/www.cenuta.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/cenutacom\",\"https:\/\/www.instagram.com\/cenutacom\/\",\"https:\/\/www.linkedin.com\/company\/cenuta\",\"https:\/\/www.youtube.com\/cenuta\",\"https:\/\/twitter.com\/cenutacom\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/#logo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2020\/08\/logo_siyah.png\",\"contentUrl\":\"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2020\/08\/logo_siyah.png\",\"width\":805,\"height\":200,\"caption\":\"Cenuta Telekom\u00fcnikasyon Anonim \u015eirketi\"},\"image\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/#website\",\"url\":\"https:\/\/www.cenuta.com\/blog\/\",\"name\":\"Cenuta Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cenuta.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg\",\"contentUrl\":\"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#webpage\",\"url\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/\",\"name\":\"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026) - Cenuta Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#primaryimage\"},\"datePublished\":\"2026-09-18T23:45:55+00:00\",\"dateModified\":\"2026-09-18T23:45:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.cenuta.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026)\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/#\/schema\/person\/0732262cd1d893b0f6ff806f442df9d5\"},\"headline\":\"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026)\",\"datePublished\":\"2026-09-18T23:45:55+00:00\",\"dateModified\":\"2026-09-18T23:45:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#webpage\"},\"wordCount\":1946,\"publisher\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg\",\"inLanguage\":\"tr\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/#\/schema\/person\/0732262cd1d893b0f6ff806f442df9d5\",\"name\":\"Baran O\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.cenuta.com\/blog\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1e4899262d57e005522a1b8ea0b9dea4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1e4899262d57e005522a1b8ea0b9dea4?s=96&d=mm&r=g\",\"caption\":\"Baran O\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"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:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/","og_locale":"tr_TR","og_type":"article","og_title":"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026) - Cenuta Blog","og_description":"Giri\u015f: Statik Sayfalardan Canl\u0131 Web Uygulamalar\u0131na Ge\u00e7i\u015fin K\u00f6pr\u00fcs\u00fc \u0130nternetin ilk...","og_url":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/","og_site_name":"Cenuta Blog","article_publisher":"https:\/\/www.facebook.com\/cenutacom","article_published_time":"2026-09-18T23:45:55+00:00","article_modified_time":"2026-09-18T23:45:57+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@cenutacom","twitter_site":"@cenutacom","twitter_misc":{"Yazan:":"Baran O","Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.cenuta.com\/blog\/#organization","name":"Cenuta Telekom\u00fcnikasyon Anonim \u015eirketi","url":"https:\/\/www.cenuta.com\/blog\/","sameAs":["https:\/\/www.facebook.com\/cenutacom","https:\/\/www.instagram.com\/cenutacom\/","https:\/\/www.linkedin.com\/company\/cenuta","https:\/\/www.youtube.com\/cenuta","https:\/\/twitter.com\/cenutacom"],"logo":{"@type":"ImageObject","@id":"https:\/\/www.cenuta.com\/blog\/#logo","inLanguage":"tr","url":"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2020\/08\/logo_siyah.png","contentUrl":"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2020\/08\/logo_siyah.png","width":805,"height":200,"caption":"Cenuta Telekom\u00fcnikasyon Anonim \u015eirketi"},"image":{"@id":"https:\/\/www.cenuta.com\/blog\/#logo"}},{"@type":"WebSite","@id":"https:\/\/www.cenuta.com\/blog\/#website","url":"https:\/\/www.cenuta.com\/blog\/","name":"Cenuta Blog","description":"","publisher":{"@id":"https:\/\/www.cenuta.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cenuta.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"ImageObject","@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#primaryimage","inLanguage":"tr","url":"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg","contentUrl":"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg","width":1920,"height":1080},{"@type":"WebPage","@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#webpage","url":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/","name":"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026) - Cenuta Blog","isPartOf":{"@id":"https:\/\/www.cenuta.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#primaryimage"},"datePublished":"2026-09-18T23:45:55+00:00","dateModified":"2026-09-18T23:45:57+00:00","breadcrumb":{"@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Ana sayfa","item":"https:\/\/www.cenuta.com\/blog\/"},{"@type":"ListItem","position":2,"name":"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026)"}]},{"@type":"Article","@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#article","isPartOf":{"@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#webpage"},"author":{"@id":"https:\/\/www.cenuta.com\/blog\/#\/schema\/person\/0732262cd1d893b0f6ff806f442df9d5"},"headline":"DOM Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r? JavaScript ve Document Object Model Kapsaml\u0131 Rehberi (2026)","datePublished":"2026-09-18T23:45:55+00:00","dateModified":"2026-09-18T23:45:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#webpage"},"wordCount":1946,"publisher":{"@id":"https:\/\/www.cenuta.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.cenuta.com\/blog\/dom-nedir-nasil-calisir-javascript-ve-document-object-model-kapsamli-rehberi-2026\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cenuta.com\/blog\/wp-content\/uploads\/2026\/09\/dom.jpg","inLanguage":"tr"},{"@type":"Person","@id":"https:\/\/www.cenuta.com\/blog\/#\/schema\/person\/0732262cd1d893b0f6ff806f442df9d5","name":"Baran O","image":{"@type":"ImageObject","@id":"https:\/\/www.cenuta.com\/blog\/#personlogo","inLanguage":"tr","url":"https:\/\/secure.gravatar.com\/avatar\/1e4899262d57e005522a1b8ea0b9dea4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1e4899262d57e005522a1b8ea0b9dea4?s=96&d=mm&r=g","caption":"Baran O"}}]}},"_links":{"self":[{"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/posts\/23961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/comments?post=23961"}],"version-history":[{"count":1,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/posts\/23961\/revisions"}],"predecessor-version":[{"id":23963,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/posts\/23961\/revisions\/23963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/media\/23962"}],"wp:attachment":[{"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/media?parent=23961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/categories?post=23961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cenuta.com\/blog\/wp-json\/wp\/v2\/tags?post=23961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}