{"id":5398,"date":"2026-06-09T12:25:33","date_gmt":"2026-06-09T09:25:33","guid":{"rendered":"https:\/\/hostingdunyam.com.tr\/blog\/?p=5398"},"modified":"2026-06-09T12:25:33","modified_gmt":"2026-06-09T09:25:33","slug":"dom-nedir","status":"publish","type":"post","link":"https:\/\/hostingdunyam.com.tr\/blog\/dom-nedir","title":{"rendered":"DOM Nedir?"},"content":{"rendered":"

DOM (Document Object Model), bir web sayfas\u0131n\u0131n HTML veya XML i\u00e7eri\u011fini programlama dilleri taraf\u0131ndan okunup de\u011fi\u015ftirilebilir hale getiren standart bir aray\u00fczd\u00fcr. Taray\u0131c\u0131, bir sayfay\u0131 y\u00fckledi\u011finde HTML kodunu a\u011fa\u00e7 yap\u0131s\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr; JavaScript bu yap\u0131 \u00fczerinden sayfa i\u00e7eri\u011fine, stil bilgilerine ve yap\u0131sal \u00f6\u011felere dinamik olarak eri\u015febilir ve bunlar\u0131 de\u011fi\u015ftirebilir.<\/span><\/p>\n

DOM Ne \u0130\u015fe Yarar?<\/span><\/h2>\n

DOM (Document Object Model), bir web sayfas\u0131n\u0131n taray\u0131c\u0131da nas\u0131l temsil edildi\u011fini tan\u0131mlayan yap\u0131d\u0131r.<\/span><\/p>\n

    \n
  1. 1. Sayfay\u0131 dinamik hale getirir.<\/span><\/li>\n
  2. 2. JavaScript ile HTML aras\u0131nda k\u00f6pr\u00fc kurar.<\/span><\/li>\n
  3. 3. Kullan\u0131c\u0131 etkile\u015fimlerini yakalar.<\/span><\/li>\n<\/ol>\n

    DOM’un Temel Kavramlar\u0131<\/span><\/h2>\n

    Node (D\u00fc\u011f\u00fcm):<\/b> DOM a\u011fac\u0131ndaki her \u015fey bir node’dur. Bir HTML etiketi, metin i\u00e7eri\u011fi, HTML belgesi veya bir yorum sat\u0131r\u0131 birer node olarak temsil edilir. D\u00f6rt temel node t\u00fcr\u00fc vard\u0131r:<\/span><\/p>\n

      \n
    • Document node:<\/b> A\u011fac\u0131n k\u00f6k noktas\u0131d\u0131r, t\u00fcm belgeyi temsil eder.<\/span><\/li>\n
    • Element node:<\/b> <div><\/span>, <\/span><p><\/span>, <\/span><h1><\/span> gibi HTML etiketleridir.<\/span><\/li>\n
    • Text node:<\/b> Bir \u00f6\u011fenin i\u00e7indeki metin i\u00e7eri\u011fidir.<\/span><\/li>\n
    • Attribute node:<\/b> class<\/span>, <\/span>id<\/span>, <\/span>href<\/span> gibi etiket \u00f6zelliklerini temsil eder.<\/span><\/li>\n<\/ul>\n

      Parent \/ Child \/ Sibling:<\/b> DOM a\u011fac\u0131 aile ili\u015fkileri metaforuyla tan\u0131mlan\u0131r. Bir \u00f6\u011feyi i\u00e7ine alan \u00f6\u011fe <\/span>parent<\/b> (ebeveyn), i\u00e7inde bar\u0131nan \u00f6\u011feler <\/span>child<\/b> (\u00e7ocuk), ayn\u0131 parent’a sahip \u00f6\u011feler ise <\/span>sibling<\/b> (karde\u015f) olarak adland\u0131r\u0131l\u0131r.<\/span><\/p>\n

      DOM A\u011fac\u0131 Nas\u0131l G\u00f6r\u00fcn\u00fcr?<\/span><\/h2>\n

      A\u015fa\u011f\u0131daki basit bir HTML belgesini ele alal\u0131m:<\/span><\/p>\n

        \n
      • <!DOCTYPE html><\/span><\/li>\n
      • <html><\/span><\/li>\n
      • \u00a0\u00a0<head><\/span><\/span><\/li>\n
      • \u00a0\u00a0\u00a0\u00a0<title>\u00d6rnek Sayfa<\/title><\/span><\/li>\n
      • \u00a0\u00a0<\/head><\/span><\/li>\n
      • \u00a0\u00a0<body><\/span><\/li>\n
      • \u00a0\u00a0\u00a0\u00a0<h1>Merhaba D\u00fcnya<\/h1><\/span><\/li>\n
      • \u00a0\u00a0\u00a0\u00a0<p>Bu bir paragraft\u0131r.<\/p><\/span><\/li>\n
      • \u00a0\u00a0<\/body><\/span><\/span><\/li>\n
      • <\/html><\/span><\/li>\n<\/ul>\n

        Taray\u0131c\u0131 bu kodu ayr\u0131\u015ft\u0131rd\u0131\u011f\u0131nda \u015f\u00f6yle bir a\u011fa\u00e7 yap\u0131s\u0131 olu\u015fturur:<\/span><\/p>\n

        Document<\/span><\/p>\n

        \u2514\u2500\u2500 html<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 head<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u2514\u2500\u2500 title<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500 “\u00d6rnek Sayfa”<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u2514\u2500\u2500 body<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 h1<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u2514\u2500\u2500 “Merhaba D\u00fcnya”<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2514\u2500\u2500 p<\/span><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2514\u2500\u2500 “Bu bir paragraft\u0131r.”<\/span><\/p>\n

        DOM ve HTML Ayn\u0131 \u015eey midir?<\/span><\/h3>\n

        Hay\u0131r. HTML, taray\u0131c\u0131ya g\u00f6nderilen statik metin kodudur. DOM ise taray\u0131c\u0131n\u0131n bu kodu ayr\u0131\u015ft\u0131rd\u0131ktan sonra olu\u015fturdu\u011fu canl\u0131, programlanabilir yap\u0131d\u0131r. JavaScript DOM’u de\u011fi\u015ftirdi\u011finde HTML dosyas\u0131 de\u011fi\u015fmez; yaln\u0131zca taray\u0131c\u0131daki temsil g\u00fcncellenir.<\/span><\/p>\n

        DOM’a Yaln\u0131zca JavaScript ile mi Eri\u015filir?<\/span><\/h3>\n

        Hay\u0131r. DOM dil ba\u011f\u0131ms\u0131z bir standartt\u0131r; Python, Java veya C# gibi dillerle de eri\u015filebilir. Ancak taray\u0131c\u0131 ortam\u0131nda fiilen kullan\u0131lan dil JavaScript’tir.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

        DOM (Document Object Model), bir web sayfas\u0131n\u0131n HTML veya XML i\u00e7eri\u011fini programlama dilleri taraf\u0131ndan okunup de\u011fi\u015ftirilebilir hale getiren standart bir aray\u00fczd\u00fcr. Taray\u0131c\u0131, bir sayfay\u0131 y\u00fckledi\u011finde HTML kodunu a\u011fa\u00e7 yap\u0131s\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr; JavaScript bu yap\u0131 \u00fczerinden sayfa i\u00e7eri\u011fine, stil bilgilerine ve yap\u0131sal \u00f6\u011felere dinamik olarak eri\u015febilir ve bunlar\u0131 de\u011fi\u015ftirebilir. DOM Ne \u0130\u015fe Yarar? DOM (Document Object Model), […]<\/p>\n","protected":false},"author":1,"featured_media":5399,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel"],"_links":{"self":[{"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/posts\/5398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/comments?post=5398"}],"version-history":[{"count":2,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/posts\/5398\/revisions"}],"predecessor-version":[{"id":5401,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/posts\/5398\/revisions\/5401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/media\/5399"}],"wp:attachment":[{"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=5398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=5398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hostingdunyam.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=5398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}