1 / 67

JavaScript APIs You’ve Never Heard Of (And some you have)

JavaScript APIs You’ve Never Heard Of (And some you have). Nicholas C. Zakas @ slicknet. Who’s this guy?. flickr.com/photos/ vbillings /172124448/. HTML5, DOM4 & …DOM Level 2!. < ul id=“ mylist ”> <li>Item 1</li> < li>Item 1</li > < li>Item 1</li> </ ul >. UL. LI. LI. #text.

delu
Download Presentation

JavaScript APIs You’ve Never Heard Of (And some you have)

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. JavaScript APIs You’ve Never Heard Of(And some you have) Nicholas C. Zakas @slicknet

  2. Who’s this guy?

  3. flickr.com/photos/vbillings/172124448/

  4. HTML5, DOM4 & …DOM Level 2!

  5. <ul id=“mylist”> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> UL LI LI #text #text #text LI #text

  6. <ul id=“mylist”> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> var list = document.getElementById(“mylist”); console.log(list.childNodes.length); //7 console.log(list.children.length); //3 No vendor prefix! children DOM4 HTMLCollection of all child nodes that are elements

  7. <ul id=“mylist”> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> var list = document.getElementById(“mylist”), node1 = list.childNodes[0], child1 = list.children[0]; console.log(node1.nodeName); //”#text” console.log(child1.nodeName); //”LI” No vendor prefix! children DOM4 HTMLCollection of all child nodes that are elements

  8. <ul id=“mylist”> <!-- comment --> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> var list = document.getElementById(“mylist”), node1 = list.childNodes[0], child1 = list.children[0]; console.log(node1.nodeName); //”#text” console.log(child1.nodeName); //”#comment” IE 6-8 includes comments in the children collection children BUG! DOM4 HTMLCollection of all child nodes that are elements

  9. UL firstChild lastChild LI LI #text #text #text LI #text Element Traversal API Defines new properties for accessing element children

  10. 9 UL firstElementChild lastElementChild LI LI #text #text #text LI #text No vendor prefix! Element Traversal API Defines new properties for accessing element children

  11. 9 <ul id=“mylist”> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> var list = document.getElementById(“mylist”), node1 = list.firstChild, child1 = list.firstElementChild; console.log(node1.nodeName); //”#text” console.log(child1.nodeName); //”LI” No vendor prefix! firstElementChild Element Traversal API & DOM4 Point to first child node that is an element

  12. 9 <ul id=“mylist”> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> var list = document.getElementById(“mylist”), node1= list.lastChild, child= list.lastElementChild; console.log(node1.nodeName); //”#text” console.log(child1.nodeName); //”LI” No vendor prefix! lastElementChild Element Traversal API & DOM4 Point to last child node that is an element

  13. 9 nextSibling LI #text LI Element Traversal API Defines new properties for accessing element children

  14. 9 LI #text LI nextElementSibling Element Traversal API Defines new properties for accessing element children

  15. 9 previousSibling LI #text LI Element Traversal API Defines new properties for accessing element children

  16. 9 LI #text LI previousElementSibling Element Traversal API Defines new properties for accessing element children

  17. 9 // iterate over element children var child = element.firstElementChild; while(child) { process(child); child = child.nextElementSibling; } No vendor prefix! Element Traversal API Defines new properties for accessing element children

  18. var element = document.getElementById(“foo”); if (document.body.contains(element)) { //do something } function isAncestor(child, maybeAncestor) { return maybeAncestor.contains(child); } // useful for event delegation if (isAncestor(event.target, list)) { // do something } No vendor prefix! contains() DOM4 Determines if a given element is an ancestor of another

  19. “beforebegin” “afterbegin” “beforeend” “afterend” element.insertAdjacentHTML(location, html); Any valid HTML string No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  20. <nav> <h2>Site Menu</h2> <ulid="menu"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> var menu = document.getElementById("menu"); No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  21. <nav> <h2>Site Menu</h2> <p>Hello world!</p> <ulid="menu"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> var menu = document.getElementById("menu"); menu.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>"); No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  22. <nav> <h2>Site Menu</h2> <ulid="menu"> <li>Hello world!</li> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> var menu = document.getElementById("menu"); menu.insertAdjacentHTML(“afterbegin", "<li>Hello world!</li>"); No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  23. <nav> <h2>Site Menu</h2> <ulid="menu"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li>Hello world!</li> </ul> </nav> var menu = document.getElementById("menu"); menu.insertAdjacentHTML(“beforeend", "<li>Hello world!</li>"); No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  24. <nav> <h2>Site Menu</h2> <ulid="menu"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> <p>Hello world!</p> </nav> var menu = document.getElementById("menu"); menu.insertAdjacentHTML(“afterend", "<p>Hello world!</p>"); No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  25. http://jsperf.com/insertadjacenthtml-perf/4 In many cases, faster than innerHTML! No vendor prefix! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place

  26. element.outerHTML = html; Any valid HTML string No vendor prefix! outerHTML HTML5 Get/set HTML for an entire element

  27. <nav> <h2>Site Menu</h2> <ulid="menu"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> var menu = document.getElementById("menu"); var html = menu.outerHTML; No vendor prefix! outerHTML HTML5 Get/set HTML for an entire element

  28. <nav> <h2>Site Menu</h2> <p>Hello world!</p> </nav> var menu = document.getElementById("menu"); menu.outerHTML = "<p>Hello world!</p>"; console.log(menu.tagName); // “UL” console.log(menu.parentNode); // null Detached reference to <ul> No vendor prefix! outerHTML HTML5 Get/set HTML for an entire element

  29. 9 document.implementation.createHTMLDocument(title); Title of the document No vendor prefix! createHTMLDocument() DOM Level 2 Create an invisible document

  30. 9 var doc = document.implementation.createHTMLDocument(“Test”); console.log(doc.title); // “Test” doc.body.innerHTML = “<p>Hello world!</p>”; var p = document.querySelector(“p”); console.log(p.textContent); // “Hello world!” No vendor prefix! createHTMLDocument() DOM Level 2 Create an invisible document

  31. 9 function isSafeHTML(html) { var doc = document.implementation.createHTMLDocument(“Test”); doc.body.innerHTML = html; return !doc.querySelector(“script,style,link,object”); } No vendor prefix! createHTMLDocument() DOM Level 2 Create an invisible document

  32. 9 function sanitizeHTML(html) { var doc = document.implementation.createHTMLDocument(“Test”); doc.body.innerHTML = html; var nodes = doc.querySelectorAll(“script,style,link,object”); for (vari=0, len=nodes.length; i < len; i++) { nodes[i].parentNode.removeChild(nodes[i]); } return doc.body.innerHTML; } No vendor prefix! createHTMLDocument() DOM Level 2 Create an invisible document

  33. 9 <input value="data" id="data-field"> var textbox = document.getElementById("data-field"); textbox.focus(); textbox.select(); textbox.setSelectionRange(1, 3); No vendor prefix! setSelectionRange() HTML5 Select specific parts of textbox content

  34. 9 // put caret at start textbox.setSelectionRange(0, 0); // put caret at end textbox.setSelectionRange( textbox.value.length, textbox.value.length); No vendor prefix! setSelectionRange() HTML5 Select specific parts of textbox content

  35. 9 <input value="data" id="data-field"> var textbox = document.getElementById("data-field"); textbox.focus(); textbox.setSelectionRange(1, 3); console.log(textbox.selectionStart); // 1 console.log(textbox.selectionEnd); // 3 No vendor prefix! selectionStart/selectionEnd HTML5 Set/get the start and ending range of selection

  36. <input value="data" id="data-field"> var textbox = document.getElementById("data-field"); textbox.focus(); var focused = document.activeElement; console.log(focused === textbox); // true No vendor prefix! activeElement HTML5 Returns the element that currently has focus

  37. XMLHttpRequest Level 2

  38. 10 3 var data = new FormData(); data.append(“name”, “Nicholas”); data.append(“age”, 25); data.append(“note”, “Yeah right!”); var xhr = new XMLHttpRequest(); xhr.open(“post”, “/submit”, true); //setup event handlers xhr.send(data); No vendor prefix! FormData XMLHttpRequest Level 2 Used to submit <form> data via XMLHttpRequest

  39. 10 3 var data = new FormData(document.forms[0]); var xhr = new XMLHttpRequest(); xhr.open(“post”, “/submit”, true); //setup event handlers xhr.send(data); No vendor prefix! FormData XMLHttpRequest Level 2 Used to submit <form> data via XMLHttpRequest

  40. 10 3 <input type="file" id="photo" name="photo"> vardata = new FormData(), fileControl = document.getElementById("photo"); data.append(“name”, “Nicholas”); data.append(“photo”, fileControl.files[0]); varxhr = new XMLHttpRequest(); xhr.open(“post”, “/submit”, true); //setup event handlers xhr.send(data); No vendor prefix! FormData XMLHttpRequest Level 2 Used to submit <form> data via XMLHttpRequest

  41. 10 3 varxhr = new XMLHttpRequest(); xhr.open(“post”, “/submit”, true); xhr.upload.onprogress = function(event) { var percentage = event.loaded/event.total * 100; updateProgress(percentage); }; xhr.send(data); No vendor prefix! Upload Progress XMLHttpRequest Level 2 Monitor the time to upload

  42. 9 3 varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.timeout = 5000; xhr.ontimeout = function() { console.log(“Request timed out.”); }; // other event handlers xhr.send(data); No vendor prefix! XHR Timeouts XMLHttpRequest Level 2 Used to stop a request after a period of time

  43. varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.onload = function() { var text = xhr.responseText; doSomethingWith(text); }; // other event handlers xhr.send(); No vendor prefix! XHR Response Types XMLHttpRequest Level 2 Retrieve a particular type of object – not just text!

  44. varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.onload = function() { varxmldoc = xhr.responseXML; doSomethingWith(xmldoc); }; // other event handlers xhr.send(); No vendor prefix! XHR Response Types XMLHttpRequest Level 2 Retrieve a particular type of object – not just text!

  45. 10 3 varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.responseType = "text"; xhr.onload = function() { var text = xhr.response; doSomethingWith(text); }; // other event handlers xhr.send(); No vendor prefix! XHR Response Types XMLHttpRequest Level 2 Retrieve a particular type of object – not just text!

  46. 10 3 varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.responseType = "document"; xhr.onload = function() { varxmldoc = xhr.response; doSomethingWith(xmldoc); }; // other event handlers xhr.send(); No vendor prefix! XHR Response Types XMLHttpRequest Level 2 Retrieve a particular type of object – not just text!

  47. 10 3 varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.responseType = "blob"; xhr.onload = function() { var blob = xhr.response; doSomethingWith(blob); }; // other event handlers xhr.send(); Great for downloading images! No vendor prefix! XHR Response Types XMLHttpRequest Level 2 Retrieve a particular type of object – not just text!

  48. 10 3 varxhr = new XMLHttpRequest(); xhr.open(“get”, “/data”, true); xhr.responseType = "arraybuffer"; xhr.onload = function() { varbinData = new Uint16Array(xhr.response); doSomethingWith(binData); }; // other event handlers xhr.send(); Great for downloading binary data! No vendor prefix! XHR Response Types XMLHttpRequest Level 2 Retrieve a particular type of object – not just text!

More Related