Web geli\u015ftirme d\u00fcnyas\u0131nda “DOM” terimiyle s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131r\u0131z, ancak tam olarak ne anlama geldi\u011fini ve neden bu kadar kritik oldu\u011funu anlamak, etkile\u015fimli web sayfalar\u0131 olu\u015fturman\u0131n ilk ad\u0131m\u0131d\u0131r. DOM (Document Object Model), HTML ve XML belgeleri i\u00e7in bir programlama aray\u00fcz\u00fcd\u00fcr (API – Application Programming Interface). Basit\u00e7e ifade etmek gerekirse, web sayfan\u0131z\u0131n yap\u0131s\u0131n\u0131, i\u00e7eri\u011fini ve stilini programatik olarak de\u011fi\u015ftirebilmenizi sa\u011flayan bir k\u00f6pr\u00fcd\u00fcr.<\/p>\n

Bir web sayfas\u0131 taray\u0131c\u0131da y\u00fcklendi\u011finde, taray\u0131c\u0131 HTML kodunu ayr\u0131\u015ft\u0131r\u0131r (parse eder) ve bu koddan bellekte bir nesne modeli (object model) olu\u015fturur. Bu model, sayfan\u0131n t\u00fcm elementlerini, metinlerini ve \u00f6zniteliklerini (attribute) hiyerar\u015fik bir a\u011fa\u00e7 yap\u0131s\u0131nda temsil eder. Bu a\u011fa\u00e7 yap\u0131s\u0131ndaki her bir \u00f6\u011feye “d\u00fc\u011f\u00fcm” (node) denir. \u00d6rne\u011fin, bir <\/p>\n

