Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript APIs You’ve
    Never Heard Of
 (And some you have)

                Nicholas C. Zakas
                        ...
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




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


  var list = document.getElement...
<ul id=“mylist”>
     <li>Item 1</li>
     <li>Item 1</li>
     <li>Item 1</li>
  </ul>


  var list = document.getElement...
<ul id=“mylist”>
     <!-- comment -->
     <li>Item 1</li>
     <li>Item 1</li>            IE 6-8 includes
     <li>Item ...
UL

          firstChild                             lastChild




  #text      LI      #text       LI      #text       LI...
9



                                UL

  firstElementChild                              lastElementChild




  #text    ...
9

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


  var list = document.getEl...
9

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


  var list = document.getEl...
9




                 nextSibling

           LI                  #text                    LI




Element Traversal API
D...
9




           LI                  #text                    LI




                       nextElementSibling


Element T...
9




                 previousSibling

           LI                  #text                    LI




Element Traversal A...
9




           LI                  #text                    LI




                    previousElementSibling


Element ...
9

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

  while(child) {
      process(child);
   ...
var element = document.getElementById(“foo”);

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

  functi...
“beforebegin”
              “afterbegin”
              “beforeend”
               “afterend”

element.insertAdjacentHTML(l...
<nav>
    <h2>Site Menu</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</...
<nav>
    <h2>Site Menu</h2>
    <p>Hello world!</p>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li>...
<nav>
    <h2>Site Menu</h2>
    <ul id="menu">
        <li>Hello world!</li>
        <li><a href="/">Home</a></li>
      ...
<nav>
    <h2>Site Menu</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</...
<nav>
    <h2>Site Menu</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</...
http://jsperf.com/insertadjacenthtml-perf/4




                                              In many cases,
             ...
element.outerHTML = html;




                      Any valid HTML
                          string




outerHTML
HTML5
Ge...
<nav>
    <h2>Site Menu</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</...
<nav>
    <h2>Site Menu</h2>
    <p>Hello world!</p>
</nav>


var menu = document.getElementById("menu");     Detached
men...
9




document.implementation.createHTMLDocument(title);


                               Title of the
                   ...
9


var doc =
      document.implementation.createHTMLDocument(“Test”);

console.log(doc.title);        // “Test”

doc.bod...
9


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

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

    doc.body.inne...
9


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



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

textbox...
9


// put caret at start
textbox.setSelectionRange(0, 0);

// put caret at end
textbox.setSelectionRange(
    textbox.val...
9


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



var textbox = document.getElementById("data-field");
textbox.focus();
textbox....
<input value="data" id="data-field">

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

var focused =...
XMLHttpRequest Level 2
3         10

  var data = new FormData();

  data.append(“name”, “Nicholas”);
  data.append(“age”, 25);
  data.append(“no...
3         10

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

  var xhr = new XMLHttpRequest();
  xhr.open(“post”, “/submit...
3          10

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

  var data = new FormData(),
      fileControl = document.ge...
3              10

  var xhr = new XMLHttpRequest();
  xhr.open(“post”, “/submit”, true);

  xhr.upload.onprogress = funct...
3     9

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

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

  xhr.onload = function() {
      var text = xhr.respon...
var xhr = new XMLHttpRequest();
  xhr.open(“get”, “/data”, true);

  xhr.onload = function() {
      var xmldoc = xhr.resp...
3            10

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

  xhr.responseType = "text";

  xhr....
3            10

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

  xhr.responseType = "document";

  ...
3             10

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

  xhr.responseType = "blob";

  xhr...
3                  10

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

  xhr.responseType = "json";

  xhr.onload = function()...
CSS in JavaScript
3                  9

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

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

                 element.webkitMatchesSelector()

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

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

  if (element.ma...
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);
co...
var rect = element.getBoundingClientRect();

// all measurements in pixels relative 8 adds 2 to each
                     ...
Think clientX and
                           clientY


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




              ...
Think clientX and
                           clientY


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




              ...
10

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

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

mql.addListener(function(m...
Review
What We Talked About
•   Element Traversal API
•   element.children
•   element.contains()
•   element.insertAdjacentHTML(...
What We Talked About
•   FormData
•   Upload Progress
•   XHR Timeouts
•   XHR Response Types
•   element.matchesSelector(...
The End
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)
JavaScript APIs you’ve never heard of (and some you have)
Upcoming SlideShare
Loading in …5
×

of

JavaScript APIs you’ve never heard of (and some you have) Slide 1 JavaScript APIs you’ve never heard of (and some you have) Slide 2 JavaScript APIs you’ve never heard of (and some you have) Slide 3 JavaScript APIs you’ve never heard of (and some you have) Slide 4 JavaScript APIs you’ve never heard of (and some you have) Slide 5 JavaScript APIs you’ve never heard of (and some you have) Slide 6 JavaScript APIs you’ve never heard of (and some you have) Slide 7 JavaScript APIs you’ve never heard of (and some you have) Slide 8 JavaScript APIs you’ve never heard of (and some you have) Slide 9 JavaScript APIs you’ve never heard of (and some you have) Slide 10 JavaScript APIs you’ve never heard of (and some you have) Slide 11 JavaScript APIs you’ve never heard of (and some you have) Slide 12 JavaScript APIs you’ve never heard of (and some you have) Slide 13 JavaScript APIs you’ve never heard of (and some you have) Slide 14 JavaScript APIs you’ve never heard of (and some you have) Slide 15 JavaScript APIs you’ve never heard of (and some you have) Slide 16 JavaScript APIs you’ve never heard of (and some you have) Slide 17 JavaScript APIs you’ve never heard of (and some you have) Slide 18 JavaScript APIs you’ve never heard of (and some you have) Slide 19 JavaScript APIs you’ve never heard of (and some you have) Slide 20 JavaScript APIs you’ve never heard of (and some you have) Slide 21 JavaScript APIs you’ve never heard of (and some you have) Slide 22 JavaScript APIs you’ve never heard of (and some you have) Slide 23 JavaScript APIs you’ve never heard of (and some you have) Slide 24 JavaScript APIs you’ve never heard of (and some you have) Slide 25 JavaScript APIs you’ve never heard of (and some you have) Slide 26 JavaScript APIs you’ve never heard of (and some you have) Slide 27 JavaScript APIs you’ve never heard of (and some you have) Slide 28 JavaScript APIs you’ve never heard of (and some you have) Slide 29 JavaScript APIs you’ve never heard of (and some you have) Slide 30 JavaScript APIs you’ve never heard of (and some you have) Slide 31 JavaScript APIs you’ve never heard of (and some you have) Slide 32 JavaScript APIs you’ve never heard of (and some you have) Slide 33 JavaScript APIs you’ve never heard of (and some you have) Slide 34 JavaScript APIs you’ve never heard of (and some you have) Slide 35 JavaScript APIs you’ve never heard of (and some you have) Slide 36 JavaScript APIs you’ve never heard of (and some you have) Slide 37 JavaScript APIs you’ve never heard of (and some you have) Slide 38 JavaScript APIs you’ve never heard of (and some you have) Slide 39 JavaScript APIs you’ve never heard of (and some you have) Slide 40 JavaScript APIs you’ve never heard of (and some you have) Slide 41 JavaScript APIs you’ve never heard of (and some you have) Slide 42 JavaScript APIs you’ve never heard of (and some you have) Slide 43 JavaScript APIs you’ve never heard of (and some you have) Slide 44 JavaScript APIs you’ve never heard of (and some you have) Slide 45 JavaScript APIs you’ve never heard of (and some you have) Slide 46 JavaScript APIs you’ve never heard of (and some you have) Slide 47 JavaScript APIs you’ve never heard of (and some you have) Slide 48 JavaScript APIs you’ve never heard of (and some you have) Slide 49 JavaScript APIs you’ve never heard of (and some you have) Slide 50 JavaScript APIs you’ve never heard of (and some you have) Slide 51 JavaScript APIs you’ve never heard of (and some you have) Slide 52 JavaScript APIs you’ve never heard of (and some you have) Slide 53 JavaScript APIs you’ve never heard of (and some you have) Slide 54 JavaScript APIs you’ve never heard of (and some you have) Slide 55 JavaScript APIs you’ve never heard of (and some you have) Slide 56 JavaScript APIs you’ve never heard of (and some you have) Slide 57 JavaScript APIs you’ve never heard of (and some you have) Slide 58 JavaScript APIs you’ve never heard of (and some you have) Slide 59 JavaScript APIs you’ve never heard of (and some you have) Slide 60 JavaScript APIs you’ve never heard of (and some you have) Slide 61 JavaScript APIs you’ve never heard of (and some you have) Slide 62 JavaScript APIs you’ve never heard of (and some you have) Slide 63 JavaScript APIs you’ve never heard of (and some you have) Slide 64 JavaScript APIs you’ve never heard of (and some you have) Slide 65 JavaScript APIs you’ve never heard of (and some you have) Slide 66 JavaScript APIs you’ve never heard of (and some you have) Slide 67
Upcoming SlideShare
Browser Wars Episode 1: The Phantom Menace
Next
Download to read offline and view in fullscreen.

197 Likes

Share

Download to read offline

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

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. JavaScript APIs You’ve Never Heard Of (And some you have) Nicholas C. Zakas @slicknet
  2. Who’s this guy?
  3. flickr.com/photos/vbillings/172124448 /
  4. HTML5, DOM4 & …DOM Level 2!
  5. <ul id=“mylist”> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul> UL #text LI #text LI #text LI #text
  6. <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
  7. <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
  8. <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
  9. UL firstChild lastChild #text LI #text LI #text LI #text Element Traversal API Defines new properties for accessing element children
  10. 9 UL firstElementChild lastElementChild #text LI #text LI #text LI #text Element Traversal API Defines new properties for accessing element children
  11. 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
  12. 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
  13. 9 nextSibling LI #text LI Element Traversal API Defines new properties for accessing element children
  14. 9 LI #text LI nextElementSibling Element Traversal API Defines new properties for accessing element children
  15. 9 previousSibling LI #text LI Element Traversal API Defines new properties for accessing element children
  16. 9 LI #text LI previousElementSibling Element Traversal API Defines new properties for accessing element children
  17. 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
  18. 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
  19. “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
  20. <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
  21. <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
  22. <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
  23. <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
  24. <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
  25. http://jsperf.com/insertadjacenthtml-perf/4 In many cases, faster than innerHTML! insertAdjacentHTML() HTML5 Insert an HTML string into the DOM at a specific place
  26. element.outerHTML = html; Any valid HTML string outerHTML HTML5 Get/set HTML for an entire element
  27. <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
  28. <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
  29. 9 document.implementation.createHTMLDocument(title); Title of the document createHTMLDocument() DOM Level 2 Create an invisible document
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. <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
  37. XMLHttpRequest Level 2
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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!
  44. 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!
  45. 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!
  46. 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!
  47. 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!
  48. 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!
  49. 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!
  50. CSS in JavaScript
  51. 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
  52. element.mozMatchesSelector() element.webkitMatchesSelector() element.msMatchesSelector() element.oMatchesSelector() matchesSelector() Selector API Level 2 Determines if the element matches a certain CSS selector
  53. 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
  54. Hello! getBoundingClientRect() CSS Object Model Views Determines size and location of an element in the viewport
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. Review
  61. 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
  62. What We Talked About • FormData • Upload Progress • XHR Timeouts • XHR Response Types • element.matchesSelector() • element.getBoundingClientRect() • document.elementFromPoint() • window.matchMedia()
  63. The End
  64. Etcetera My blog: nczonline.net Twitter: @slicknet These Slides: slideshare.net/nzakas
  • VladimirYazykov

    May. 25, 2017
  • ConradTabor

    Jul. 25, 2016
  • ahmedmalaji

    May. 24, 2016
  • joysk

    May. 23, 2016
  • ideak

    Apr. 27, 2016
  • jyd119

    Jul. 2, 2015
  • sky_wu

    Jun. 10, 2015
  • benben3221987

    Feb. 10, 2015
  • MateBrki

    Jan. 8, 2015
  • AlexBubnoff

    Nov. 27, 2014
  • gabrielgartz

    Oct. 6, 2014
  • dav1d1uu

    Jun. 2, 2014
  • ssuser0f1d45

    May. 7, 2014
  • lylijincheng

    Nov. 9, 2013
  • Noirdes

    Oct. 26, 2013
  • alfathenus

    Oct. 21, 2013
  • nychka

    Sep. 18, 2013
  • hanksudo

    Aug. 29, 2013
  • kthink

    Jul. 30, 2013
  • alainpapazoglou

    Jul. 30, 2013

Views

Total views

66,505

On Slideshare

0

From embeds

0

Number of embeds

1,783

Actions

Downloads

651

Shares

0

Comments

0

Likes

197

×