Getting Started with DOM

546 views
441 views

Published on

Talk's slide "Getting Started with DOM" given at MercadoLibre.

Published in: Engineering, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
546
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Getting Started with DOM

  1. 1. Getting Started with DOM
  2. 2. writing HTML documents 1. you encapsulate HTML inside other HTML 2. you set up a hierarchy 3. it is indicated visually by indenting 4. it can be expressed as a tree
  3. 3. browser’s job 1. when loads the HTML interrupts the process 2. to simulate the markup encapsulation 3. parsing this hierarchy to create a tree of objects
  4. 4. Contents 1. Node Types 2. Interfaces 3. Inheritance 4. Element Node 5. Text Node 6. Events 7. Document Fragment
  5. 5. 1.Node Type 9 1 2 3 11 10 document.DOCUMENT_NODE document.ELEMENT_NODE document.ATTRIBUTE_NODE document.TEXT_NODE document.DOCUMENT_FRAGMENT_NODE document.DOCUMENT_TYPE_NODE
  6. 6. 1. Node Type document.DOCUMENT_NODE === 9 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
  7. 7. 1. Node Type document.DOCUMENT_NODE === 9 document
  8. 8. 1. Node Type document.ELEMENT_NODE === 1 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
  9. 9. 1. Node Type document.ELEMENT_NODE === 1 document.body
  10. 10. 1. Node Type document.ATTRIBUTE_NODE === 2 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
  11. 11. 1. Node Type document.ATTRIBUTE_NODE === 2 document.createAttribute(‘class’);
  12. 12. 1. Node Type document.TEXT_NODE === 3 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
  13. 13. 1. Node Type document.TEXT_NODE === 3 document.createTextNode(‘Hello World!’);
  14. 14. 1. Node Type document.DOCUMENT_TYPE_NODE === 10 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
  15. 15. 1. Node Type document.DOCUMENT_TYPE_NODE === 10 document.doctype
  16. 16. 1. Node Type document.DOCUMENT_FRAGMENT_NODE === 11 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
  17. 17. 1. Node Type document.DOCUMENT_FRAGMENT_NODE === 11 document.createDocumentFragment()
  18. 18. 2. Interfaces
  19. 19. 2. Interfaces p instanceof HTMLParagraphElement HTMLHtmlElement! HTMLHeadElement! HTMLLinkElement! HTMLTitleElement! HTMLStyleElement! HTMLBodyElement! HTMLFormElement
  20. 20. 3. Inheritance
  21. 21. 3. Inheritance document Node HTMLElement
  22. 22. 4. Element Node
  23. 23. 4. Element Node Node properties dataset! attributes! tagName! children
  24. 24. 4. Element Node Node methods createElement()! getAttribute()! setAttribute()! hasAttribute()! removeAttribute()! classList()
  25. 25. 4. Element Node Working with string innerHTML! innerText! outerHTML! textContent! insertAdjacentHTML()
  26. 26. 4. Element Node Working with nodes appendChild()! removeChild()! replaceChild()! insertBefore()! cloneNode()
  27. 27. 4. Element Node Node selection single element multiple elements preconfigured collections
  28. 28. 4. Element Node Node selection single element multiple elements preconfigured collections querySelector()! getElementById()
  29. 29. 4. Element Node Node selection single element multiple elements preconfigured collections querySelector()! getElementById() querySelectorAll()! getElementsByTagName()! getElementsByClassName()
  30. 30. 4. Element Node Node selection single element multiple elements preconfigured collections querySelector()! getElementById() querySelectorAll()! getElementsByTagName()! getElementsByClassName() document.all! document.forms! document.links! document.images
  31. 31. 4. Element Node Collections types Live Static
  32. 32. 4. Element Node Collection type: Live Live Static getElementsByTagName()! getElementsByClassName()! document.all! document.links! document.images! querySelector().childNodes! !
  33. 33. 4. Element Node Collection type: Static Live Static getElementsByTagName()! getElementsByClassName()! document.all! document.links! document.images! querySelector().childNodes! ! querySelectorAll()
  34. 34. 4. Element Node Collections types HTMLCollection NodeList StyleSheetList querySelector().children! ! querySelector().childNodes! ! document.styleSheets
  35. 35. 4. Element Node Width without borders querySelector().clientWidth
  36. 36. 4. Element Node Width with borders querySelector().getBoudingClientRect().width
  37. 37. 4. Element Node First parent positioned querySelector().offsetParent
  38. 38. 4. Element Node Top to the offsetParent querySelector().offsetTop
  39. 39. 4. Element Node Left to the offsetParent querySelector().offsetLeft
  40. 40. 4. Element Node Real height querySelector().scrollHeight
  41. 41. 4. Element Node Scrolled top difference querySelector().scrollTop
  42. 42. 4. Element Node Real width querySelector().scrollWidth
  43. 43. 4. Element Node Scrolled left difference querySelector().scrollLeft
  44. 44. 5. Text Node
  45. 45. 5. Text Node Node properties data! textContent! nodeValue
  46. 46. splitText()! normalize()! appendData(‘!’)! deleteData(3,5)! insertData(2,’Text’)! replaceData(1,2,’Text’)! substringData(2,3) 5. Text Node Node methods
  47. 47. 5. Text Node Text nodes <p>This is <code>TEXT_NODE</code>.</p>
  48. 48. 6. Events It is a predefined or a custom moment in time that occurs in relationship to an element in the DOM, de document object or the window object.
  49. 49. 6. Events Setting Events 1. Inline Event Handler 2. Property Event Handler 3. addEventListener() method
  50. 50. DOM Event Types Event! UIEvent! MouseEvent! FocusEvent! WheelEvent! TouchEvent! HashChangeEvent! NavigatorOnLine! PageTransitionEvent! DragEvent 6. Events
  51. 51. 6. Events Event type readystatechange! DOMContentLoaded
  52. 52. 6. Events UIEvent type load! abort! unload! error! resize! scroll
  53. 53. MouseEvent type contextMenu! click! dbclick! mousedown! mouseenter! mouseleave! mousemove! mouseout! mouseup! mouseover 6. Events
  54. 54. 6. Events FocusEvent type blur! focus! focusin! focusout
  55. 55. 6. Events Form Events type change! reset! submit! select
  56. 56. 6. Events WheelEvent type wheel/mousewheel
  57. 57. 6. Events KeyboardEvent type keydown! keypress! keyup
  58. 58. 6. Events TouchEvent type touchstart! touchend! touchmove! touchenter! touchleave! touchcancel
  59. 59. 6. Events HashChangeEvent type hashchange
  60. 60. 6. Events NavigatorOnLine type online! offline
  61. 61. 6. Events PageTransitionEvent type pagehide! pageshow
  62. 62. DragEvent type drag! dragstart! dragend! dragenter! dragleave! dragover! drop 6. Events
  63. 63. 6. Events The Event Flow is composed by two phases ! 1. Capture Event Phase 2. Propagation/Bubbling Event Phase
  64. 64. 6. Events Capture Event Phase
  65. 65. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true) document.body.addEventListener(…,…,true) document.querySelector(‘div’).addEventListener(…,…,true)
  66. 66. 6. Events Capture Event Phase
  67. 67. 6. Events Capture Event Phase window.addEventListener(…,…,true)
  68. 68. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true)
  69. 69. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true) document.body.addEventListener(…,…,true)
  70. 70. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true) document.body.addEventListener(…,…,true) document.querySelector(‘div’).addEventListener(…,…,true)
  71. 71. 6. Events Propagation Event Phase
  72. 72. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false) document.addEventListener(…,…,false) window.addEventListener(…,…,false)
  73. 73. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false)
  74. 74. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false)
  75. 75. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false) document.addEventListener(…,…,false)
  76. 76. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false) document.addEventListener(…,…,false) window.addEventListener(…,…,false)
  77. 77. 7. Document Fragment It is a empty document template It acts just like the live DOM tree It only lives in memory It can’t contain <body> and <html> node It’s not added to the DOM when a fragment is appended
  78. 78. 7. Document Fragment innerHTML hack var div = document.createElement(‘div’);! var frag = document.createDocumentFragment();! div.innerHTML = ‘<p>It is <strong>better</strong>.</p>’;! ! frag.appendChild(div);! document.body.appendChild(frag);
  79. 79. The end!

×