The document discusses several JavaScript APIs related to manipulating the DOM and CSS, including some newer APIs that the reader may be unfamiliar with. It describes APIs such as insertAdjacentHTML() and outerHTML for inserting and retrieving HTML, children and firstElementChild/lastElementChild for traversing element nodes, and matches() and getBoundingClientRect() for working with CSS selectors and elements' positions. The document provides examples and explanations of many DOM and CSS-related JavaScript APIs beyond the traditional ones.
7. <ul id=“mylist”>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
UL
#text LI #text LI #text LI #text
8. <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
children
DOM4
HTMLCollection of all child nodes that are elements
9. <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”
children
DOM4
HTMLCollection of all child nodes that are elements
10. <ul id=“mylist”>
<!-- comment -->
<li>Item 1</li>
<li>Item 1</li> IE 6-8 includes
<li>Item 1</li> comments in the
</ul> children collection
var list = document.getElementById(“mylist”),
node1 = list.childNodes[0],
child1 = list.children[0];
console.log(node1.nodeName); //”#text”
console.log(child1.nodeName); //”#comment”
children BUG!
DOM4
HTMLCollection of all child nodes that are elements
11. UL
firstChild lastChild
#text LI #text LI #text LI #text
Element Traversal API
Defines new properties for accessing element children
12. 9
UL
firstElementChild lastElementChild
#text LI #text LI #text LI #text
Element Traversal API
Defines new properties for accessing element children
13. 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”
firstElementChild
Element Traversal API & DOM4
Point to first child node that is an element
14. 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”
lastElementChild
Element Traversal API & DOM4
Point to last child node that is an element
15. 9
nextSibling
LI #text LI
Element Traversal API
Defines new properties for accessing element children
16. 9
LI #text LI
nextElementSibling
Element Traversal API
Defines new properties for accessing element children
17. 9
previousSibling
LI #text LI
Element Traversal API
Defines new properties for accessing element children
18. 9
LI #text LI
previousElementSibling
Element Traversal API
Defines new properties for accessing element children
19. 9
// iterate over element children
var child = element.firstElementChild;
while(child) {
process(child);
child = child.nextElementSibling;
}
Element Traversal API
Defines new properties for accessing element children
20. 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
21. “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
22. <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");
insertAdjacentHTML()
HTML5
Insert an HTML string into the DOM at a specific place
23. <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>");
insertAdjacentHTML()
HTML5
Insert an HTML string into the DOM at a specific place
24. <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>");
insertAdjacentHTML()
HTML5
Insert an HTML string into the DOM at a specific place
25. <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>");
insertAdjacentHTML()
HTML5
Insert an HTML string into the DOM at a specific place
26. <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>");
insertAdjacentHTML()
HTML5
Insert an HTML string into the DOM at a specific place
29. <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;
outerHTML
HTML5
Get/set HTML for an entire element
30. <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
Get/set HTML for an entire element
32. 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!”
createHTMLDocument()
DOM Level 2
Create an invisible document
33. 9
function isSafeHTML(html) {
var doc =
document.implementation.createHTMLDocument(“Test”);
doc.body.innerHTML = html;
return !doc.querySelector(“script,style,link,object”);
}
createHTMLDocument()
DOM Level 2
Create an invisible document
34. 9
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;
}
createHTMLDocument()
DOM Level 2
Create an invisible document
35. 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
36. 9
// put caret at start
textbox.setSelectionRange(0, 0);
// put caret at end
textbox.setSelectionRange(
textbox.value.length,
textbox.value.length);
setSelectionRange()
HTML5
Select specific parts of textbox content
37. 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
selectionStart/selectionEnd
HTML5
Set/get the start and ending range of selection
38. <input value="data" id="data-field">
var textbox = document.getElementById("data-field");
textbox.focus();
var focused = document.activeElement;
console.log(focused === textbox); // true
activeElement
HTML5
Returns the element that currently has focus
40. 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
41. 3 10
var data = new FormData(document.forms[0]);
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
42. 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]);
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
43. 3 10
var xhr = new XMLHttpRequest();
xhr.open(“post”, “/submit”, true);
xhr.upload.onprogress = function(event) {
var percentage = event.loaded/event.total * 100;
updateProgress(percentage);
};
xhr.send(data);
Upload Progress
XMLHttpRequest Level 2
Monitor the time to upload
44. 3 9
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);
XHR Timeouts
XMLHttpRequest Level 2
Used to stop a request after a period of time
45. var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
xhr.onload = function() {
var text = xhr.responseText;
doSomethingWith(text);
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
46. var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
xhr.onload = function() {
var xmldoc = xhr.responseXML;
doSomethingWith(xmldoc);
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
47. 3 10
var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
xhr.responseType = "text";
xhr.onload = function() {
var text = xhr.response;
doSomethingWith(text);
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
48. 3 10
var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
xhr.responseType = "document";
xhr.onload = function() {
var xmldoc = xhr.response;
doSomethingWith(xmldoc);
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
49. 3 10
var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
xhr.responseType = "blob";
xhr.onload = function() { Great for
var blob = xhr.response; downloading
doSomethingWith(blob); images!
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
50. 3 10
var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
Great for
downloading
xhr.responseType = "arraybuffer";
binary data!
xhr.onload = function() {
var binData = new Uint16Array(xhr.response);
doSomethingWith(binData);
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
51. var xhr = new XMLHttpRequest();
xhr.open(“get”, “/data”, true);
xhr.responseType = "json";
xhr.onload = function() {
var json = xhr.response;
doSomethingWith(json);
};
// other event handlers
xhr.send();
XHR Response Types
XMLHttpRequest Level 2
Retrieve a particular type of object – not just text!
53. 3 9
var element = document.getElementById(“foo”);
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
54. element.mozMatchesSelector()
element.webkitMatchesSelector()
element.msMatchesSelector()
element.oMatchesSelector()
matchesSelector()
Selector API Level 2
Determines if the element matches a certain CSS selector
55.
56. var element = document.getElementById(“foo”);
if (element.matches(“#foo”)) {
//do something
}
if (element.matches(“.bar”, element.parentNode)) {
//do something
}
matches ()
Selector API Level 2
Determines if the element matches a certain CSS selector
58. 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()
CSS Object Model Views
Determines size and location of an element in the viewport
59. 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!
CSS Object Model Views
Determines size and location of an element in the viewport
60. Think clientX and
clientY
var element = document.elementFromPoint(x, y);
Element at that
point with highest
z-index
elementFromPoint()
CSS Object Model Views
Return the element at a position relative to viewport
61. Think clientX and
clientY
var element = document.elementFromPoint(x, y);
Element at that
point with highest
z-index
elementFromPoint()
CSS Object Model Views
Return the element at a position relative to viewport
62. 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()
CSS Object Model Views
Allows JavaScript to interact with CSS media queries