DOM

Techtalk sobre DOM

Transcript

1. ELEMENTO DOCUMENT OBJECT MODEL
2. Por que vc usa jQuery? • Porque é mais fácil? • Porque é crossbrowser • Porque manipular DOM é um saco™ • Porque eu gosto do ajax dele (...)
3. O que exatamente é mais fácil? // retorna...? $(".item") // retorna...? $("#primeiro") // retorna? Um array? Um o que? Com o que? $("p").after("<p>Outro paragrafo</p>")
4. O que exatamente é mais fácil? <div> <p class="item">1</p> <p class="item">2</p> </div> <div id="second_part"> <p class="item">3</p> </div> $("div p.item:first");
5. O que exatamente é mais fácil? <div> <p class="item">1</p> <p class="item">2</p> </div> <div id="second_part"> <p class="item">3</p> </div> $("div p.item:first"); $("div p.item:first-child");
6. O que exatamente é mais fácil? <div> <p class="item">1</p> <p class="item">2</p> </div> <div id="second_part"> <p class="item">3</p> </div> $("div p.item:first"); $("div p.item:first-child"); $("div p")[1];
8. DOM Having an idea what you are doing <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> UL Li Li Li
9. DOM Having an idea what you are doing <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> UL Li Li Li
10. DOM - Whitespace matters <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> UL #text Li #text Li #text Li #text
11. DOM - Whitespace matters <ul id="navbar"><li>Home</li><li>Sign in</li><li>Sign up</li></ul> UL Li Li Li
12. Selectors <div> <p class="item">Primeiro parágrafo </p> <p class="item">Segundo parágrafo </p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo </p> </div>
13. Selectors - Os famosos <div> <p class="item">Primeiro parágrafo </p> <p class="item">Segundo parágrafo </p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo </p> </div> // Singular: Retorna UM node document.getElementById("second_part")
14. Selectors - Os famosos <div> <p class="item">Primeiro parágrafo</p> <p class="item">Segundo parágrafo</p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo</p> </div> // Plural: retorna um NodeList document.getElementsByTagName("p")
15. Selectors - Os famosos <div> <p class="item">Primeiro parágrafo</p> <p class="item">Segundo parágrafo</p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo</p> </div> // Plural: retorna um Nodelist document.getElementsByClassName("item")
16. Selectors - O "jQuery" <div> <p class="item">Primeiro parágrafo</p> <p class="item">Segundo parágrafo </p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo </p> </div> // retorna UM node document.querySelector("p")
17. Selectors - O "jQuery" <div> <p class="item">Primeiro parágrafo</p> <p class="item">Segundo parágrafo</p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo</p> </div> // retorna UM node document.querySelectorAll("p")
18. Selectors - O "jQuery" <div> <p class="item">Primeiro parágrafo </p> <p class="item">Segundo parágrafo </p> </div> <div id="second_part"> <p class="item">Terceiro parágrafo</p> </div> document.querySelectorAll("#second_part p.item")
19. DOM - Navegando <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> UL #text Li #text Li #text Li #text
20. DOM - Navegando <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> var navbar = document.getElementById("navbar"); navbar.childNodes.length; // 8 navbar.children.length; // 3
22. DOM - Navegando <ul id="navbar"> <!-- With love: IE team --> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> var navbar = document.getElementById("navbar"); navbar.childNodes.length; // 9 navbar.children.length; // 4 IE trata comentários como um Node
23. DOM - Navegando <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> UL #text Li #text Li #text Li #text firstChild lastChild
24. DOM - Navegando <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> UL #text Li #text Li #text Li #text firstElementChild lastElementChild
25. DOM - Navegando Li #text Li nextSibling nextSibling
26. DOM - Navegando Li #text Li nextElementSibling
27. DOM - Navegando Li #text Li previousSibling previousSibling
28. DOM - Navegando Li #text Li previousElementSibling
29. DOM - Contains var ul = document.querySelector("ul"); var li = document.querySelector("ul li:first-child"); ul.contains(li); // true li.contains(ul); // false // Ótimo para fazer delegação de eventos ul.addEventListener("click", function() { if(event.target.contains(li)) { // ... } });
30. DOM - Manipulando <nav> <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> </nav> var menu = document.getElementById ("navbar");
31. DOM - Manipulando <nav> <h1>Site title</h1> <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> </nav> var menu = document.getElementById ("navbar"); menu.insertAdjacentHTML("beforeBegin", "<h1>Site Tiltle</h1>" );
32. DOM - Manipulando <nav> <ul id="navbar"> <li>Hello</li> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> </nav> var menu = document.getElementById ("navbar"); menu.insertAdjacentHTML("afterBegin", "<li>Hello</li>" )
33. DOM - Manipulando <nav> <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> <li>Bye</li> </ul> </nav> var menu = document.getElementById ("navbar"); menu.insertAdjacentHTML("beforeEnd", "<li>Bye</li>" )
34. DOM - Manipulando <nav> <ul id="navbar"> <li>Home</li> <li>Sign in</li> <li>Sign up</li> </ul> <h2>Wow</h2> </nav> var menu = document.getElementById ("navbar"); menu.insertAdjacentHTML("afterEnd", "<h2>Wow</h2>" )
35. DOM - Manipulando <nav> <ul id="navbar"> <li>Exit</li> </ul> </nav> var menu = document.getElementById ("navbar"); menu.innerHTML = "<li>Exit</li>"
36. DOM - Manipulando <nav> <p>Menu</p> </nav> var menu = document.getElementById ("navbar"); menu.outerHTML = "<p>Menu</p>";
37. DOM - Eventos ou... onde a coisa começa a complicar ul li li li
38. DOM - Eventos Capturing Model ul li li li
39. DOM - Eventos Capturing Model ul li li li
40. DOM - Eventos Capturing Model ul li li li
41. DOM - Eventos Bubbling Model ul li li li
42. DOM - Eventos Bubbling Model ul li li li
43. DOM - Eventos Bubbling Model ul li li li
44. DOM - Eventos W3C Model ul li li li
45. DOM - Eventos W3C Model ul li li li
46. DOM - Eventos W3C Model ul li li li
47. DOM - Eventos W3C Model ul li li li
48. DOM - Eventos var button = document.getElementById("button"); button.addEventListener("click", function() { // ... }, true); // Capture model button.addEventListener("click", function() { // ... }, false); // Bubbling model (default)
50. DOM - Eventos var button = document.getElementById("button"); button.attachEvent("onclick", function() { // obs: `this` aqui NÃO é o button, e sim window... }); IE9+ já não é mais assim =]
51. DOM - Parando Eventos <nav> <ul id="navbar"> <li><a href="/">Home</a></li> <li><a href="/sign_in">Sign in</a></li> <li><a href="/sign_up">Sign up</a></li> </ul> </nav> var list = $("#navbar"); var item = list.find("li:nth-child(2) a" ); $(list).on("click", function() { alert("List clicked!" ); }); $(item).on("click", function() { alert("Item clicked!" ); return false; });
52. DOM - Eventos como parar? <nav> <ul id="navbar"> <li><a href="/">Home</a></li> <li><a href="/sign_in">Sign in</a></li> <li><a href="/sign_up">Sign up</a></li> </ul> </nav> var list = document.getElementById ("navbar"); var item = list.querySelector( "li:nth-child(2) a" ); list.addEventListener( "click", function() { alert("List clicked!" ); }); item.addEventListener( "click", function() { alert("Item clicked!" ); return false; });
53. DOM - Eventos como parar? <nav> <ul id="navbar"> <li><a href="/">Home</a></li> <li><a href="/sign_in">Sign in</a></li> <li><a href="/sign_up">Sign up</a></li> </ul> </nav> var list = document.getElementById ("navbar"); var item = list.querySelector( "li:nth-child(2) a" ); list.addEventListener( "click", function() { alert("List clicked!" ); }); item.addEventListener( "click", function(event) { alert("Item clicked!" ); event.preventDefault(); });
54. DOM - Eventos como parar? <nav> <ul id="navbar"> <li><a href="/">Home</a></li> <li><a href="/sign_in">Sign in</a></li> <li><a href="/sign_up">Sign up</a></li> </ul> </nav> var list = document.getElementById ("navbar"); var item = list.querySelector( "li:nth-child(2) a" ); list.addEventListener( "click", function() { alert("List clicked!" ); }); item.addEventListener( "click", function(event) { alert("Item clicked!" ); event.preventDefault(); event.stopPropagation(); });
56. DOM - Eventos var button = document.getElementById("button"); button.attachEvent("onclick", function(event) { event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); }); IE9+ já não é mais assim =]
57. DOM - AJAX Simples requisição GET request = new XMLHttpRequest (); request.onreadystatechange (function(){ switch(request.readyState) { // case 0: // Uninitialized // case 1: // Loading // case 2: // Loaded // case 3: // Interactive case 4: // Complete if (request.status == 200) { alert("Success"); } else { alert("Error"); } break; } }); // Opens the connection with the server, the third // parameters informs whether the request is asynchronous. // This is the "A" of AJAX request.open("GET", "/users/search?name=Navarro" , true); // As it is a GET request, you aren't // sending anything on the request body request.send(null);
58. DOM - AJAX Simples requisição GET request = new XMLHttpRequest(); request.onreadystatechange (function(){ switch(request.readyState) { // case 0: // Uninitialized // case 1: // Loading // case 2: // Loaded // case 3: // Interactive case 4: // Complete if (request.status == 200) { alert("Success"); } else { alert("Error"); } break; } }); // Opens the connection with the server, the third // parameters informs whether the request is asynchronous. // This is the "A" of AJAX request.open("GET", "/users/search?name=Navarro" , true); // As it is a GET request, you aren't // sending anything on the request body request.send(null);
60. DOM - AJAX Simples requisição GET var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { request = new ActiveXObject("Microsoft.XMLHTTP"); } IE9+ já não é mais necessário.
61. DOM - AJAX Simples requisição GET request = new XMLHttpRequest (); request.onreadystatechange(function(){ switch(request.readyState) { // case 0: // Uninitialized // case 1: // Loading // case 2: // Loaded // case 3: // Interactive case 4: // Complete if (request.status == 200) { alert("Success"); } else { alert("Error"); } break; } }); // Opens the connection with the server, the third // parameters informs whether the request is asynchronous. // This is the "A" of AJAX request.open("GET", "/users/search?name=Navarro" , true); // As it is a GET request, you aren't // sending anything on the request body request.send(null);
62. DOM - AJAX Simples requisição GET request = new XMLHttpRequest (); request.onreadystatechange (function(){ switch(request.readyState) { // case 0: // Uninitialized // case 1: // Loading // case 2: // Loaded // case 3: // Interactive case 4: // Complete if (request.status == 200) { alert("Success"); } else { alert("Error"); } break; } }); // Opens the connection with the server, the third // parameters informs whether the request is asynchronous. // This is the "A" of AJAX request.open("GET", "/users/search?name=Navarro", true); // As it is a GET request, you aren't // sending anything on the request body request.send(null);
63. DOM - AJAX Simples requisição GET request = new XMLHttpRequest (); request.onreadystatechange (function(){ switch(request.readyState) { // case 0: // Uninitialized // case 1: // Loading // case 2: // Loaded // case 3: // Interactive case 4: // Complete if (request.status == 200) { alert("Success"); } else { alert("Error"); } break; } }); // Opens the connection with the server, the third // parameters informs whether the request is asynchronous. // This is the "A" of AJAX request.open("GET", "/users/search?name=Navarro" , true); // As it is a GET request, you aren't // sending anything on the request body request.send(null);
64. DOM - AJAX Simples requisição POST request.open("POST", "/users"); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send("user[first_name]=Rodrigo&user[last_name]=Navarro");
65. DOM - AJAX Simples requisição POST request.open("POST", "/users"); request.setRequestHeader("Content-Type", "application/json"); request.send({ "user": { "first_name": "Rodrigo", "last_name": "Navarro" } });
66. DOM - AJAX Simples requisição POST request.open("POST", "/users"); var formData = new FormData formData.append("first_name", "Rodrigo"); formData.append("last_name", "Navarro"); request.send(formData); IE9+
67. DOM - AJAX Simples requisição POST request.open("POST", "/users"); var form = document.getElementById("user_form"); var formData = new FormData(form); request.send(formData); IE9+
68. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.onload = function() { var text = request.responseText; } request.open("GET", "/users"); request.send();
69. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.onload = function() { var xmlDoc = request.responseXML; } request.open("GET", "/users"); request.send();
70. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.responseType = "text"; request.onload = function() { var text = request.response; } request.open("GET", "/users"); request.send(); IE10+
71. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.responseType = "document"; request.onload = function() { var xmlDoc = request.response; } request.open("GET", "/users"); request.send(); IE10+
72. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.responseType = "blob"; request.onload = function() { var blob = request.response; } request.open("GET", "/users"); request.send(); IE10+
73. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.responseType = "arraybuffer"; request.onload = function() { var binData = new Uint16Array(request.response); } request.open("GET", "/users"); request.send(); IE10+
74. DOM - AJAX Tratando a resposta var request = new XMLHttpRequest(); request.responseType = "json"; request.onload = function() { var json = request.response; } request.open("GET", "/users"); request.send(); Futuro
75. DOM - AJAX Timeouts var request = new XMLHttpRequest(); request.timeout = 500; request.ontimeout = function() { alert("Fuuuuu!"); } request.open("GET", "/users"); request.send(); IE10+
76. DOM - Revisando Selectors • document.querySelector() • document.querySelectorAll() Navegação • element.childNodes • element.children • element.firstChild • element.firstElementChild • element.siblings • element.nextSibling • element.nextElementSibling • element.previousSibling • element.previousElementSibling Manipulação • document.insertAdjacentHTML() • document.innerHTML • document.outerHTML Eventos • element.addEventListener() • event.preventDefault() • event.stopPropagation()