{"id":34590,"date":"2023-04-14T10:06:37","date_gmt":"2023-04-14T07:06:37","guid":{"rendered":"https:\/\/www.natro.com\/blog\/?p=34590"},"modified":"2023-04-12T10:52:32","modified_gmt":"2023-04-12T07:52:32","slug":"dom-document-object-model-nedir-ne-ise-yarar","status":"publish","type":"post","link":"https:\/\/www.natro.com\/blog\/dom-document-object-model-nedir-ne-ise-yarar\/","title":{"rendered":"DOM (Document Object Model) Nedir, Ne \u0130\u015fe Yarar?"},"content":{"rendered":"\n

Web geli\u015ftirme, modern d\u00fcnyan\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. Bug\u00fcn web, neredeyse her \u015feyi m\u00fcmk\u00fcn k\u0131lan bir ara\u00e7t\u0131r. Bu platformda \u00e7al\u0131\u015fan uygulamalar\u0131n ana temeli ise web sayfalar\u0131d\u0131r. Web sayfalar\u0131n\u0131n tasar\u0131m\u0131 ve i\u015flevselli\u011fi, HTML, CSS ve JavaScript gibi web teknolojileri taraf\u0131ndan sa\u011flanmaktad\u0131r. DOM da bu teknolojiler aras\u0131nda \u00f6nemli bir yer tutar.<\/p>\n\n\n\n

DOM, \u201cDocument Object Model\u201d\u0131n k\u0131saltmas\u0131d\u0131r. Web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr. Bu programlama aray\u00fcz\u00fc, bir web sayfas\u0131ndaki her t\u00fcrl\u00fc bile\u015fenini yani HTML elemanlar\u0131, metin, resimler ve di\u011fer medya dosyalar\u0131n\u0131 i\u00e7erir.<\/p>\n\n\n\n

DOM, bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131, i\u00e7eri\u011fini ve \u00f6zelliklerini olu\u015fturan nesnelerin hiyerar\u015fik bir yap\u0131 i\u00e7inde d\u00fczenlenmesini sa\u011flar. Bu nesneler, HTML elemanlar\u0131, metin, resimler ve di\u011fer medya dosyalar\u0131 gibi web sayfas\u0131ndaki her t\u00fcrl\u00fc bile\u015feni i\u00e7erebilir.<\/p>\n\n\n\n

JavaScript programlama dili, DOM API\u2019sini kullanarak web sayfas\u0131ndaki nesnelere eri\u015febilir ve bunlar\u0131 d\u00fczenleyebilir. Bu, sayfan\u0131n i\u00e7eri\u011fini dinamik olarak de\u011fi\u015ftirmenizi, \u00f6zelliklerini g\u00fcncellemenizi ve etkile\u015fimli bir web uygulamalar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n\n\n\n

DOM, \u00f6zellikle web geli\u015ftiricileri i\u00e7in \u00e7ok \u00f6nemli bir ara\u00e7t\u0131r \u00e7\u00fcnk\u00fc web sayfalar\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, davran\u0131\u015f\u0131n\u0131 ve i\u015flevselli\u011fini kontrol etmek i\u00e7in kullan\u0131l\u0131r. Ayr\u0131ca, bir web sayfas\u0131n\u0131n HTML yap\u0131s\u0131n\u0131 anlamak ve manip\u00fcle etmek i\u00e7in de \u00e7ok yararl\u0131d\u0131r.<\/p>\n\n\n\n

DOM\u2019un web geli\u015ftiricileri i\u00e7in neden \u00f6nemli oldu\u011funu g\u00f6steren baz\u0131 etmenler \u015fu \u015fekildedir:<\/p>\n\n\n\n

1. Web sayfalar\u0131n\u0131n i\u00e7eri\u011fi de\u011fi\u015ftirilebilir: <\/strong>DOM, web sayfas\u0131ndaki herhangi bir elemana JavaScript kullanarak eri\u015fmenizi ve de\u011fi\u015ftirmenizi sa\u011flar. Bu \u00f6zellikle web geli\u015ftiricileri a\u00e7\u0131s\u0131ndan gelen geri d\u00f6n\u00fctlere g\u00f6re, web sayfas\u0131n\u0131n i\u00e7eri\u011fini dinamik olarak de\u011fi\u015ftirmenize, \u00f6zelliklerini de\u011fi\u015ftirmenize ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n\n\n\n

2. Web sayfalar\u0131n\u0131n \u00f6zellikleri de\u011fi\u015ftirilebilir:<\/strong> DOM, web sayfas\u0131ndaki elemanlar\u0131n \u00f6zelliklerine eri\u015fmenizi ve bu \u00f6zellikleri de\u011fi\u015ftirmenizi sa\u011flar. \u00d6rne\u011fin, bir JavaScript fonksiyonu, bir web sayfas\u0131 arac\u0131n\u0131n s\u0131n\u0131f\u0131n\u0131 de\u011fi\u015ftirebilir veya bir \u00f6zellik de\u011ferini de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

3. Web sayfalar\u0131n\u0131n etkile\u015fimleri yakalanabilir:<\/strong> DOM, web sayfas\u0131ndaki etkile\u015fimli elemanlar\u0131n olaylar\u0131n\u0131 yakalaman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bir etkile\u015fim arac\u0131n\u0131n t\u0131klanma olay\u0131n\u0131 yakalayabilir ve t\u0131klama i\u015flemini i\u015fleyebilirsiniz.<\/p>\n\n\n\n

4. Web sayfalar\u0131, web geli\u015ftiricileri taraf\u0131ndan y\u00f6netilebilir:<\/strong> DOM, web sayfas\u0131ndaki elemanlar\u0131n hiyerar\u015fik yap\u0131s\u0131n\u0131 temsil eder. Bu yap\u0131, web geli\u015ftiricilerinin web sayfalar\u0131ndaki elemanlar\u0131 anlamas\u0131na ve y\u00f6netmesine yard\u0131mc\u0131 olur.<\/p>\n\n\n\n

5. Web sayfalar\u0131n\u0131n performans\u0131 iyile\u015ftirilebilir: <\/strong>DOM, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr ve web sayfalar\u0131n\u0131n performans\u0131n\u0131 etkileyebilir. Web geli\u015ftiricileri, DOM de\u011fi\u015fikliklerini optimize etmek i\u00e7in \u00e7e\u015fitli teknikler kullanarak web sayfalar\u0131n\u0131n performans\u0131n\u0131 art\u0131rabilir.<\/p>\n\n\n\n

K\u0131sacas\u0131, DOM, web geli\u015ftiricileri i\u00e7in \u00e7ok \u00f6nemlidir \u00e7\u00fcnk\u00fc web sayfalar\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, davran\u0131\u015f\u0131n\u0131 ve i\u015flevselli\u011fini kontrol etmek i\u00e7in kullan\u0131l\u0131r. DOM, web sayfalar\u0131ndaki elemanlara eri\u015fmenizi ve de\u011fi\u015ftirmenizi, etkile\u015fimleri yakalaman\u0131z\u0131, web sayfalar\u0131n\u0131n performans\u0131n\u0131 iyile\u015ftirmenizi ve daha fazlas\u0131n\u0131 yapman\u0131z\u0131 sa\u011flar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

DOM\u2019un Yap\u0131s\u0131 Nedir, Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/span><\/h2>\n\n\n\n

DOM, bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir a\u011fa\u00e7 yap\u0131s\u0131d\u0131r. Bu a\u011fa\u00e7 yap\u0131s\u0131, her bir HTML eleman\u0131n\u0131n bir d\u00fc\u011f\u00fcm\u00fc veya node\u2019u temsil etti\u011fi bir hiyerar\u015fi olarak d\u00fczenlenmi\u015ftir. Her bir d\u00fc\u011f\u00fcm, eleman\u0131n \u00f6zelliklerini,\u00a0Child Node\u00a0ve Parent Node\u00a0d\u00fc\u011f\u00fcm\u00fcn\u00fc i\u00e7erir.<\/p>\n\n\n\n

DOM a\u011fac\u0131, web sayfas\u0131ndaki HTML etiketleri temel al\u0131narak olu\u015fturulur. Taray\u0131c\u0131, web sayfas\u0131n\u0131n kaynak kodunu okur ve DOM a\u011fac\u0131n\u0131 otomatik olarak olu\u015fturur. DOM, web sayfas\u0131 y\u00fcklendi\u011finde taray\u0131c\u0131 taraf\u0131ndan otomatik olarak olu\u015fturulur. Taray\u0131c\u0131, HTML belgesinin t\u00fcm elemanlar\u0131n\u0131 okur ve bir DOM a\u011fac\u0131 olu\u015fturur. Bu a\u011fa\u00e7 yap\u0131s\u0131, HTML belgesindeki t\u00fcm elemanlar\u0131n hiyerar\u015fik bir s\u0131rayla d\u00fczenlenmesini sa\u011flar.<\/p>\n\n\n\n

JavaScript, DOM API\u2019s\u0131n\u0131 kullanarak bu a\u011fa\u00e7 yap\u0131s\u0131na eri\u015febilir. Bu \u015fekilde i\u00e7erik, \u00f6zellikler ve etkinlikler gibi elemanlar \u00fczerinde de\u011fi\u015fiklik yapabilir. \u00d6rne\u011fin, bir JavaScript fonksiyonu, bir d\u00fc\u011f\u00fcm\u00fcn s\u0131n\u0131f\u0131n\u0131 de\u011fi\u015ftirebilir veya bir \u00f6zellik de\u011ferini de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

DOM ayr\u0131ca, etkile\u015fimli web sayfalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan olaylarla da \u00e7al\u0131\u015f\u0131r. Kullan\u0131c\u0131 etkile\u015fimleri, DOM API\u2019s\u0131n\u0131 kullanarak JavaScript taraf\u0131ndan yakalan\u0131r ve i\u015flenir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir butona t\u0131klad\u0131\u011f\u0131nda, DOM API\u2019si, olay\u0131 yakalar ve taray\u0131c\u0131 taraf\u0131ndan \u00e7al\u0131\u015ft\u0131r\u0131lan JavaScript fonksiyonunu tetikler.<\/p>\n\n\n\n

K\u0131sacas\u0131 DOM\u2019un nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 \u00f6zetlemek gerekirse, DOM, bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir a\u011fa\u00e7 yap\u0131s\u0131d\u0131r ve taray\u0131c\u0131 taraf\u0131ndan otomatik olarak olu\u015fturulur. JavaScript, DOM API\u2019s\u0131n\u0131 kullanarak bu a\u011fa\u00e7 yap\u0131s\u0131na eri\u015febilir ve web sayfalar\u0131n\u0131n i\u00e7eri\u011fini, \u00f6zelliklerini ve etkile\u015fimli davran\u0131\u015flar\u0131n\u0131 de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

DOM Nas\u0131l Okunur ve DOM\u2019un Katmanlar\u0131 Nelerdir?<\/h2>\n\n\n\n

DOM, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir a\u011fa\u00e7 yap\u0131s\u0131 oldu\u011funu yukar\u0131da detayl\u0131 a\u00e7\u0131klam\u0131\u015ft\u0131k. Bu a\u011fa\u00e7 yap\u0131s\u0131nda, her bir HTML eleman\u0131 bir d\u00fc\u011f\u00fcm veya node olarak temsil edilir. Bu d\u00fc\u011f\u00fcmler, eleman\u0131n \u00f6zelliklerini, Child Node ve Parent Node\u00a0d\u00fc\u011f\u00fcm\u00fcn\u00fc i\u00e7erir demi\u015ftik.<\/p>\n\n\n\n

DOM API\u2019s\u0131, JavaScript taraf\u0131ndan kullan\u0131larak bu a\u011fa\u00e7 yap\u0131s\u0131na eri\u015filir ve de\u011fi\u015ftirilir. DOM API\u2019si, web sayfas\u0131n\u0131n HTML kaynak kodundaki t\u00fcm elemanlar i\u00e7in bir dizi y\u00f6ntem ve \u00f6zellik sa\u011flar. Bu ba\u011flamda DOM\u2019un katmanlar\u0131ndan bahsetmek faydal\u0131 olacakt\u0131r.<\/p>\n\n\n\n

DOM\u2019un katmanlar\u0131, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden a\u011fa\u00e7 yap\u0131s\u0131n\u0131n farkl\u0131 d\u00fczeyleridir. DOM katmanlar\u0131, web sayfas\u0131ndaki elemanlar\u0131n s\u0131ralan\u0131\u015f\u0131na g\u00f6re olu\u015fur ve her bir katman, bir d\u00fczeydeki elemanlar\u0131 temsil eder.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

DOM katmanlar\u0131 \u015fu \u015fekilde s\u0131ralanabilir:<\/p>\n\n\n\n

1. Document: <\/strong>DOM a\u011fac\u0131n\u0131n en \u00fcst katman\u0131d\u0131r ve bir web sayfas\u0131n\u0131n t\u00fcm i\u00e7eri\u011fini temsil eder. Bu katman, t\u00fcm web sayfas\u0131ndaki di\u011fer katmanlar i\u00e7in bir ana d\u00fc\u011f\u00fcm g\u00f6revi g\u00f6r\u00fcr.<\/p>\n\n\n\n

2. Element: <\/strong>Bu katman, HTML elemanlar\u0131n\u0131 temsil eder. Her bir HTML eleman\u0131, bir Element d\u00fc\u011f\u00fcm\u00fcne kar\u015f\u0131l\u0131k gelir.<\/p>\n\n\n\n

3. Attribute: <\/strong>Bu katman, HTML elemanlar\u0131n\u0131n \u00f6zelliklerini temsil eder. \u00d6rne\u011fin, bir HTML resim eleman\u0131n\u0131n geni\u015fli\u011fi veya y\u00fcksekli\u011fi gibi \u00f6zellikler, Attribute d\u00fc\u011f\u00fcmleri taraf\u0131ndan temsil edilir.<\/p>\n\n\n\n

4. Text: <\/strong>Bu katman, web sayfas\u0131ndaki metin i\u00e7eri\u011fini temsil eder. Her bir metin i\u00e7eri\u011fi, bir Text d\u00fc\u011f\u00fcm\u00fcne kar\u015f\u0131l\u0131k gelir.<\/p>\n\n\n\n

5. Comment: <\/strong>Bu katman, web sayfas\u0131ndaki yorumlar\u0131 temsil eder. Yorumlar, Comment d\u00fc\u011f\u00fcmleri taraf\u0131ndan temsil edilir.<\/p>\n\n\n\n

DOM okunurken, JavaScript kullan\u0131larak DOM API\u2019s\u0131 \u00fczerinden eri\u015filir. \u00d6rne\u011fin, belirli bir HTML eleman\u0131n\u0131n \u00f6zelliklerini veya metin i\u00e7eri\u011fini de\u011fi\u015ftirmek i\u00e7in, JavaScript koduyla ilgili DOM d\u00fc\u011f\u00fcmlerine eri\u015filir, ard\u0131ndan \u00f6zellikleri veya i\u00e7eri\u011fi de\u011fi\u015ftirilir.<\/p>\n\n\n\n

K\u0131sacas\u0131, DOM, JavaScript kullanarak DOM API\u2019s\u0131 arac\u0131l\u0131\u011f\u0131yla okunabilir ve de\u011fi\u015ftirilebilir. DOM katmanlar\u0131, web sayfas\u0131ndaki elemanlar\u0131n s\u0131ralan\u0131\u015f\u0131na g\u00f6re olu\u015fur ve her bir katman, bir d\u00fczeydeki elemanlar\u0131 temsil eder.<\/p>\n\n\n\n

DOM Sitenin Kaynak Kodu mudur?<\/h2>\n\n\n\n

DOM, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir a\u011fa\u00e7 yap\u0131s\u0131d\u0131r ve taray\u0131c\u0131 taraf\u0131ndan web sayfas\u0131n\u0131n kaynak kodu temel al\u0131narak otomatik olarak olu\u015fturulur. Yani DOM, web sayfas\u0131n\u0131n kaynak kodu de\u011fildir; ancak kaynak kodu temel al\u0131narak olu\u015fur.<\/p>\n\n\n\n

Web sayfas\u0131n\u0131n kaynak kodu, web sunucusundan taray\u0131c\u0131ya g\u00f6nderilen orijinal HTML, CSS ve JavaScript dosyalar\u0131n\u0131 i\u00e7erir. Taray\u0131c\u0131, bu kaynak kodunu okur ve DOM\u2019u olu\u015fturmak i\u00e7in kullan\u0131r.<\/p>\n\n\n\n

DOM, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr. JavaScript, DOM API\u2019s\u0131n\u0131 kullanarak DOM\u2019a eri\u015febilir ve web sayfas\u0131n\u0131n i\u00e7eri\u011fini, \u00f6zelliklerini ve etkile\u015fimli davran\u0131\u015flar\u0131n\u0131 de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

K\u0131sacas\u0131, DOM, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr ve web sayfas\u0131n\u0131n kaynak kodundan olu\u015fur ancak kendisi kaynak kodu de\u011fildir.<\/p>\n\n\n\n

Peki kaynak kodu ve DOM aras\u0131ndaki fark nedir, \u015feklinde bir soru gelebilir: Web sayfalar\u0131, web taray\u0131c\u0131s\u0131 taraf\u0131ndan yorumlanan ve g\u00f6r\u00fcnt\u00fclenen HTML, CSS ve JavaScript gibi kaynak kodlar\u0131 i\u00e7erir. Kaynak kodu, web sayfas\u0131n\u0131n orijinal kodudur ve web taray\u0131c\u0131s\u0131 taraf\u0131ndan yorumlan\u0131r, ard\u0131ndan DOM olarak temsil edilir.<\/p>\n\n\n\n

DOM, taray\u0131c\u0131 taraf\u0131ndan otomatik olarak olu\u015fturulur ve HTML kaynak kodunu temel al\u0131r. DOM, web sayfas\u0131ndaki her bir eleman\u0131 bir d\u00fc\u011f\u00fcm veya node olarak temsil eder ve bu d\u00fc\u011f\u00fcmler, eleman\u0131n \u00f6zelliklerini,\u00a0 Child Node ve\u00a0 Parent Node\u00a0d\u00fc\u011f\u00fcm\u00fcn\u00fc i\u00e7erir.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Kaynak kodu ve DOM aras\u0131ndaki fark, temsil ettikleri yap\u0131lar\u0131n farkl\u0131 olmas\u0131d\u0131r. Kaynak kodu, web sayfas\u0131n\u0131n orijinal kodudur ve web taray\u0131c\u0131s\u0131 taraf\u0131ndan yorumlan\u0131r. Kaynak kodu, web sayfas\u0131ndaki t\u00fcm HTML, CSS ve JavaScript kodunu i\u00e7erir. DOM ise, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr ve taray\u0131c\u0131 taraf\u0131ndan otomatik olarak olu\u015fturulur. DOM, web sayfas\u0131ndaki her bir eleman\u0131 bir d\u00fc\u011f\u00fcm veya node olarak temsil eder ve eleman\u0131n \u00f6zelliklerini, \u00e7ocuk d\u00fc\u011f\u00fcmlerini ve ebeveyn d\u00fc\u011f\u00fcm\u00fcn\u00fc i\u00e7erir.<\/p>\n\n\n\n

Kaynak kodu, web sayfas\u0131n\u0131n orijinal kodudur ve de\u011fi\u015ftirildi\u011finde, web sayfas\u0131ndaki de\u011fi\u015fiklikler DOM \u00fczerinde yans\u0131t\u0131lmayabilir. DOM ise, web sayfas\u0131ndaki herhangi bir de\u011fi\u015fikli\u011fin do\u011frudan yans\u0131t\u0131ld\u0131\u011f\u0131 bir programlama aray\u00fcz\u00fcd\u00fcr. JavaScript, DOM API\u2019s\u0131n\u0131 kullanarak DOM\u2019a eri\u015febilir ve web sayfas\u0131ndaki i\u00e7eri\u011fi, \u00f6zellikleri ve etkile\u015fimli davran\u0131\u015flar\u0131 de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

Sonu\u00e7 olarak, kaynak kodu web sayfas\u0131n\u0131n orijinal kodudur ve taray\u0131c\u0131 taraf\u0131ndan yorumlan\u0131r. DOM ise, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr ve taray\u0131c\u0131 taraf\u0131ndan otomatik olarak olu\u015fturulur. Kaynak kodu, web sayfas\u0131ndaki de\u011fi\u015fikliklerin do\u011frudan yans\u0131t\u0131lmad\u0131\u011f\u0131 bir yap\u0131yken, DOM web sayfas\u0131ndaki de\u011fi\u015fikliklerin do\u011frudan yans\u0131t\u0131ld\u0131\u011f\u0131 bir programlama aray\u00fcz\u00fcd\u00fcr.<\/p>\n\n\n\n

DOM ile \u0130lgili Bilinmesi Gereken Kavramlar Nelerdir?<\/h2>\n\n\n\n

DOM ile ilgili bilinmesi gereken kavramlar \u015funlard\u0131r:<\/p>\n\n\n\n

1. Node: <\/strong>Web sayfas\u0131ndaki her bir eleman, bir Node olarak adland\u0131r\u0131l\u0131r. Node, DOM a\u011fac\u0131n\u0131n temel birimini olu\u015fturur.<\/p>\n\n\n\n

2. Element: <\/strong>HTML belgesindeki her bir etiket, bir Element Node olarak adland\u0131r\u0131l\u0131r. Element, DOM a\u011fac\u0131nda bir Node t\u00fcr\u00fcd\u00fcr ve HTML etiketinin \u00f6zelliklerini ve \u00e7ocuk d\u00fc\u011f\u00fcmlerini i\u00e7erir.<\/p>\n\n\n\n

3. Parent Node: <\/strong>Bir Node\u2019un ebeveyn Node\u2019u Parent Node olarak adland\u0131r\u0131l\u0131r. \u00d6rne\u011fin, bir HTML \u201cdiv\u201d eleman\u0131, ebeveyn Node\u2019u bir \u201cbody\u201d eleman\u0131 olabilir.<\/p>\n\n\n\n

4. Child Node: <\/strong>Bir Node\u2019un \u00e7ocuk Node\u2019lar\u0131 Child Node olarak adland\u0131r\u0131l\u0131r. \u00d6rne\u011fin, bir HTML \u201cdiv\u201d eleman\u0131n\u0131n i\u00e7indeki bir \u201cspan\u201d eleman\u0131, \u201cdiv\u201d eleman\u0131n\u0131n Child Node\u2019lar\u0131ndan biridir.<\/p>\n\n\n\n

5. Attribute: <\/strong>HTML elemanlar\u0131n\u0131n \u00f6zelliklerine Attribute denir. \u00d6rne\u011fin, bir HTML \u201cimg\u201d eleman\u0131n\u0131n \u201csrc\u201d \u00f6zelli\u011fi, \u201cimg\u201d eleman\u0131n\u0131n bir Attribute\u2019udur.<\/p>\n\n\n\n

6. Text Node:<\/strong> Web sayfas\u0131ndaki metin i\u00e7eri\u011fi, bir Text Node olarak adland\u0131r\u0131l\u0131r. \u00d6rne\u011fin, bir HTML paragraf eleman\u0131ndaki metin i\u00e7eri\u011fi bir Text Node\u2019dur.<\/p>\n\n\n\n

7. DOM API: <\/strong>DOM API, web sayfas\u0131ndaki elemanlara eri\u015fmek i\u00e7in kullan\u0131lan bir programlama aray\u00fcz\u00fcd\u00fcr. JavaScript, DOM API\u2019s\u0131n\u0131 kullanarak web sayfas\u0131ndaki elemanlar\u0131 okuyabilir ve de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

8. DOM Manip\u00fclasyonu:<\/strong> DOM manip\u00fclasyonu, web sayfas\u0131ndaki elemanlar\u0131 JavaScript kullanarak de\u011fi\u015ftirmeyi ifade eder. DOM manip\u00fclasyonu, web sayfas\u0131ndaki i\u00e7eri\u011fi dinamik olarak de\u011fi\u015ftirmek ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

K\u0131sacas\u0131, DOM ile ilgili kavramlar, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini temsil eden bir a\u011fa\u00e7 yap\u0131s\u0131 olan Node, Element, Parent Node, Child Node, Attribute ve Text Node gibi temel DOM \u00f6\u011felerini i\u00e7erir. DOM API, web sayfas\u0131ndaki elemanlara eri\u015fmek i\u00e7in kullan\u0131l\u0131rken, DOM manip\u00fclasyonu, web sayfas\u0131ndaki i\u00e7eri\u011fi de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n

\u00d6zetle DOM (Document Object Model), web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 temsil eden bir programlama aray\u00fcz\u00fcd\u00fcr ve web geli\u015ftiricileri i\u00e7in \u00f6nemli bir ara\u00e7t\u0131r. DOM, web sayfalar\u0131ndaki her t\u00fcrl\u00fc bile\u015feni, yani HTML elemanlar\u0131, metin, resimler ve di\u011fer medya dosyalar\u0131n\u0131 i\u00e7erir. JavaScript programlama dili, DOM API\u2019sini kullanarak web sayfas\u0131ndaki nesnelere eri\u015febilir ve bunlar\u0131 d\u00fczenleyebilir. Bu, sayfan\u0131n i\u00e7eri\u011fini dinamik olarak de\u011fi\u015ftirmenizi, \u00f6zelliklerini de\u011fi\u015ftirmenizi ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar. DOM, web sayfalar\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, davran\u0131\u015f\u0131n\u0131 ve i\u015flevselli\u011fini kontrol etmek i\u00e7in kullan\u0131l\u0131r ve web geli\u015ftiricileri taraf\u0131ndan y\u00f6netilebilir. Umar\u0131z blog i\u00e7eri\u011fimiz ile sizlerin \u201cDOM Nedir?\u201d sorusuna cevap verebilmi\u015fizdir.<\/p>\n","protected":false},"excerpt":{"rendered":"Web geli\u015ftirme, modern d\u00fcnyan\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. Bug\u00fcn web, neredeyse her \u015feyi m\u00fcmk\u00fcn k\u0131lan bir ara\u00e7t\u0131r.…\n","protected":false},"author":7,"featured_media":34593,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[389],"tags":[],"class_list":{"0":"post-34590","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-donanim-yazilim"},"_links":{"self":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/34590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/comments?post=34590"}],"version-history":[{"count":1,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/34590\/revisions"}],"predecessor-version":[{"id":34597,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/34590\/revisions\/34597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media\/34593"}],"wp:attachment":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media?parent=34590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/categories?post=34590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/tags?post=34590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}