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

flickr.com/photos/vbillings/172124448
/

<ul id=“mylist”>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>

UL

#text LI #text LI #text LI #text

<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

children
DOM4
HTMLCollection of all child nodes that are elements

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

children
DOM4

<li>Item 1</li>
<li>Item 1</li> IE 6-8 includes
<li>Item 1</li> comments in the
</ul> children collection

node1 = list.childNodes[0],
child1 = list.children[0];

console.log(child1.nodeName); //”#comment”

children BUG!
DOM4

UL

firstChild lastChild


Element Traversal API
Defines new properties for accessing element children

9

UL

firstElementChild lastElementChild



9

<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>

node1 = list.firstChild,
child1 = list.firstElementChild;


firstElementChild
Element Traversal API & DOM4
Point to first child node that is an element

9

<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>

node1= list.lastChild,
child= list.lastElementChild;


lastElementChild
Element Traversal API & DOM4
Point to last child node that is an element

9

nextSibling

LI #text LI


9

LI #text LI

nextElementSibling


9

previousSibling

LI #text LI


9

LI #text LI

previousElementSibling


9

// iterate over element children
var child = element.firstElementChild;

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


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
}

contains()
DOM4
Determines if a given element is an ancestor of another

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

element.insertAdjacentHTML(location, html);

Any valid HTML
string

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

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

HTML5

<nav>
<h2>Site Menu</h2>
<p>Hello world!</p>
<ul id="menu">
</ul>
</nav>

menu.insertAdjacentHTML("beforebegin",
"<p>Hello world!</p>");

HTML5

<nav>
<h2>Site Menu</h2>
<ul id="menu">
<li>Hello world!</li>
</ul>
</nav>

menu.insertAdjacentHTML(“afterbegin",
"<li>Hello world!</li>");

HTML5

<nav>
<h2>Site Menu</h2>
<ul id="menu">
<li>Hello world!</li>
</ul>
</nav>

menu.insertAdjacentHTML(“beforeend",
"<li>Hello world!</li>");

HTML5

<nav>
<h2>Site Menu</h2>
<ul id="menu">
</ul>
<p>Hello world!</p>
</nav>

menu.insertAdjacentHTML(“afterend",
"<p>Hello world!</p>");

HTML5

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

In many cases,
faster than
innerHTML!

HTML5

element.outerHTML = html;

Any valid HTML
string

outerHTML
HTML5
Get/set HTML for an entire element

<nav>
<h2>Site Menu</h2>
<ul id="menu">
</ul>
</nav>

var html = menu.outerHTML;

outerHTML
HTML5

<nav>
<h2>Site Menu</h2>
<p>Hello world!</p>
</nav>

var menu = document.getElementById("menu"); Detached
menu.outerHTML = "<p>Hello world!</p>"; reference to
<ul>
console.log(menu.tagName); // “UL”
console.log(menu.parentNode); // null

outerHTML
HTML5

9

document.implementation.createHTMLDocument(title);

Title of the
document

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

DOM Level 2

9

function isSafeHTML(html) {
var doc =

doc.body.innerHTML = html;

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

DOM Level 2

9
function sanitizeHTML(html) {
var doc =

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

DOM Level 2

9

<input value="data" id="data-field">

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

textbox.select();

textbox.setSelectionRange(1, 3);

setSelectionRange()
HTML5
Select specific parts of textbox content

9

// put caret at start

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

setSelectionRange()
HTML5
Select specific parts of textbox content

9


textbox.focus();

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

selectionStart/selectionEnd
HTML5
Set/get the start and ending range of selection


textbox.focus();

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

activeElement
HTML5
Returns the element that currently has focus

3 10

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

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

3 10

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



xhr.send(data);

FormData

3 10

<input type="file" id="photo" name="photo">

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

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



xhr.send(data);

FormData

3 10


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

xhr.send(data);

Upload Progress
Monitor the time to upload

3 9

xhr.open(“get”, “/data”, true);

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

// other event handlers

xhr.send(data);

XHR Timeouts
Used to stop a request after a period of time


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


xhr.send();

XHR Response Types
Retrieve a particular type of object – not just text!


var xmldoc = xhr.responseXML;
doSomethingWith(xmldoc);
};


xhr.send();

XHR Response Types

3 10


xhr.responseType = "text";

var text = xhr.response;
doSomethingWith(text);
};


xhr.send();

XHR Response Types

3 10


xhr.responseType = "document";

var xmldoc = xhr.response;
doSomethingWith(xmldoc);
};


xhr.send();

XHR Response Types

3 10


xhr.responseType = "blob";

xhr.onload = function() { Great for
var blob = xhr.response; downloading
doSomethingWith(blob); images!
};


xhr.send();

XHR Response Types

3 10

Great for
downloading
xhr.responseType = "arraybuffer";
binary data!
var binData = new Uint16Array(xhr.response);
doSomethingWith(binData);
};


xhr.send();

XHR Response Types


xhr.responseType = "json";

var json = xhr.response;
doSomethingWith(json);
};


xhr.send();

XHR Response Types

3 9


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

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

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

element.mozMatchesSelector()

element.webkitMatchesSelector()

element.msMatchesSelector()

element.oMatchesSelector()

matchesSelector()


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

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

matches ()

Hello!

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

var rect = element.getBoundingClientRect();

// all measurements in pixels relative to viewport
console.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);

getBoundingClientRect()

var rect = element.getBoundingClientRect();

// all measurements in pixels relative 8 adds 2 to each
IE < to viewport
console.log(rect.left); coordinate – you must
console.log(rect.top); subtract it
console.log(rect.right); // relative to left
console.log(rect.bottom); // relative to top

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

getBoundingClientRect() BUG!

Think clientX and
clientY

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

Element at that
point with highest
z-index

elementFromPoint()
Return the element at a position relative to viewport

10

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

});

matchMedia()
Allows JavaScript to interact with CSS media queries

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

Etcetera

My blog: nczonline.net
Twitter: @slicknet
These Slides: slideshare.net/nzakas

JavaScript APIs you’ve never heard of (and some you have)

JavaScript APIs you’ve never heard of (and some you have)

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to JavaScript APIs you’ve never heard of (and some you have)

Similar to JavaScript APIs you’ve never heard of (and some you have)(20)

More from Nicholas Zakas

More from Nicholas Zakas(17)

JavaScript APIs you’ve never heard of (and some you have)