Getting Started with DOM
•
1 like•864 views
Talk's slide "Getting Started with DOM" given at MercadoLibre.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Getting Started with DOM
Similar to Getting Started with DOM (20)
Recently uploaded
Recently uploaded (20)
Getting Started with DOM
- 1. Getting Started with DOM
- 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. 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. Contents 1. Node Types 2. Interfaces 3. Inheritance 4. Element Node 5. Text Node 6. Events 7. Document Fragment
- 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. 1. Node Type document.DOCUMENT_NODE === 9 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
- 7. 1. Node Type document.DOCUMENT_NODE === 9 document
- 8. 1. Node Type document.ELEMENT_NODE === 1 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
- 9. 1. Node Type document.ELEMENT_NODE === 1 document.body
- 10. 1. Node Type document.ATTRIBUTE_NODE === 2 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
- 11. 1. Node Type document.ATTRIBUTE_NODE === 2 document.createAttribute(‘class’);
- 12. 1. Node Type document.TEXT_NODE === 3 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
- 13. 1. Node Type document.TEXT_NODE === 3 document.createTextNode(‘Hello World!’);
- 14. 1. Node Type document.DOCUMENT_TYPE_NODE === 10 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
- 15. 1. Node Type document.DOCUMENT_TYPE_NODE === 10 document.doctype
- 16. 1. Node Type document.DOCUMENT_FRAGMENT_NODE === 11 <!doctype html>! <html>! !<head>! !! <tittle></tittle>! !</head>! !<body class=“widget”>! !! Hello World!! !</body>! </html>
- 17. 1. Node Type document.DOCUMENT_FRAGMENT_NODE === 11 document.createDocumentFragment()
- 18. 2. Interfaces
- 19. 2. Interfaces p instanceof HTMLParagraphElement HTMLHtmlElement! HTMLHeadElement! HTMLLinkElement! HTMLTitleElement! HTMLStyleElement! HTMLBodyElement! HTMLFormElement
- 20. 3. Inheritance
- 21. 3. Inheritance document Node HTMLElement
- 22. 4. Element Node
- 23. 4. Element Node Node properties dataset! attributes! tagName! children
- 24. 4. Element Node Node methods createElement()! getAttribute()! setAttribute()! hasAttribute()! removeAttribute()! classList()
- 25. 4. Element Node Working with string innerHTML! innerText! outerHTML! textContent! insertAdjacentHTML()
- 26. 4. Element Node Working with nodes appendChild()! removeChild()! replaceChild()! insertBefore()! cloneNode()
- 27. 4. Element Node Node selection single element multiple elements preconfigured collections
- 28. 4. Element Node Node selection single element multiple elements preconfigured collections querySelector()! getElementById()
- 29. 4. Element Node Node selection single element multiple elements preconfigured collections querySelector()! getElementById() querySelectorAll()! getElementsByTagName()! getElementsByClassName()
- 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. 4. Element Node Collections types Live Static
- 32. 4. Element Node Collection type: Live Live Static getElementsByTagName()! getElementsByClassName()! document.all! document.links! document.images! querySelector().childNodes! !
- 33. 4. Element Node Collection type: Static Live Static getElementsByTagName()! getElementsByClassName()! document.all! document.links! document.images! querySelector().childNodes! ! querySelectorAll()
- 34. 4. Element Node Collections types HTMLCollection NodeList StyleSheetList querySelector().children! ! querySelector().childNodes! ! document.styleSheets
- 35. 4. Element Node Width without borders querySelector().clientWidth
- 36. 4. Element Node Width with borders querySelector().getBoudingClientRect().width
- 37. 4. Element Node First parent positioned querySelector().offsetParent
- 38. 4. Element Node Top to the offsetParent querySelector().offsetTop
- 39. 4. Element Node Left to the offsetParent querySelector().offsetLeft
- 40. 4. Element Node Real height querySelector().scrollHeight
- 41. 4. Element Node Scrolled top difference querySelector().scrollTop
- 42. 4. Element Node Real width querySelector().scrollWidth
- 43. 4. Element Node Scrolled left difference querySelector().scrollLeft
- 44. 5. Text Node
- 45. 5. Text Node Node properties data! textContent! nodeValue
- 46. splitText()! normalize()! appendData(‘!’)! deleteData(3,5)! insertData(2,’Text’)! replaceData(1,2,’Text’)! substringData(2,3) 5. Text Node Node methods
- 47. 5. Text Node Text nodes <p>This is <code>TEXT_NODE</code>.</p>
- 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. 6. Events Setting Events 1. Inline Event Handler 2. Property Event Handler 3. addEventListener() method
- 50. DOM Event Types Event! UIEvent! MouseEvent! FocusEvent! WheelEvent! TouchEvent! HashChangeEvent! NavigatorOnLine! PageTransitionEvent! DragEvent 6. Events
- 51. 6. Events Event type readystatechange! DOMContentLoaded
- 52. 6. Events UIEvent type load! abort! unload! error! resize! scroll
- 53. MouseEvent type contextMenu! click! dbclick! mousedown! mouseenter! mouseleave! mousemove! mouseout! mouseup! mouseover 6. Events
- 54. 6. Events FocusEvent type blur! focus! focusin! focusout
- 55. 6. Events Form Events type change! reset! submit! select
- 56. 6. Events WheelEvent type wheel/mousewheel
- 57. 6. Events KeyboardEvent type keydown! keypress! keyup
- 58. 6. Events TouchEvent type touchstart! touchend! touchmove! touchenter! touchleave! touchcancel
- 59. 6. Events HashChangeEvent type hashchange
- 60. 6. Events NavigatorOnLine type online! offline
- 61. 6. Events PageTransitionEvent type pagehide! pageshow
- 62. DragEvent type drag! dragstart! dragend! dragenter! dragleave! dragover! drop 6. Events
- 63. 6. Events The Event Flow is composed by two phases ! 1. Capture Event Phase 2. Propagation/Bubbling Event Phase
- 64. 6. Events Capture Event Phase
- 65. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true) document.body.addEventListener(…,…,true) document.querySelector(‘div’).addEventListener(…,…,true)
- 66. 6. Events Capture Event Phase
- 67. 6. Events Capture Event Phase window.addEventListener(…,…,true)
- 68. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true)
- 69. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true) document.body.addEventListener(…,…,true)
- 70. 6. Events Capture Event Phase window.addEventListener(…,…,true) document.addEventListener(…,…,true) document.body.addEventListener(…,…,true) document.querySelector(‘div’).addEventListener(…,…,true)
- 71. 6. Events Propagation Event Phase
- 72. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false) document.addEventListener(…,…,false) window.addEventListener(…,…,false)
- 73. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false)
- 74. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false)
- 75. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false) document.addEventListener(…,…,false)
- 76. 6. Events Propagation Event Phase document.querySelector(‘div’).addEventListener(…,…,false) document.body.addEventListener(…,…,false) document.addEventListener(…,…,false) window.addEventListener(…,…,false)
- 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. 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. The end!