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

transcript

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!

LI LI LI#text #text#text #text

children

var list = document.getElementById(“mylist”);

console.log(list.childNodes.length); //7console.log(list.children.length); //3

DOM4HTMLCollection of all child nodes that are elements

vendor

prefix!

children

var list = document.getElementById(“mylist”), node1 = list.childNodes[0], child1 = list.children[0];

console.log(node1.nodeName); //”#text”console.log(child1.nodeName); //”LI”

vendor

prefix!

children

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

Element Traversal APIDefines new properties for accessing element children

lastChildfirstChild

lastElementChildfirstElementChild

vendor

prefix!

firstElementChild

var list = document.getElementById(“mylist”), node1 = list.firstChild, child1 = list.firstElementChild;

Element Traversal API & DOM4Point to first child node that is an element

vendor

prefix!

lastElementChild

var list = document.getElementById(“mylist”), node1= list.lastChild, child= list.lastElementChild;

Element Traversal API & DOM4Point to last child node that is an element

vendor

prefix!

LI LI#text

nextSibling

LI LI#text

nextElementSibling

LI LI#text

previousSibling

LI LI#text

previousElementSibling

// iterate over element childrenvar child = element.firstElementChild;

while(child) { process(child); child = child.nextElementSibling;}

vendor

prefix!

contains()

var element = document.getElementById(“foo”);

if (document.body.contains(element)) { //do something}

function isAncestor(child, maybeAncestor) { return maybeAncestor.contains(child);}

// useful for event delegationif (isAncestor(event.target, list)) { // do something}

DOM4Determines if a given element is an ancestor of another

vendor

prefix!

insertAdjacentHTML()

element.insertAdjacentHTML(location, html);

HTML5Insert an HTML string into the DOM at a specific place

“beforebegin”“afterbegin”“beforeend”“afterend”

Any valid HTML string

vendor

prefix!

<nav> <h2>Site Menu</h2> <ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul></nav>

var menu = document.getElementById("menu");

vendor

prefix!

<nav> <h2>Site Menu</h2> <p>Hello world!</p> <ul id="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>");

vendor

prefix!

<nav> <h2>Site Menu</h2> <ul id="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>");

vendor

prefix!

<nav> <h2>Site Menu</h2> <ul id="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>");

vendor

prefix!

<nav> <h2>Site Menu</h2> <ul id="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>");

vendor

prefix!

insertAdjacentHTML()HTML5Insert an HTML string into the DOM at a specific place

vendor

prefix!

http://jsperf.com/insertadjacenthtml-perf/4

In many cases, faster than innerHTML!

outerHTML

element.outerHTML = html;

HTML5Get/set HTML for an entire element

Any valid HTML string

vendor

prefix!

outerHTML

<nav> <h2>Site Menu</h2> <ul id="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;

vendor

prefix!

outerHTML

<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

vendor

prefix!

Detached reference to

createHTMLDocument()

document.implementation.createHTMLDocument(title);

DOM Level 2Create an invisible document

vendor

prefix!

Title of the document

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!”

vendor

prefix!

function isSafeHTML(html) { var doc = document.implementation.createHTMLDocument(“Test”); doc.body.innerHTML = html;

return !doc.querySelector(“script,style,link,object”);}

vendor

prefix!

function sanitizeHTML(html) { var doc = document.implementation.createHTMLDocument(“Test”); doc.body.innerHTML = html;

var nodes = doc.querySelectorAll(“script,style,link,object”);

for (var i=0, len=nodes.length; i < len; i++) { nodes[i].parentNode.removeChild(nodes[i]); }

return doc.body.innerHTML;}

vendor

prefix!

setSelectionRange()HTML5Select specific parts of textbox content

vendor

prefix!

var textbox = document.getElementById("data-field");textbox.focus();

textbox.select();

textbox.setSelectionRange(1, 3);

setSelectionRange()HTML5Select specific parts of textbox content

vendor

prefix!

// put caret at starttextbox.setSelectionRange(0, 0);

// put caret at endtextbox.setSelectionRange( textbox.value.length, textbox.value.length);

selectionStart/selectionEndHTML5Set/get the start and ending range of selection

vendor

prefix!

var textbox = document.getElementById("data-field");textbox.focus();textbox.setSelectionRange(1, 3);

console.log(textbox.selectionStart); // 1console.log(textbox.selectionEnd); // 3

activeElementHTML5Returns the element that currently has focus

vendor

prefix!

var textbox = document.getElementById("data-field");textbox.focus();

var focused = document.activeElement;console.log(focused === textbox); // true

XMLHttpRequest Level 2

FormData

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);

XMLHttpRequest Level 2Used to submit <form> data via XMLHttpRequest

