Bu yaz\u0131da sitemizin yap\u0131s\u0131nda d\u0131\u015far\u0131dan nelere ve nas\u0131l manip\u00fcle edebiliriz, bu m\u00fcdahaleleri ki\u015fiselle\u015ftirme \u00e7\u00f6z\u00fcm\u00fc olarak nas\u0131l kullanabiliriz konusuna de\u011finece\u011fim.<\/p>\n\n\n\n
DOM nedir?<\/h2>\n\n\n\n
DOM (Document Object Module<\/strong>) HTML d\u00f6k\u00fcmanlar\u0131 i\u00e7erisinde bulunan nesnelere kolayl\u0131kla eri\u015fim sa\u011flamak ve \u00fczerinde i\u015flemler yapabilmek i\u00e7in tasarlanan bir modeldir. DOM ile HTML dosyam\u0131zda bulunan her \u015feye<\/strong> eri\u015fim sa\u011flayabiliriz.<\/p>\n\n\n\n HTML dosyas\u0131nda bulunan b\u00fct\u00fcn \u00f6\u011feler, DOM \u00fczerinde bir nesne olarak g\u00f6r\u00fcl\u00fcr. DOM modelin ismi, document ise bu nesnelerin kapsay\u0131c\u0131s\u0131d\u0131r. Bu kapsay\u0131c\u0131 i\u00e7erisinde bulunan html<\/strong> etiketi head, body <\/strong>nesnelerinin i\u00e7erisinde bulunan di\u011fer nesnelerin kapsay\u0131c\u0131s\u0131d\u0131r. Head ve body etiketleri de i\u00e7erisinde bulunan di\u011fer nesnelerin kapsay\u0131c\u0131lar\u0131d\u0131r. <\/p>\n\n\n\n Bu yap\u0131y\u0131 bir soy a\u011fac\u0131 olarak nitelendirebiliriz. DOM a\u011fa\u00e7 yap\u0131s\u0131n\u0131 daha iyi anlamak i\u00e7in standart bir HTML yap\u0131s\u0131na g\u00f6z atal\u0131m.<\/p>\n\n\n\n Hem \u00f6\u011felerin \u0130\u015fte bu soy a\u011fac\u0131n\u0131 g\u00f6rsel hali.<\/p>\n\n\n\n Belgedeki bu \u00f6\u011felere eri\u015febilir ve JavaScript kullanarak bunlarda de\u011fi\u015fiklik yapabiliriz.<\/p>\n\n\n\n JavaScript kullanarak DOM ile nas\u0131l \u00e7al\u0131\u015fabilece\u011fimize dair birka\u00e7 \u00f6rne\u011fe bakal\u0131m.<\/p>\n\n\n\n HTML belgesinde bir \u00f6\u011fe se\u00e7menin birka\u00e7 farkl\u0131 y\u00f6ntemi vard\u0131r.<\/p>\n\n\n\n Bu yaz\u0131da, bu y\u00f6ntemlerden \u00fc\u00e7\u00fcne odaklanaca\u011f\u0131z:<\/p>\n\n\n\n <\/p>\n\n\n\n \u0130lk \u00f6rne\u011fimiz web sitemizdeki ba\u015fl\u0131\u011f\u0131 de\u011fi\u015ftirmek olsun.<\/p>\n\n\n\n Ba\u015fl\u0131\u011f\u0131m\u0131z\u0131n id<\/strong> de\u011feri “alan” ifadesi ile Ba\u015fl\u0131\u011f\u0131m\u0131z\u0131n class<\/strong> de\u011feri “title__inner” ifadesi ile [0]<\/strong> i\u015flemi “title_inner” class de\u011ferine sahip olan elementler aras\u0131nda 0. index’i yani birinci elementi getir anlam\u0131na gelir. S\u0131ralama \u00f6zelli\u011fini id’ler i\u00e7in kullanmay\u0131z, \u00e7\u00fcnk\u00fc her id tekildir.<\/p>\n\n\n\n Ba\u015fl\u0131\u011f\u0131m\u0131z\u0131n id ve class de\u011ferlerini stilleme ekleyerek birinci de\u011ferlerini \u00e7a\u011f\u0131rabilirim. Class i\u00e7in “.” ID i\u00e7in “#” <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Asl\u0131nda bu i\u015flem \u00e7ok basit, se\u00e7icinizin sonuna “=” ekleyerek diledi\u011finiz de\u011feri tan\u0131mlayabilirsiniz.<\/p>\n\n\n\n <\/p>\n\n\n\n Herhangi bir se\u00e7ici ile se\u00e7ti\u011fimiz elementi de\u011fi\u015ftirmek istedi\u011fimiz css t\u00fcr\u00fcn\u00fc devam\u0131na ekleyerek bir de\u011fer tan\u0131mlayaca\u011f\u0131z. <\/p>\n\n\n\n Beyaz olan ba\u015fl\u0131\u011f\u0131m\u0131z\u0131 k\u0131rm\u0131z\u0131ya \u00e7evirelim ve yaz\u0131y\u0131 biraz daha k\u00fc\u00e7\u00fcltelim.<\/p>\n\n\n\n <\/p>\n\n\n\n \u00d6rne\u011fi de\u011fi\u015ftirelim biraz daha zorlay\u0131c\u0131 bir i\u015flem yapal\u0131m. <\/p>\n\n\n\n Demo e ticaret sitem i\u00e7in \u00fcr\u00fcn sayfamdaki sepete ekleme butonunun hemen yan\u0131na kupon kodu alan\u0131 ekleyece\u011fim. <\/p>\n\n\n\n \u0130lk olarak kod yerle\u015ftirmek istedi\u011fim alan\u0131n class yada id de\u011ferini buluyorum. Benim sepete ekle b\u00f6lgesi i\u00e7in class de\u011ferim a\u015fa\u011f\u0131daki g\u00f6rselde payla\u015ft\u0131\u011f\u0131m gibi \u201cwoocommerce-variation-add-to-cart\u201d. \u0130stedi\u011fim alan\u0131 buldu\u011fuma g\u00f6re diledi\u011fim kodu oraya ekleyebilirim. <\/p>\n\n\n\n NOT: <\/strong>Bir class i\u00e7erisine element eklerken t\u00fcm stil de\u011ferlerini devralaca\u011f\u0131n\u0131 unutmay\u0131n. <\/p>\n\n\n\n Yeni bir element eklemek i\u00e7in “insertAdjacentHTML”<\/strong> \u00f6zelli\u011fini kullan\u0131yoruz. <\/p>\n\n\n\n Yukar\u0131daki \u00f6rnekten devam edelim ve olu\u015fturdu\u011fum kupon de\u011ferini facebook reklam\u0131mdan gelen bir kullan\u0131c\u0131n\u0131n g\u00f6rmesi i\u00e7in \u00e7al\u0131\u015ft\u0131ray\u0131m (Bu \u00f6rne\u011fin tam versiyonunu buradan<\/a> okuyabilirsiniz). <\/p>\n\n\n\n Bunun i\u00e7in yeni bir HTML etiketi olu\u015fturup daha \u00f6nceden olu\u015fturdu\u011fumuz kod beti\u011fimizi girelim. <\/p>\n\n\n\n Tetikleyici k\u0131sm\u0131 i\u00e7in kampanyaya tan\u0131mlad\u0131\u011f\u0131m UTM de\u011ferini kullan\u0131ca\u011f\u0131m. https:\/\/demo.abdulazizgolca.com?utm_source=facebook<\/strong>&utm_medium=indirim<\/p>\n\n\n\n Page URL i\u00e7erir > facebook <\/p>\n\n\n\n Facebook \u00fczerinden gelen kullan\u0131c\u0131lara kupon tan\u0131mlam\u0131\u015f olduk. Tabi bu \u015fekilde kullan\u0131m pek efektif olmayacakt\u0131r buradaki amac\u0131m\u0131z Dom i\u015flemleri ile neler yapabildi\u011fimi anlamak. <\/p>\n\n\n\n Bu yaz\u0131, kullanabilece\u011finiz baz\u0131 DOM y\u00f6ntemlerine k\u0131sa bir giri\u015f niteli\u011findeydi. Bu makalede ele almad\u0131\u011f\u0131m\u0131z daha bir\u00e7ok \u00f6rnek var. Daha \u00f6ncesinde bu y\u00f6ntemi kullanarak bir\u00e7ok yaz\u0131 yazd\u0131m, a\u015fa\u011f\u0131daki \u00f6rnekleri inceleyebilirsiniz;<\/p>\n\n\n\n E-Ticarette UTM ile Dinamik Kupon Kodu Otomasyonu<\/a> Sitenizi ki\u015fiselle\u015ftirmek ister misiniz? G\u00fcn\u00fcm\u00fczde ki\u015fiselle\u015ftirme \u00e7\u00f6z\u00fcmleri olduk\u00e7a \u00f6nem arz etmekte ve Google Tag Manager bize bu noktada olduk\u00e7a efektif \u00e7\u00f6z\u00fcmler sunabiliyor. HTML Dom yap\u0131s\u0131na GTM ile manip\u00fcle edebiliyor olmam\u0131z; kampanyalar\u0131m\u0131zda kullan\u0131c\u0131lara farkl\u0131 sonu\u00e7 sayfalar\u0131 veyahut m\u00fc\u015fterinin ihtiyac\u0131 \u00f6zelinde farkl\u0131 indirim tutarlar\u0131 g\u00f6sterme gibi bir\u00e7ok farkl\u0131 senaryo kurabiliyoruz. Tabi bu i\u015flemleri javascript arac\u0131l\u0131\u011f\u0131 ile yap\u0131yor […]<\/p>\n","protected":false},"author":1,"featured_media":1545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,20],"tags":[],"class_list":["post-1522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-genel","category-gtm"],"yoast_head":"\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>DOM tree structure<\/title>\n <\/head>\n <body>\n <h1>DOM tree structure<\/h1>\n\t<h2>Learn about the DOM<\/h2>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<html><\/code> Belgemiz soy a\u011fac\u0131 i\u00e7ersindeki ilk dald\u0131r. Head ve body \u00f6\u011felerini i\u00e7eren iki dal\u0131 vard\u0131r. <\/p>\n\n\n\n<head><\/code>hem de <body><\/code> \u00f6\u011felerinin kendi alt dallar\u0131 vard\u0131r.<\/p>\n\n\n\n![\"Belge\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/09\/Document.jpg\")
<\/figure>\n\n\n\nHTML \u00d6\u011feleri Nas\u0131l Se\u00e7ilir<\/h2>\n\n\n\n
getElementById()<\/code> : HTML i\u00e7erisinden “id” de\u011feri ile se\u00e7me<\/li>getElementsByClassName()<\/code> : HTML i\u00e7erisinden “class” de\u011feri ile se\u00e7me<\/li>querySelector()<\/code> : <\/strong>Se\u00e7ici ile e\u015fle\u015fen ilk kayd\u0131 getirir.<\/li><\/ul>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/Ekran-Resmi-2022-10-23-16.46.51-1024x491.png\")
<\/figure>\n\n\n\ngetElementById()<\/code><\/h3>\n\n\n\ngetElementById<\/code> i\u015flemimiz kullanaca\u011f\u0131z.<\/p>\n\n\n\ndocument.getElementById(\"alan\").innerText<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/Ekran-Resmi-2022-10-23-17.02.54.png\")
<\/figure>\n\n\n\ngetElementsByClassName()<\/code><\/h3>\n\n\n\ngetElementByClassName<\/code> i\u015flemimiz kullanaca\u011f\u0131z.<\/p>\n\n\n\ndocument.getElementByClassName (\"title__inner\")[0].innerText<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/Ekran-Resmi-2022-10-23-17.03.48.png\")
<\/figure>\n\n\n\nquerySelector()<\/code><\/h3>\n\n\n\ndocument.querySelector (\"#alan\").innerText \ndocument.querySelector (\".title__inner\").innerText<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/Ekran-Resmi-2022-10-23-17.08.14.png\")
<\/figure>\n\n\n\nHTML \u00d6\u011feleri Nas\u0131l De\u011fi\u015ftirilir<\/h2>\n\n\n\n
![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/Ekran-Resmi-2022-10-23-17.35.21.png\")
<\/figure>\n\n\n\nHTML \u00d6\u011feleri CSS Manip\u00fclasyonu<\/h2>\n\n\n\n
![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/Ekran-Resmi-2022-10-23-17.54.10.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/image-14-1024x684.png\")
<\/figure>\n\n\n\nHTML i\u00e7ine Yeni Element Ekleme<\/h2>\n\n\n\n
![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/09\/image-10-1024x381.png\")
<\/figure>\n\n\n\ndocument.getElementsByClassName('woocommerce-variation-add-to-cart')[0].insertAdjacentHTML('beforeend', '<button style= \"margin: 10px;\" class=\"button\">Kupon Kodu: SANAOZEL20<\/button>');<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/image-15-1024x762.png\")
<\/figure>\n\n\n\nGTM \u0130le Js Dom Kullan\u0131m\u0131<\/h2>\n\n\n\n
<script>\n\ndocument.getElementsByClassName('woocommerce-variation-add-to-cart')[0].insertAdjacentHTML('beforeend', '<button style= \"margin: 10px;\" class=\"button\">Kupon Kodu: SANAOZEL20<\/button>');\n\n<\/script><\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/abdulazizgolca.com\/blog\/wp-content\/uploads\/2022\/10\/image-16-1024x720.png\")
<\/figure>\n\n\n\nGer\u00e7ek Projelerinde DOM Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n\n\n\n
Tag Manager ile Konum Ayarl\u0131 PopUp Olu\u015fturma<\/a>
Google Ads A\u00e7\u0131l\u0131\u015f Sayfas\u0131na Kullan\u0131c\u0131 Lokasyonu Yazd\u0131rma<\/a>
GTM ile DataLayer Kullanmadan \u00dcr\u00fcn De\u011ferlerini Dinamik Olarak \u00c7ekme<\/a>
Korumal\u0131: Anahtar Kelimemizi Popup \u0130\u00e7erisine Nas\u0131l Yerle\u015ftiririz?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"