{"id":5793,"date":"2021-08-15T12:39:00","date_gmt":"2021-08-15T09:39:00","guid":{"rendered":"https:\/\/www.niobehosting.com\/blog\/?p=5793"},"modified":"2021-07-12T18:32:28","modified_gmt":"2021-07-12T15:32:28","slug":"dom","status":"publish","type":"post","link":"https:\/\/www.niobehosting.com\/blog\/dom\/","title":{"rendered":"DOM Nedir?"},"content":{"rendered":"\n<p>\u0130nternet d\u00fcnyas\u0131nda yer alan taray\u0131c\u0131lar, her web sitesini bir belge olarak tan\u0131mlar. Bu belge i\u00e7inde (Web sitesinde) bulunan t\u00fcm d\u00f6k\u00fcmanlar da nesne olarak kabul edilir. Sitelerde kullan\u0131lan resim, metin, formlar gibi t\u00fcm ara\u00e7lar, nesne tan\u0131m\u0131n\u0131n i\u00e7erisinde girmektedir. DOM k\u0131saca, belge nesnesi modeli anlam\u0131na gelmektedir.&nbsp;<\/p>\n\n\n\n<p><strong>DOM<\/strong> (<strong>D<\/strong>ocument <strong>O<\/strong>bject <strong>M<\/strong>odel), internet teknolojisinde kullan\u0131lan <strong>HTML<\/strong> (<strong>H<\/strong>yper<strong>T<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage) Hiper Metin \u0130\u015faretleme Dili&nbsp; ve <strong>XML<\/strong> (E<strong>X<\/strong>tensible <strong>M<\/strong>arkup <strong>L<\/strong>anguage) Geni\u015fletilebilir \u0130\u015faretleme Dili gibi belgelerin, t\u00fcm programlama dilleriyle ya da script dosyalar\u0131yla ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan bir arabirim arac\u0131d\u0131r. Programlama dillerinde yayg\u0131n olarak kullan\u0131lan <strong>OO<\/strong> (<strong>O<\/strong>bject <strong>O<\/strong>riented) yakla\u015f\u0131m\u0131 da DOM yap\u0131s\u0131na benzetilmektedir. Web sitelerinin HTML sayfalar\u0131nda yer alan DOM nesneleri a\u015fa\u011f\u0131daki \u015fekilde s\u0131ralanmaktad\u0131r;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&lt;head&gt; gizleme etiketi<\/li><li>&lt;body&gt; belgenin g\u00f6vdesini tan\u0131mlama etiketi<\/li><li>&lt;title&gt; ba\u015fl\u0131k etiketi<\/li><li>&lt;h&gt;hiyerar\u015fik olarak ba\u015fl\u0131klara eklenen HTML etiketleri<\/li><li>&lt;style&gt; stil bilgi etiketi<\/li><li>&lt;section&gt; sayfa b\u00f6l\u00fcm etiketi<\/li><li>&lt;p&gt; paragraf etiketi<\/li><\/ul>\n\n\n\n<p>Yukar\u0131da s\u0131ralanan t\u00fcm etiketler, DOM nesneleri kapsam\u0131na girer. DOM kullan\u0131m amac\u0131, HTML ya da XML ara\u00e7lar\u0131 ile script dillerinin ileti\u015fim kurarak, etkile\u015fimli web siteleri olu\u015fturulmas\u0131n\u0131 sa\u011flamakt\u0131r. <strong>DOM<\/strong> arac\u0131, <strong>Javascript<\/strong>, <strong>PHP<\/strong>, <strong>ASP<\/strong> (<strong>A<\/strong>ctive <strong>S<\/strong>erver <strong>P<\/strong>age) gibi bir\u00e7ok yaz\u0131l\u0131m diline destek vermektedir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DOM Yap\u0131s\u0131 ve DOM Metotlar\u0131<\/h2>\n\n\n\n<p>DOM, T\u00fcrk\u00e7e a\u00e7\u0131l\u0131m\u0131 ile Dok\u00fcman Nesne Modeli, internet sitelerinde yer alan dok\u00fcmanlara eri\u015fmeyi sa\u011flayan ara\u00e7t\u0131r. DOM ayn\u0131 zamanda W3C standartlar\u0131ndan biridir. W3C, web sitelerini belirlenmi\u015f kalite standartlar\u0131na ta\u015f\u0131may\u0131 hedefleyen <strong>W3C <\/strong>(<strong>W<\/strong>orld <strong>W<\/strong>ide <strong>W<\/strong>eb <strong>C<\/strong>onsortium) yani D\u00fcnya \u00c7ap\u0131nda A\u011f Konsersuyumu olarak bilinmektedir. W3C Birli\u011finin tan\u0131mlad\u0131\u011f\u0131 standartlar ise \u201c<strong>W3C Standartlar\u0131\u201d <\/strong>olarak adland\u0131r\u0131lmaktad\u0131r. DOM, bu standartlar\u0131 uygulayan arabirim arac\u0131na verilen isimdir. DOM arac\u0131n\u0131n yap\u0131s\u0131 genel olarak a\u011faca benzetilmektedir. DOM a\u011fac\u0131n\u0131n en tepesinde HTML etiketleri yer almaktad\u0131r. Sonras\u0131nda hiyerar\u015fik olarak di\u011fer etiketler s\u0131ralanmaktad\u0131r. Bu a\u00e7\u0131klama \u201c<strong>DOM Nedir HTML<\/strong>\u201d sorusuna da yan\u0131t vermektedir.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"417\" src=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-yapisi.png\" alt=\"\" class=\"wp-image-5794\" srcset=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-yapisi.png 626w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-yapisi-300x200.png 300w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-yapisi-100x67.png 100w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<p>DOM \u00f6zet olarak HTML yap\u0131lar\u0131 i\u00e7in kullan\u0131lmakta olan dok\u00fcman nesne modelidir. HTML DOM metotlar\u0131, elementler \u00fczerinde uygulanan t\u00fcm eylemleri kapsayan kavramd\u0131r. DOM, HTML \u00f6\u011felerini, elementlere eri\u015fmek i\u00e7in metotlar halinde kullan\u0131r. HTML yap\u0131s\u0131na yeni elementler ekleme, bu elementleri de\u011fi\u015ftirme ya da silme i\u015flemlerinde DOM arac\u0131ndan yararlan\u0131l\u0131r. HTML DOM \u00f6zellikleri, elementlerin de\u011fi\u015ftirilebildi\u011fi ve ayarlanabildi\u011fi de\u011ferler olarak ifade edilmektedir. \u201c<strong>DOM Nedir?<\/strong>\u201d sorusuna ise HTML DOM \u00f6zelliklerine, Javascript \u00fczerinden eri\u015fim sa\u011fland\u0131\u011f\u0131 belirterek cevap verebiliriz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DOM B\u00f6l\u00fcmleri Nelerdir?<\/h2>\n\n\n\n<p>\u0130nternet \u00fczerinden eri\u015filen t\u00fcm web sitelerinde yer alan bilgileri ve belgeleri, olu\u015fturulan kod yap\u0131lar\u0131 temsil etmektedir. DOM, a\u00e7\u0131l\u0131m\u0131 ile belge nesne modeli ise web ekosisteminde yer alan belgelerin standart edilmi\u015f yap\u0131lar\u0131n\u0131n ve i\u00e7eriklerinin temsili olarak g\u00f6sterilmektedir. Se\u00e7ili web sitesinde, programlama dilleri ile ba\u011flant\u0131 kurulmas\u0131 ve ba\u011flant\u0131n\u0131n ard\u0131ndan belgeler \u00fczerinde de\u011fi\u015fiklikler yap\u0131lmas\u0131 yine DOM arac\u0131 ile ger\u00e7ekle\u015ftirilmektedir. Bu bilgi \u201c<strong>DOM Nedir?<\/strong>\u201d sorusunu da a\u00e7\u0131klamaktad\u0131r. DOM ayn\u0131 zamanda bir W3C standard\u0131 oldu\u011fu i\u00e7in, bu standart arac\u0131l\u0131\u011f\u0131 ile komut dosyalar\u0131na ve programlama dillerine kolayca eri\u015fim sa\u011flayabilmektedir. DOM\u2019un bu eri\u015fim \u00f6zelli\u011fi, nesnelerin \u00fczerinde g\u00fcncellenebilir de\u011fi\u015fiklikler yapmay\u0131 da beraberinde getirmektedir. Yaz\u0131l\u0131m dillerinden ba\u011f\u0131ms\u0131z \u015fekilde depolanm\u0131\u015f olan veriler, DOM <strong>API<\/strong>\u2019leri (<strong>A<\/strong>pplication <strong>P<\/strong>rogramming<strong> I<\/strong>nterface) Uygulama Programlama Aray\u00fcz\u00fc arac\u0131l\u0131\u011f\u0131yla belgelerin yarat\u0131lmas\u0131n\u0131 desteklemektedir. Bu \u015fekilde \u00fczerinde \u00e7al\u0131\u015f\u0131lan belgelerin i\u00e7erikleri ve yap\u0131lar\u0131, programlama dilleri ile kolay ve h\u0131zl\u0131 bir \u015fekilde de\u011fi\u015ftirilmektedir.&nbsp;<\/p>\n\n\n\n<p>Ger\u00e7ekle\u015ftirilen i\u015flem ak\u0131\u015f\u0131 \u201c<strong>DOM api nedir?\u201d<\/strong> sorusuna da yan\u0131t veriyor. Geli\u015ftiricilerin kullanm\u0131\u015f oldu\u011fu DOM b\u00f6l\u00fcmleri ise 3\u2019e ayr\u0131lmaktad\u0131r.&nbsp;<\/p>\n\n\n\n<p>Bunlar;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>\u00c7ekirdek DOM B\u00f6l\u00fcm\u00fc (Core DOM):<\/strong> T\u00fcm belge t\u00fcrlerinde kullan\u0131m\u0131 m\u00fcmk\u00fcn olan, standart yap\u0131daki DOM modelini ifade eder.<\/li><li><strong>XML DOM B\u00f6l\u00fcm\u00fc: <\/strong>Sadece XML belgelerinde kullan\u0131lan DOM modelidir.<\/li><li><strong>HTML DOM B\u00f6l\u00fcm\u00fc:<\/strong> T\u00fcm HTML belgelerinde kullan\u0131labilen DOM modeli b\u00f6l\u00fcm\u00fcd\u00fcr.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg\" alt=\"\" class=\"wp-image-5795\" srcset=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg 512w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari-300x300.jpeg 300w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari-150x150.jpeg 150w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari-100x100.jpeg 100w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari-450x450.jpeg 450w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari-120x120.jpeg 120w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DOM Temel Kavramlar\u0131 Nelerdir?<\/h2>\n\n\n\n<p>DOM i\u00e7eriklerini tan\u0131mlarken, belge, nesne gibi kavramlarla kar\u015f\u0131la\u015f\u0131l\u0131r. Bu kavramlar bazen kar\u0131\u015f\u0131kl\u0131\u011fa neden oluyor. DOM \u00e7al\u0131\u015fma prensiplerini daha iyi anlayabilmek i\u00e7in olu\u015fturulmu\u015f olan temel DOM kavramlar\u0131 a\u015fa\u011f\u0131daki \u015fekilde a\u00e7\u0131klanabilir;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Belge Kavram\u0131<\/h3>\n\n\n\n<p>Dok\u00fcman nesne modeli olan DOM\u2019da belge kavram\u0131, HTML kodlarla haz\u0131rlanm\u0131\u015f olan web sayfas\u0131n\u0131 ifade eder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nesne Kavram\u0131<\/h3>\n\n\n\n<p>DOM i\u00e7erisinde s\u0131k kullan\u0131lan nesne kavram\u0131 ise HTML kod ile olu\u015fturulmu\u015f olan web sayfalar\u0131nda yer alan elemanlar\u0131n her birini i\u015faret etmektedir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c7a\u011fr\u0131lma Kavram\u0131<\/h3>\n\n\n\n<p>Sayfalarda bulunan kod par\u00e7alar\u0131 \u00fczerinde belirtilen komutun aktifle\u015ftirilmesi i\u00e7in DOM a\u011fac\u0131nda yer alan nesneler, hiyerar\u015fik s\u0131ralama ile \u00e7a\u011fr\u0131lmal\u0131d\u0131r. S\u0131ralamada ilk \u00f6nce d\u00f6k\u00fcmanlar, sonra \u201c<strong>Root elementleri<\/strong>\u201d, ard\u0131ndan ise element yer al\u0131r. \u00c7a\u011fr\u0131lma kavram\u0131, \u00f6\u011felerin i\u015flevlerini yerini getirmesi i\u00e7in aktifle\u015ftirilmesi gerekti\u011fi anlam\u0131na gelmektedir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">DOM D\u00fc\u011f\u00fcm A\u011fac\u0131 Kavram\u0131<\/h3>\n\n\n\n<p>Bu kavram, DOM yap\u0131s\u0131n\u0131n hiyerar\u015fik olarak belgeleri ve nesneleri birbirine ba\u011flam\u0131\u015f oldu\u011fu yap\u0131y\u0131 g\u00f6stermektedir. DOM Node Tree olarak da adland\u0131r\u0131lan kavram, yap\u0131 i\u00e7erisinde yer alan t\u00fcm d\u00fc\u011f\u00fcmleri (node) birbirine ba\u011flamaktad\u0131r. Birbirine ba\u011flanan d\u00fc\u011f\u00fcmler ise d\u00f6k\u00fcmanlar, dok\u00fcman tipleri, elementler, metinler gibi t\u00fcm nesneleri ifade eder. DOM d\u00fc\u011f\u00fcm a\u011fac\u0131n\u0131n her d\u00fc\u011f\u00fcm\u00fcnde alt \u00f6\u011feler de bulunur. Alt \u00f6\u011feler, hiyerar\u015fik yap\u0131 i\u00e7erisinde eri\u015filebilen alanlar\u0131 ay\u0131rmakla g\u00f6revlidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">DOM Metotlar\u0131 Kavram\u0131<\/h3>\n\n\n\n<p>DOM arac\u0131l\u0131\u011f\u0131yla y\u00fcr\u00fct\u00fclen t\u00fcm i\u015flemlere DOM metodu ad\u0131 verilir. \u00d6rnek olarak; HTML \u00f6\u011felerinin \u00fczerinde ger\u00e7ekle\u015ftirilen t\u00fcm i\u015flemler, ayr\u0131 bir metot olarak g\u00f6sterilir.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"626\" src=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir.jpeg\" alt=\"\" class=\"wp-image-5796\" srcset=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir.jpeg 626w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir-300x300.jpeg 300w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir-150x150.jpeg 150w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir-100x100.jpeg 100w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir-450x450.jpeg 450w, https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-nasil-kullanilir-120x120.jpeg 120w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">DOM Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n\n\n\n<p>DOM, web sayfalar\u0131n\u0131n yap\u0131land\u0131r\u0131lm\u0131\u015f hiyerar\u015fik d\u00fczende temsil edilmesinin en kolay ve i\u015flevsel yoludur. DOM i\u015flem ak\u0131\u015f\u0131nda, belge nesneleri arac\u0131l\u0131\u011f\u0131yla sa\u011flanm\u0131\u015f olan komutlar ya da y\u00f6ntemler kullan\u0131lmaktad\u0131r. Bu y\u00f6ntemlerle etiket, kimlik, s\u0131n\u0131f ya da \u00f6\u011felere kolayca eri\u015fmekte ve \u00fczerinde de\u011fi\u015fiklik yap\u0131labilmektedir. DOM internet d\u00fcnyas\u0131nda 4 farkl\u0131 \u015fekilde kullan\u0131l\u0131yor.<\/p>\n\n\n\n<p>Bunlar;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Statik DOM Kullan\u0131m\u0131: <\/strong>\u00d6nce bir DOM a\u011fac\u0131 olu\u015fturulur ve HTML etiketleri yard\u0131m\u0131yla sayfa \u00fczerinde tasar\u0131m ger\u00e7ekle\u015ftirilir.<\/li><li><strong>Etkile\u015fimli Web Sayfas\u0131 Olu\u015fturma:<\/strong> Etkile\u015fimli (\u0130nteraktif) web sitesi olu\u015fturma i\u015flemleri DOM API arac\u0131l\u0131\u011f\u0131yla y\u00fcr\u00fctmektedir. DOM API, DOM a\u011fac\u0131nda yer alan HTML \u00f6\u011felerinin kontrol edilmesi ve y\u00f6netilmesini, form verilerinin g\u00fcncellenmesini, 2 boyutlu resimlere eri\u015fim ile d\u00fczenleme yap\u0131lmas\u0131n\u0131 sa\u011flamak amac\u0131yla kullan\u0131lmaktad\u0131r.<\/li><li><strong>Javascript \u00dczerinden DOM Eri\u015fimi ve G\u00fcncellemeler: <\/strong>Javascript \u00fczerinden, DOM d\u00f6k\u00fcmanlar\u0131 i\u00e7erisinde yer alan \u00e7al\u0131\u015f\u0131lacak \u00f6\u011feye ula\u015f\u0131lmaktad\u0131r. HTML \u00f6\u011felerinin atamas\u0131 ve g\u00fcncellemeleri bu sistem ile ger\u00e7ekle\u015ftirilmektedir.<\/li><li><strong>JQuery \u00dczerinden DOM Eri\u015fimi:<\/strong> JQuery kullan\u0131m\u0131nda ya\u015fanan sorunlar ve uyumsuzluklar DOM API ile d\u00fczenlenmi\u015ftir. JQuery \u00fczerinden DOM API arac\u0131l\u0131\u011f\u0131yla \u00f6\u011felere eri\u015fim sa\u011flanabilmekte, y\u00f6netim ve g\u00fcncelleme i\u015flemleri yap\u0131lmaktad\u0131r.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">DOM Yap\u0131s\u0131nda Bulunan Temel Veri T\u00fcrleri Nelerdir?<\/h2>\n\n\n\n<p>DOM yap\u0131s\u0131nda yer alan farkl\u0131 veri t\u00fcrleri bulunmaktad\u0131r. T\u00fcm temel verilerin, farkl\u0131 bile\u015fenleri temsil edebilir hale gelmesi i\u00e7in DOM arac\u0131ndan yararlan\u0131lmaktad\u0131r. DOM temel veri t\u00fcrleri ise a\u015fa\u011f\u0131daki \u015fekilde s\u0131ralanmaktad\u0131r;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00f6k\u00fcmanlar (Document)<\/h3>\n\n\n\n<p>Belge nesnesi olarak ifade edilen kavram, web sayfas\u0131n\u0131n kendisidir. DOM a\u011fac\u0131, HTML sayfas\u0131nda bulunan bir elemente eri\u015fim sa\u011flamak i\u00e7in, i\u015flemlerini belge nesnesinde y\u00fcr\u00fctmektedir. Web taray\u0131c\u0131s\u0131na y\u00fcklenen HTML belgesi, otomatik \u015fekilde dok\u00fcman (Document) haline getirilmektedir. DOM API de yer alan nesne, belge niteli\u011finde oldu\u011fu zaman, dok\u00fcman kaynak d\u00fc\u011f\u00fcm\u00fcne ba\u011fl\u0131 olarak kullan\u0131labilmektedir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00fc\u011f\u00fcm (Node)<\/h3>\n\n\n\n<p>D\u00fc\u011f\u00fcm, bilgisayar a\u011f\u0131 i\u00e7erisinde, ba\u015fka birimlerle ileti\u015fime ge\u00e7me yetene\u011fine sahip olan y\u00f6nlendirici \u00f6zellikte elektronik birimdir. DOM yap\u0131s\u0131nda yer alan belgelerde bulunan nesneler d\u00fc\u011f\u00fcm (Node) olarak ifade edilir. DOM i\u00e7erisine yeni bir \u00f6\u011fe eklemek i\u00e7in, o \u00f6\u011feye ait bir d\u00fc\u011f\u00fcm (Node) olu\u015fturmak gerekmektedir. HTML belgelerinde, her nesne bir d\u00fc\u011f\u00fcm olarak DOM a\u011fac\u0131nda yer almaktad\u0131r.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Element<\/h3>\n\n\n\n<p>Node\u2019lara ba\u011fl\u0131 olarak i\u015flem ger\u00e7ekle\u015ftiren \u00f6\u011feler element olarak tan\u0131mlanmaktad\u0131r. Elementler, DOM API komutlar\u0131 ile d\u00f6nd\u00fcr\u00fclebilir \u00f6zelliktedir. CSS kullan\u0131m\u0131 ile t\u00fcm elementlere s\u0131n\u0131f eklemek de m\u00fcmk\u00fcnd\u00fcr. Javascript kullan\u0131m\u0131 ile elementler aras\u0131nda etkile\u015fim kurulmakta ve d\u00fczenleme yap\u0131lmaktad\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00fc\u011f\u00fcm Listesi (NodeList)<\/h3>\n\n\n\n<p>Belgeler i\u00e7erisinde yer alan d\u00fc\u011f\u00fcmlerin bir arada oldu\u011fu liste, d\u00fc\u011f\u00fcm listesi olarak ifade edilir. HTML koleksiyon ve d\u00fc\u011f\u00fcm listesi veri kavramlar\u0131 birbirine kar\u0131\u015ft\u0131r\u0131lmakta \u00e7\u00fcnk\u00fc her ikisi de ayn\u0131 g\u00f6revi y\u00fcr\u00fctmektedir. D\u00fc\u011f\u00fcm listesinde bulunan t\u00fcm \u00f6\u011felere, index taraf\u0131ndan <strong>\u201cList\u201d <\/strong>komutlar\u0131 arac\u0131l\u0131\u011f\u0131yla eri\u015filir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00d6znitelik (Attribute)<\/h3>\n\n\n\n<p>DOM yap\u0131s\u0131nda yer alan \u00f6zniteliklerin her biri DOM d\u00fc\u011f\u00fcmleri olarak tan\u0131mlanmaktad\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00d6\u011fe Dizini (Named Node Map)<\/h3>\n\n\n\n<p>\u00d6\u011fe dizininde yer alan \u00f6\u011felerin her biri Attr nesnelerini i\u00e7erisinde bar\u0131nd\u0131ran dizinlerdir. Bu dizin i\u00e7erisinde, nesnelerin hiyerar\u015fik s\u0131ralama ile dizilmesi gerekmez. Buna ra\u011fmen nesnelere dizin arac\u0131l\u0131\u011f\u0131yla eri\u015fim sa\u011flanabilir. \u00d6\u011fe dizini (Named Node Map) nesnesinde de\u011fi\u015fiklik yap\u0131ld\u0131\u011f\u0131 anda, yap\u0131 otomatik olarak g\u00fcncellenmektedir.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0130nternet d\u00fcnyas\u0131nda yer alan taray\u0131c\u0131lar, her web sitesini bir belge olarak tan\u0131mlar. Bu belge i\u00e7inde (Web sitesinde) bulunan t\u00fcm d\u00f6k\u00fcmanlar da nesne olarak kabul edilir&#8230;.<\/p>\n","protected":false},"author":16,"featured_media":5795,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,48],"tags":[],"class_list":["post-5793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nedir-nasil-yapilir","category-programlama"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>DOM Nedir? - Niobe Hosting<\/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:\/\/www.niobehosting.com\/blog\/dom\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DOM Nedir? - Niobe Hosting\" \/>\n<meta property=\"og:description\" content=\"\u0130nternet d\u00fcnyas\u0131nda yer alan taray\u0131c\u0131lar, her web sitesini bir belge olarak tan\u0131mlar. Bu belge i\u00e7inde (Web sitesinde) bulunan t\u00fcm d\u00f6k\u00fcmanlar da nesne olarak kabul edilir....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.niobehosting.com\/blog\/dom\/\" \/>\n<meta property=\"og:site_name\" content=\"Niobe Hosting\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-15T09:39:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Arif Uslu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arif Uslu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/\"},\"author\":{\"name\":\"Arif Uslu\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#\\\/schema\\\/person\\\/494b0e09a5fb7a37403669461b1ad1f0\"},\"headline\":\"DOM Nedir?\",\"datePublished\":\"2021-08-15T09:39:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/\"},\"wordCount\":1706,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/wp-content\\\/uploads\\\/dom-temel-kavramlari.jpeg\",\"articleSection\":[\"Nedir &amp; Nas\u0131l Yap\u0131l\u0131r?\",\"Programlama\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/\",\"url\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/\",\"name\":\"DOM Nedir? - Niobe Hosting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/wp-content\\\/uploads\\\/dom-temel-kavramlari.jpeg\",\"datePublished\":\"2021-08-15T09:39:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/wp-content\\\/uploads\\\/dom-temel-kavramlari.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/wp-content\\\/uploads\\\/dom-temel-kavramlari.jpeg\",\"width\":512,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/dom\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DOM Nedir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/\",\"name\":\"Niobe Hosting\",\"description\":\"Niobe Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#organization\",\"name\":\"Niobe Hosting\",\"url\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/wp-content\\\/uploads\\\/blog-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/wp-content\\\/uploads\\\/blog-logo.png\",\"width\":332,\"height\":49,\"caption\":\"Niobe Hosting\"},\"image\":{\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/#\\\/schema\\\/person\\\/494b0e09a5fb7a37403669461b1ad1f0\",\"name\":\"Arif Uslu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5f2eff246a5e7bf1ce5c669ca07b6bfe534d0f7b526bf2f57f24debe81780237?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5f2eff246a5e7bf1ce5c669ca07b6bfe534d0f7b526bf2f57f24debe81780237?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5f2eff246a5e7bf1ce5c669ca07b6bfe534d0f7b526bf2f57f24debe81780237?s=96&d=mm&r=g\",\"caption\":\"Arif Uslu\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/ariphuslu\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/arifuslu\\\/\"],\"url\":\"https:\\\/\\\/www.niobehosting.com\\\/blog\\\/author\\\/arifuslu\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DOM Nedir? - Niobe Hosting","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.niobehosting.com\/blog\/dom\/","og_locale":"tr_TR","og_type":"article","og_title":"DOM Nedir? - Niobe Hosting","og_description":"\u0130nternet d\u00fcnyas\u0131nda yer alan taray\u0131c\u0131lar, her web sitesini bir belge olarak tan\u0131mlar. Bu belge i\u00e7inde (Web sitesinde) bulunan t\u00fcm d\u00f6k\u00fcmanlar da nesne olarak kabul edilir....","og_url":"https:\/\/www.niobehosting.com\/blog\/dom\/","og_site_name":"Niobe Hosting","article_published_time":"2021-08-15T09:39:00+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg","type":"image\/jpeg"}],"author":"Arif Uslu","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Arif Uslu","Tahmini okuma s\u00fcresi":"6 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#article","isPartOf":{"@id":"https:\/\/www.niobehosting.com\/blog\/dom\/"},"author":{"name":"Arif Uslu","@id":"https:\/\/www.niobehosting.com\/blog\/#\/schema\/person\/494b0e09a5fb7a37403669461b1ad1f0"},"headline":"DOM Nedir?","datePublished":"2021-08-15T09:39:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.niobehosting.com\/blog\/dom\/"},"wordCount":1706,"commentCount":0,"publisher":{"@id":"https:\/\/www.niobehosting.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#primaryimage"},"thumbnailUrl":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg","articleSection":["Nedir &amp; Nas\u0131l Yap\u0131l\u0131r?","Programlama"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.niobehosting.com\/blog\/dom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.niobehosting.com\/blog\/dom\/","url":"https:\/\/www.niobehosting.com\/blog\/dom\/","name":"DOM Nedir? - Niobe Hosting","isPartOf":{"@id":"https:\/\/www.niobehosting.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#primaryimage"},"image":{"@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#primaryimage"},"thumbnailUrl":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg","datePublished":"2021-08-15T09:39:00+00:00","breadcrumb":{"@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.niobehosting.com\/blog\/dom\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#primaryimage","url":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg","contentUrl":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/dom-temel-kavramlari.jpeg","width":512,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/www.niobehosting.com\/blog\/dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/www.niobehosting.com\/blog\/"},{"@type":"ListItem","position":2,"name":"DOM Nedir?"}]},{"@type":"WebSite","@id":"https:\/\/www.niobehosting.com\/blog\/#website","url":"https:\/\/www.niobehosting.com\/blog\/","name":"Niobe Hosting","description":"Niobe Hosting","publisher":{"@id":"https:\/\/www.niobehosting.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.niobehosting.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.niobehosting.com\/blog\/#organization","name":"Niobe Hosting","url":"https:\/\/www.niobehosting.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.niobehosting.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/blog-logo.png","contentUrl":"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/blog-logo.png","width":332,"height":49,"caption":"Niobe Hosting"},"image":{"@id":"https:\/\/www.niobehosting.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.niobehosting.com\/blog\/#\/schema\/person\/494b0e09a5fb7a37403669461b1ad1f0","name":"Arif Uslu","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/secure.gravatar.com\/avatar\/5f2eff246a5e7bf1ce5c669ca07b6bfe534d0f7b526bf2f57f24debe81780237?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5f2eff246a5e7bf1ce5c669ca07b6bfe534d0f7b526bf2f57f24debe81780237?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5f2eff246a5e7bf1ce5c669ca07b6bfe534d0f7b526bf2f57f24debe81780237?s=96&d=mm&r=g","caption":"Arif Uslu"},"sameAs":["https:\/\/www.instagram.com\/ariphuslu\/","https:\/\/www.linkedin.com\/in\/arifuslu\/"],"url":"https:\/\/www.niobehosting.com\/blog\/author\/arifuslu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/posts\/5793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/comments?post=5793"}],"version-history":[{"count":0,"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/posts\/5793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/media\/5795"}],"wp:attachment":[{"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/media?parent=5793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/categories?post=5793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.niobehosting.com\/blog\/wp-json\/wp\/v2\/tags?post=5793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}