vendor

prefix!

FormData

var data = new FormData(document.forms[0]);

xhr.send(data);

vendor

prefix!

FormData

var data = new FormData(), fileControl = document.getElementById("photo");

data.append(“name”, “Nicholas”);data.append(“photo”, fileControl.files[0]);

xhr.send(data);

vendor

prefix!

Upload Progress

xhr.upload.onprogress = function(event) { var percentage = event.loaded/event.total * 100; updateProgress(percentage);};

xhr.send(data);

XMLHttpRequest Level 2Monitor the time to upload

vendor

prefix!

XHR Timeouts

var xhr = new XMLHttpRequest();xhr.open(“get”, “/data”, true);

xhr.timeout = 5000;xhr.ontimeout = function() { console.log(“Request timed out.”);};

// other event handlers

xhr.send(data);

XMLHttpRequest Level 2Used to stop a request after a period of time

vendor

prefix!

XHR Response TypesXMLHttpRequest Level 2Retrieve a particular type of object – not just text!

xhr.onload = function() { var text = xhr.responseText; doSomethingWith(text);};

xhr.send();

vendor

prefix!

xhr.onload = function() { var xmldoc = xhr.responseXML; doSomethingWith(xmldoc);};

xhr.send();

vendor

prefix!

xhr.responseType = "text";

xhr.onload = function() { var text = xhr.response; doSomethingWith(text);};

xhr.send();

vendor

prefix!

xhr.responseType = "document";

xhr.onload = function() { var xmldoc = xhr.response; doSomethingWith(xmldoc);};

xhr.send();

vendor

prefix!

xhr.responseType = "blob";

xhr.onload = function() { var blob = xhr.response; doSomethingWith(blob);};

xhr.send();

Great for downloading

images!

vendor

prefix!

xhr.responseType = "arraybuffer";

xhr.onload = function() { var binData = new Uint16Array(xhr.response); doSomethingWith(binData);};

xhr.send();

Great for downloading binary data!

vendor

prefix!

xhr.responseType = "json";

xhr.onload = function() { var json = xhr.response; doSomethingWith(json);};

xhr.send();

Future

CSS in JavaScript

matchesSelector()

if (element.matchesSelector(“#foo”)) { //do something}

if (element.matchesSelector(“body .bar”)) { //do something}

Selector API Level 2Determines if the element matches a certain CSS selector

matchesSelector()

element.mozMatchesSelector()

element.webkitMatchesSelector()

element.msMatchesSelector()

element.oMatchesSelector()

matches ()

if (element.matches(“#foo”)) { //do something}

if (element.matches(“.bar”, element.parentNode)) { //do something}

Future

getBoundingClientRect()CSS Object Model ViewsDetermines size and location of an element in the viewport

Hello!

var rect = element.getBoundingClientRect();

// all measurements in pixels relative to viewportconsole.log(rect.left);console.log(rect.top);console.log(rect.right); // relative to left console.log(rect.bottom); // relative to top

console.log(rect.width);console.log(rect.height);

vendor

prefix!

var rect = element.getBoundingClientRect();

// all measurements in pixels relative to viewportconsole.log(rect.left);console.log(rect.top);console.log(rect.right); // relative to left console.log(rect.bottom); // relative to top

console.log(rect.width);console.log(rect.height);

IE < 8 adds 2 to each coordinate – you must

subtract it

elementFromPoint()

var element = document.elementFromPoint(x, y);

CSS Object Model ViewsReturn the element at a position relative to viewport

Think clientX and clientY

vendor

prefix!

Element at that point with highest

z-index

elementFromPoint()

var element = document.elementFromPoint(x, y);

CSS Object Model ViewsReturn the element at a position relative to viewport

Think clientX and clientY

vendor

prefix!

Element at that point with highest

z-index

matchMedia()

var mql = window.matchMedia(“(max-width:600px)”);

if (mql.matches) { //do something}

mql.addListener(function(mql) {

console.log(mql.media + “ “ + (mql.matches ? “matches” : “doesn’t match”);

CSS Object Model ViewsAllows JavaScript to interact with CSS media queries

vendor

prefix!

Review

What We Talked About• Element Traversal API• element.children• element.contains()• element.insertAdjacentHTML()• element.outerHTML• document.activeElement• document.implementation.createHTMLDocument()• element.setSelectionRange()• element.selectionStart• element.selectionEnd

What We Talked About• FormData• Upload Progress• XHR Timeouts• XHR Response Types• element.matchesSelector()• element.getBoundingClientRect()• document.elementFromPoint()• window.matchMedia()

The End

EtceteraMy blog: nczonline.netTwitter: @slicknetThese Slides: slideshare.net/nzakas

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

Documents