<\/code> etiketi bir element d\u00fc\u011f\u00fcm\u00fc, i\u00e7indeki metin bir metin d\u00fc\u011f\u00fcm\u00fc ve class=\"container\"<\/code> gibi bir \u00f6znitelik ise bir \u00f6znitelik d\u00fc\u011f\u00fcm\u00fcd\u00fcr.<\/p>\nDOM’un bu a\u011fa\u00e7 yap\u0131s\u0131, JavaScript gibi betik dillerinin (scripting languages) web sayfas\u0131n\u0131n herhangi bir b\u00f6l\u00fcm\u00fcne eri\u015fmesine, onu de\u011fi\u015ftirmesine, yeni elementler eklemesine veya mevcut elementleri kald\u0131rmas\u0131na olanak tan\u0131r. Taray\u0131c\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz her \u015fey \u2013 bir ba\u015fl\u0131k, bir paragraf, bir resim, bir buton \u2013 DOM’daki bir nesne olarak temsil edilir. Bu sayede, kullan\u0131c\u0131 bir butona t\u0131klad\u0131\u011f\u0131nda yeni bir paragraf ekleyebilir, bir form g\u00f6nderildi\u011finde hatalar\u0131 g\u00f6sterebilir veya bir resmin kayna\u011f\u0131n\u0131 de\u011fi\u015ftirebiliriz. DOM olmasayd\u0131, web sayfalar\u0131 statik ve etkile\u015fimsiz kal\u0131rd\u0131, sadece \u00f6nceden tan\u0131mlanm\u0131\u015f i\u00e7eri\u011fi g\u00f6sterirlerdi. JavaScript’in web sayfalar\u0131n\u0131 “canland\u0131rmas\u0131” tam da DOM arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir.<\/p>\n
DOM’un hayati rol\u00fcn\u00fc birka\u00e7 ana ba\u015fl\u0131kta \u00f6zetleyebiliriz:<\/p>\n
\n\u0130\u00e7erik Manip\u00fclasyonu:<\/strong> Sayfadaki metinleri, resimleri veya di\u011fer medya \u00f6\u011felerini dinamik olarak de\u011fi\u015ftirebiliriz. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n tercihine g\u00f6re sayfa dilini de\u011fi\u015ftirmek.<\/li>\n
Yap\u0131sal De\u011fi\u015fiklikler:<\/strong> Yeni HTML elementleri olu\u015fturup sayfaya ekleyebilir, mevcut elementleri silebilir veya yerlerini de\u011fi\u015ftirebiliriz. Bu, kullan\u0131c\u0131 etkile\u015fimlerine g\u00f6re sayfa d\u00fczenini tamamen d\u00f6n\u00fc\u015ft\u00fcrme yetene\u011fi sunar.<\/li>\n
Stil Y\u00f6netimi:<\/strong> Elementlerin CSS s\u0131n\u0131flar\u0131n\u0131 (class) ekleyip \u00e7\u0131kararak veya do\u011frudan stil \u00f6zelliklerini de\u011fi\u015ftirerek g\u00f6r\u00fcn\u00fc\u015flerini dinamik olarak kontrol edebiliriz. Bu, butonlar\u0131n renklerini de\u011fi\u015ftirmek veya bir men\u00fcy\u00fc g\u00f6r\u00fcn\u00fcr\/gizli yapmak gibi senaryolarda kullan\u0131l\u0131r.<\/li>\n
Olay Y\u00f6netimi (Event Handling):<\/strong> Kullan\u0131c\u0131lar\u0131n t\u0131klama, klavye giri\u015fi, fare hareketleri gibi eylemlerine yan\u0131t verebiliriz. Bu, interaktif formlar, oyunlar ve dinamik navigasyon men\u00fcleri olu\u015fturmak i\u00e7in temeldir.<\/li>\n<\/ul>\nK\u0131sacas\u0131, DOM, web sayfalar\u0131n\u0131n sadece bir bilgi g\u00f6sterim arac\u0131 olmaktan \u00e7\u0131k\u0131p, dinamik, etkile\u015fimli ve zengin kullan\u0131c\u0131 deneyimleri sunan uygulamalara d\u00f6n\u00fc\u015fmesini sa\u011flayan temel bir bile\u015fendir. Bir web geli\u015ftirici olarak, DOM’u ne kadar iyi anlarsan\u0131z, web sayfalar\u0131n\u0131z \u00fczerinde o kadar fazla kontrol sahibi olursunuz ve yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131n s\u0131n\u0131rlar\u0131n\u0131 o kadar geni\u015fletirsiniz.<\/p>\n
DOM Elementlerini Se\u00e7me ve \u0130\u00e7eriklerini Y\u00f6netme: \u0130lk 5 Temel Soru<\/h2>\nWeb sayfalar\u0131m\u0131zla etkile\u015fime ge\u00e7mek i\u00e7in \u00f6ncelikle DOM’daki belirli elementlere eri\u015fmemiz gerekir. Bu elementleri se\u00e7tikten sonra, onlar\u0131n i\u00e7eri\u011fini, s\u0131n\u0131flar\u0131n\u0131 veya \u00f6zniteliklerini de\u011fi\u015ftirebiliriz. Bu b\u00f6l\u00fcmde, DOM manip\u00fclasyonunun temelini olu\u015fturan ilk be\u015f soruyu ve bunlar\u0131n pratik uygulamalar\u0131n\u0131 inceleyece\u011fiz. Her bir soru, web geli\u015ftirme s\u00fcrecinde s\u0131k\u00e7a kar\u015f\u0131n\u0131za \u00e7\u0131kacak senaryolar\u0131 ele alarak, DOM’u daha iyi kavraman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Soru 1: Bir HTML Elementini Nas\u0131l Se\u00e7erim? (getElementById<\/code> ve querySelector<\/code>)<\/h3>\nBir web sayfas\u0131nda belirli bir element \u00fczerinde i\u015flem yapmak istiyorsak, o elementi \u00f6ncelikle se\u00e7memiz gerekir. JavaScript, bu ama\u00e7la \u00e7e\u015fitli y\u00f6ntemler sunar. En yayg\u0131n kullan\u0131lan ve en temel y\u00f6ntemlerden biri document.getElementById()<\/code>‘dir. Bu y\u00f6ntem, bir elementin benzersiz ID’sini kullanarak ona do\u011frudan eri\u015fim sa\u011flar. E\u011fer bir elementin ID’si varsa, bu en h\u0131zl\u0131 ve en g\u00fcvenilir se\u00e7im y\u00f6ntemidir.<\/p>\n
Ancak, ID kullanmak her zaman m\u00fcmk\u00fcn olmayabilir veya daha karma\u015f\u0131k se\u00e7im kriterlerine ihtiyac\u0131m\u0131z olabilir. \u0130\u015fte bu noktada document.querySelector()<\/code> ve document.querySelectorAll()<\/code> devreye girer. Bu y\u00f6ntemler, CSS se\u00e7icileri (selector) kullanarak elementleri se\u00e7memize olanak tan\u0131r. querySelector()<\/code>, belirtilen se\u00e7iciye uyan ilk elementi d\u00f6nd\u00fcr\u00fcrken, querySelectorAll()<\/code> t\u00fcm uyan elementleri bir NodeList (d\u00fc\u011f\u00fcm listesi) olarak d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\u00d6rne\u011fin, bir web sayfas\u0131nda “ana-baslik” ID’sine sahip bir ba\u015fl\u0131k veya “urun-karti” s\u0131n\u0131f\u0131na sahip bir kart elementi se\u00e7mek isteyebiliriz. Bu se\u00e7im y\u00f6ntemleri, hedeflenen elementlere ula\u015fmak i\u00e7in bize esneklik sunar.<\/p>\n
\n\n\nDOM Manip\u00fclasyonuna Ho\u015f Geldiniz!<\/h1>\n\u0130lk Mesaj<\/div>\n\u0130kinci Mesaj<\/div>\n\n\n