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)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

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

Más de Nicholas Zakas

Más de Nicholas Zakas (17)

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