680 likes | 833 Views
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.
E N D
JavaScript APIs You’ve Never Heard Of(And some you have) Nicholas C. Zakas @slicknet
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 #text #text LI #text
<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
<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
<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
UL firstChild lastChild LI LI #text #text #text LI #text Element Traversal API Defines new properties for accessing element children
9 UL firstElementChild lastElementChild LI LI #text #text #text LI #text No vendor prefix! Element Traversal API Defines new properties for accessing element children
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
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
9 nextSibling LI #text LI Element Traversal API Defines new properties for accessing element children
9 LI #text LI nextElementSibling Element Traversal API Defines new properties for accessing element children
9 previousSibling LI #text LI Element Traversal API Defines new properties for accessing element children
9 LI #text LI previousElementSibling Element Traversal API Defines new properties for accessing element children
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
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
“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
<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
<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
<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
<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
<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
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
element.outerHTML = html; Any valid HTML string No vendor prefix! outerHTML HTML5 Get/set HTML for an entire element
<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
<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
9 document.implementation.createHTMLDocument(title); Title of the document No vendor prefix! createHTMLDocument() DOM Level 2 Create an invisible document
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
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
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
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
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
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
<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
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
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
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
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
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
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!
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!
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!
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!
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!
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!