1 / 123

IT50 4 ~~DOM~~ Belge Nesne Modeli I I

IT50 4 ~~DOM~~ Belge Nesne Modeli I I. Yrd. Doç. Dr. Yuriy Mishchenko. DOM hierarşi ile çalışma nedir?. DOM, bir HTML sayfası ile ilgili işlemleri HTML kodundan tamamen ayırmak ve bu işlemleri DOM nesne hierarşisi üzerinde yap abil me k hedeflemektedir. DOM hierarşi ile çalışma nedir?.

lea
Download Presentation

IT50 4 ~~DOM~~ Belge Nesne Modeli I I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IT504~~DOM~~Belge Nesne Modeli II Yrd. Doç. Dr. Yuriy Mishchenko

  2. DOM hierarşi ile çalışma nedir? • DOM, bir HTML sayfası ile ilgili işlemleri HTML kodundan tamamen ayırmak ve bu işlemleri DOM nesne hierarşisi üzerinde yapabilmek hedeflemektedir http://www.scinetcentral.com/~mishchenko/MIT504.html

  3. DOM hierarşi ile çalışma nedir? • En temel seviyede, web programcısının DOM ile çalışması sayfadaki HTML elemanlarının özellikleri güncelleştirme ve olay işlemeleri ile ilgilenmektedir • Bunun dışında, DOM hierarşisi ile çalışma da önemli olan kısmıdır; bunlar DOM hierarşisinde navigasyon ve DOM taranması ile DOM hierarşisi güncelleştirilmesidir http://www.scinetcentral.com/~mishchenko/MIT504.html

  4. DOM taranması DOM taranması, DOM nodlarının arasında belirli bir alt kümesinin seçilmesi demektir http://www.scinetcentral.com/~mishchenko/MIT504.html

  5. DOM taranması • DOM hierarşisinde elemanlara erişmek için birkaç temel araç var: • document.getElementById, belirli elemana erişmek için • document.getElementsByClass, belirli eleman sınıfına erişmek için • document.getElementsByName, belirli "name" özelliğine sahip olan form elemanlarına erişmek için • document.getElementsByTagName, sayfadaki belirli taglara erişmek için http://www.scinetcentral.com/~mishchenko/MIT504.html

  6. DOM taranması Daha ileri durumlarda bu araçlar yeterli değil, aslında birçok durumda gereken sayfanın elemanları bu şekilde kesinleştirilemez Bu durumda, DOM hierarşisinde gereken elemanları direkt olarak aranmasına ihtiyaç oluşabilir Bu tip işlemlereDOM tarama işlemi diyoruz http://www.scinetcentral.com/~mishchenko/MIT504.html

  7. DOMda navigasyon • DOM elemanlarının navigasyon metotları • element.childNodes – bir elamanın çocuk elemanlarının listesi, array dir • element.firstChild – bir elemanın ilk çocuğu • element.lastChild – bir elemanın son çocuğu • element.nextSibling – sonraki kardeşi • element.previousSibling – önceki kardeşi • element.parentNode – elemanın babası http://www.scinetcentral.com/~mishchenko/MIT504.html

  8. DOMda navigasyon <html>  <head>    <title>DOM Tutorial</title>  </head>  <body>    <h1>DOM Lesson one</h1>    <p>Hello world!</p>  </body></html> previousSibling parentNode firstChild,lastChild ... nextSibling http://www.scinetcentral.com/~mishchenko/MIT504.html

  9. DOMda navigasyon • DOM hierarşisi taranması gerekliliği var olduğu zaman, DOM hierarşisini geçmek ve gereken eleman alt kümesini elde etmek için DOM navigasyon metotları kullanılmalı http://www.scinetcentral.com/~mishchenko/MIT504.html

  10. DOM taranması • DOM hierarşisi, yapısı olarak bir ağaç veya bir graftır; bu nedenle DOM hierarşisini incelemek için genel graf tarama çözümleri kullanılabilir • DOM hierarşisini taramak için enine ve derinlikle (derine) iki genel graf arama yöntemi kullanılabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  11. DOM taranması • Enine arama, DOM hierarşisini katman katman inceler • Kökten itibaren, her adımda belirli bir katmandaki elemanları geçirip onların çocukları toplanır • Öbür adımda özyineleme anlamında bu çocukları gözden geçirilir, VB http://www.scinetcentral.com/~mishchenko/MIT504.html

  12. DOM taranması DOM hierarşi enine taranması DOM kökü http://www.scinetcentral.com/~mishchenko/MIT504.html

  13. DOM taranması 1 DOM hierarşi enine taranması DOM kökü http://www.scinetcentral.com/~mishchenko/MIT504.html

  14. DOM taranması DOM hierarşi enine taranması DOM kökü 2 http://www.scinetcentral.com/~mishchenko/MIT504.html

  15. DOM taranması DOM hierarşi enine taranması DOM kökü 3 http://www.scinetcentral.com/~mishchenko/MIT504.html

  16. DOM taranması DOM hierarşi enine taranması DOM kökü 4 http://www.scinetcentral.com/~mishchenko/MIT504.html

  17. DOM taranması • Örnek – javascript açılan menü http://www.scinetcentral.com/~mishchenko/MIT504.html

  18. DOM taranması <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </li> </ul> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  19. DOM taranması • Neçin hierarşi taranması gerekebilir? • Javascript açılan menü, adım 1: listedeki elemanları ekranda yerleştirmek; • Javascript kullanarak ul ve li elemanlarının belirli pozisyonlara götürülmesi gerekiyor • Bu iş için enine tarama doğal –menünün elemanları katman katman yerleştirilmektedir http://www.scinetcentral.com/~mishchenko/MIT504.html

  20. DOM enine tarama kodu function eninetarama(rootNode,handleFunction) { level=0; varthisLevelNodes = new Array(rootNode); while(thisLevelNodes.length>0) { //handleFunction'inuygulanmasi for(vari=0;i<thisLevelNodes.length;i++) { handleFunction(thisLevelNodes[i],level); } //hierarşide ilerleme varnextLevelNodes = new Array(); for(vari=0;i<thisLevelNodes.length;i++) { if(thisLevelNodes[i].hasChildNodes()) { for(var k=0;k<thisLevelNodes[i].childNodes.length;k++) { nextLevelNodes.push(thisLevelNodes[i].childNodes[k]); } } } thisLevelNodes = nextLevelNodes; level++; } } http://www.scinetcentral.com/~mishchenko/MIT504.html

  21. DOM taranması ul li ul li li li li ul ul li li li li <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </li> </ul> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  22. Menü elemanı yerleştirme fonksiyonu UL elemanları, ilgili babasıLI elemanın tam sağda yerleştirilir; if(node.tagName == 'UL') { var top = 0; var left = menuWidth; node.style.position='absolute'; node.style.display='block'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.listStyleType = 'none'; } http://www.scinetcentral.com/~mishchenko/MIT504.html

  23. Menü elemanı yerleştirme fonksiyonu li, menü tipine bağlı olaraksırayla yerleştirilir – burada dikey düzende if(node.tagName == 'LI') { left=0; if(node.previousSibling == null) top = 0; else top+=menuHeight; node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.width = menuWidth + 'px'; node.style.border='solid black 1px'; } http://www.scinetcentral.com/~mishchenko/MIT504.html

  24. http://www.scinetcentral.com/~mishchenko/MIT504.html

  25. DOM taranması • Derinlikle (derine) arama, DOM hierarşi DOM kökü ile başlayınca, elemanın çocukları varken ilk çocuklarını takip eder http://www.scinetcentral.com/~mishchenko/MIT504.html

  26. Enine tarama kodu (özyineleme) function derinetarama(currentNode,handleFunction,level) { handleFunction(currentNode,level); if(currentNode.hasChildNodes()) { derinetarama(currentNode.firstChild,handleFunction,level+1); } if(currentNode.nextSibling!=null) { derinetarama(currentNode.nextSibling,handleFunction,level); } } http://www.scinetcentral.com/~mishchenko/MIT504.html

  27. DOM taranması DOM hierarşi derine taranması DOM kökü http://www.scinetcentral.com/~mishchenko/MIT504.html

  28. DOM taranması DOM hierarşi derine taranması DOM kökü 1 2 3 4 5 6 7 8 http://www.scinetcentral.com/~mishchenko/MIT504.html

  29. DOM taranması • Javascript açılan menü elemanlarının ekranda yerleştirilmesi http://www.scinetcentral.com/~mishchenko/MIT504.html

  30. DOM taranması <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </li> </ul> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  31. DOM taranması • Derine taramada, menünün elemanlarının katman sırasında geçirilmesi ellerimizde yok, yerleştirme fonksiyon şu sıradan bağımsız olarak çalışmalı, yani yerleştirmeyi göreli olarak, baba/kardeş elemanına göre yapmamız gerekiyor http://www.scinetcentral.com/~mishchenko/MIT504.html

  32. Menü elemanı yerleştirme fonksiyonu ul, baba li elemanına göre pozisyon alır, if(node.tagName == 'UL') { var top = 0; var left = 0; if(node.parentNode.tagName == 'LI') { left = node.parentNode.offsetLeft +node.parentNode.offsetWidth; } node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.listStyleType = 'none'; } http://www.scinetcentral.com/~mishchenko/MIT504.html

  33. Menü elemanı yerleştirme fonksiyonu li, sırayla menü tipine göre yerleştirilir – burada dikey düzende if(node.tagName == 'LI') { var top=-1; var left=0; var width=50; var findPreviousLiNode=node.previousSibling; while(findPreviousLiNode.tagName!='LI' && findPreviousLiNode.previousSibling!=null) { findPreviousLiNode=findPreviousLiNode.previousSibling; } if(findPreviousLiNode.tagName=='LI') { top=findPreviousLiNode.offsetTop + findPreviousLiNode.offsetHeight; } node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.width = width + 'px'; node.style.border='solid black 1px'; } http://www.scinetcentral.com/~mishchenko/MIT504.html

  34. DOM taranması • Javascript açılan menünün diğer işlemleri: • adım 2: altmenünün ul elemanlarının saklanması • adım 3: li elemanlarına altmenü açıp kapatan olay işleyicilerinin atanması • document.getElementsByTagName kullanarak yapılabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  35. Enine taranma kodu Altmenüleri sakla: uller=document.getElementById("menu").getElementsByTagName('UL'); for(vari=0;i<uller.length;i++) { uller[i].style.display='none'; } Açıp kapatan olay işlemcileri: liler=document.getElementById("menu").getElementsByTagName('LI'); for(vari=0;i<liler.length;i++) { liler[i].addEventListener("mouseover",showhidelistener,false); liler[i].addEventListener("mouseout",showhidelistener,false); } http://www.scinetcentral.com/~mishchenko/MIT504.html

  36. DOM taranması • Javascript açılan menüde olay işleme • Javascript açılan menüde altmenüleri açıp kapatan onmouseover/onmouseout olay işleyicisi var olmalı • Ancak şu işleyicinin tasarımı basit değil http://www.scinetcentral.com/~mishchenko/MIT504.html

  37. DOM taranması • Buraya Mevcut sorunlar: • Bir LI elemanından fare ayrıldığında fakat bağlı altmenüye girdiğinde, hem altmenünün onmouseover hemde bırakıldığı LI elemanının onmouseoutolayları tetiklenir; sonuç olarak, fare altmenüye girdiğine rağmen, onmouseout olayından dolayı LI elemanının kapanması için altemenü de kapanır • Söz konusu olaylar yukarı doğru yayılır ve tüm LI elemanlarında işleyicileri tetikler, yani olayların yayılması durdurulması gerekiyor http://www.scinetcentral.com/~mishchenko/MIT504.html

  38. DOM taranması Mesela, bu fonksiyon açma kapatma işleyicisi olarak olamaz http://www.scinetcentral.com/~mishchenko/MIT504.html

  39. Örnek function hideshowlistener(event) { var target = event.target; altULNode = target.firstChild; if(event.type == 'mouseover') { altULNode.style.display = 'block'; } else if(event.type == 'mouseout') { altULNode.style.display = 'none'; } } http://www.scinetcentral.com/~mishchenko/MIT504.html

  40. DOM taranması • İlgili fare olay işlemeleri zor; • Fare ayrıldığında bir saklanma talebi oluşturulmalı, bu talep daha sonra (örneğin 100ms sonra) işletilmeli • Fare altmenüye girdiğinde, şu talep iptal edilip saklanma işlemi gerçekleşmez • Bu açıdan farenin hareketleri incelenmeli ve ayrı ayrı işletilmeli http://www.scinetcentral.com/~mishchenko/MIT504.html

  41. Örnek function hidelistener(event) { ... if(event.type == 'mouseout') { //ELEMANI SAKLAMA KUYRUGUNE EKLE queuedHideNode = target; queuedHideDirection = 'all'; setTimeout(hidenode,100); } ... } http://www.scinetcentral.com/~mishchenko/MIT504.html

  42. DOM taranması Hiç saklama altmenüleri sakla altmenüleri ve kendisini sakla Hepsini sakla <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <ul> <li>Menu 3>1 <ul> <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> </ul> </li> <li>Menu 3>2</li> </ul> </li> </ul> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  43. Örnek function hidelistener(event) { ... if(event.type == 'mouseover') { //ONMOUSEOUT EMENANININ SAKLANMA IPTALI if(queuedHideNode != null) { //AYNI MENU ICINDE HAREKET if(queuedHideNode.parentNode.isSameNode(target.parentNode)) { queuedHideDirection = 'down'; } //UST MENUYE HAREKET if(queuedHideNode.parentNode.parentNode.isSameNode(target)) { queuedHideDirection = 'down'; } else if(queuedHideNode.parentNode.parentNode.parentNode.isSameNode(target.parentNode)) { queuedHideNode = target.parentNode; queuedHideDirection = 'down'; } //ALT MENUYE HAREKET if(queuedHideNode.isSameNode(target.parentNode.parentNode)) { queuedHideNode = null; queuedHideDirection = 'none'; } } ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  44. Örnek function hidelistener(event) { ... if(event.type == 'mouseover') { ... //ALT-MENU GOSTER findULNode = target.firstChild; while(findULNode.tagName != 'UL' && findULNode.nextSibling != null) { findULNode = findULNode.nextSibling; } if(findULNode.tagName == 'UL') { findULNode.style.display = 'block'; } } ... event.stopPropagation(); } http://www.scinetcentral.com/~mishchenko/MIT504.html

  45. Örnek function hidenode() { if(queuedHideNode == null) return; hidenodesdown(); if(queuedHideDirection == 'down') return; hidenodesup(); queuedHideNode=null; queuedHideDirection=null; } http://www.scinetcentral.com/~mishchenko/MIT504.html

  46. Örnek function hidenodesdown() { //aşağıdakileri sakla uller = queuedHideNode.getElementsByTagName('UL'); for(vari = 0;i<uller.length;i++) { uller[i].style.display='none'; } } function hidenodesup() { //yukarıdakileri sakla currentNode=queuedHideNode; while(currentNode.parentNode != null) { if(currentNode.tagName == 'UL' && currentNode.parentNode.tagName == 'LI') { currentNode.style.display='none'; } currentNode=currentNode.parentNode; } } http://www.scinetcentral.com/~mishchenko/MIT504.html

  47. http://www.scinetcentral.com/~mishchenko/MIT504.html

  48. DOM taranması DOM hierarşi içinde navigasyon (baba, çocuk, önceki, sonraki) DOM hierarşi taranması (enine, derine, aşağı ve yukarı) Javascript açılan menü örneğinde, DOM taranması teknikleri ve ilgili olay işleme http://www.scinetcentral.com/~mishchenko/MIT504.html

  49. http://www.scinetcentral.com/~mishchenko/MIT504.html

  50. DOM hierarşisi güncelleştirme Javascript DOM'da, web sayfasını direkt olarak oluşturma ve değiştirmeye imkan var Bu şekilde web sayfası ile çalışma, DOM hierarşisi içinde yeni elemanların eklenme, kaldırılma ve taşınması olarak düşünülmeli http://www.scinetcentral.com/~mishchenko/MIT504.html

More Related