Dataset

    // get data attribute 'propertyName'
    el.dataset.propertyName
    // set data attribute
    el.dataset.propertyName = 'some value';

ClassList

    var myDiv = document.querySelector('#logo');
    myDiv.classList.add('myCssClass');
    myDiv.classList.remove('myCssClass');
    myDiv.classList.toggle('myCssClass');
    myDiv.classList.contains('myCssClass');

Handy DOM apis

    // show 
    el.style.display = '';
    // hide
    el.style.display = 'none';
    // append
    el.insertAdjacentHTML('beforeend', htmlString);
    // prepend
    el.insertAdjacentHTML('afterbegin', htmlString);
    // after
    el.insertAdjacentHTML('afterend', htmlString);
    // before
    el.insertAdjacentHTML('beforebegin', htmlString);
    // append
    parent.appendChild(el);
    // clone
    el.cloneNode(true);
    // children
    el.children;
    // contains
    el.contains(child); // true or false
    // set/get attribute
    el.getAttribute('id');
    el.setAttribute('id', 'container');
    // get style 
    getComputedStyle(el)[cssRuleName];
    // parent
    el.parentNode

xhr2

xhr2 isn’t HTML5, it’s part of the incremental improvements browser vendors are making to the core platform.

    // Fetching a file as a binary blob
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost/image.jpg");
    xhr.responseType = "blob";
    xhr.onload = function response(e) {
       var urlCreator = window.URL || window.webkitURL;
       // Note: .response instead of .responseText
       var imageUrl = urlCreator.createObjectURL(this.response);
       
       document.querySelector("#image").src = imageUrl;
    };
    xhr.send();
    var form = document.querySelector('#myform');
    var formData = new FormData(form);
    formData.append('username', 'johndoe');
    formData.append('id', 123456);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/server', true);
    xhr.onload = function(e) {
        // do something with response 
    };

    xhr.send(formData);
    var uploadedFiles = document.querySelector('input[type="file"]').files;
    var formData = new FormData();

    for (var i = 0; i < uploadedFiles.length; i++) {
        formData.append(uploadedFiles[i].name, uploadedFiles[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'my/url/', true);
    xhr.onload = function(e) {
        // do something with response
    };

    xhr.send(formData); // multipart/form-data

Cross Origin Resource Sharing (CORS)

Normally if you tried to make an AJAX call from one domain to another, the request would fail and the browser would throw an origin mismatch error. With CORS, a domain can choose to allow requests from another domain by simply adding a header.

  • Allow one website: Access-Control-Allow-Origin: http://example.com
  • Allow everyone: Access-Control-Allow-Origin: *

Document fragment

DOM injections and modifications are taxing, so the fewer the interactions the better. Using DocumentFragments is faster than repeated single DOM node injection and allows developers to perform DOM node operations (like adding events) on new elements instead of mass-injection via innerHTML.

Example: fetching an HTML document using xhr2

    var xhr = new XMLHttpRequest();
    
    xhr.open('GET', 'http://www.html5rocks.com/en/tutorials/', true);
    xhr.responseType = 'document';
    
    xhr.onload = function(e) {
      var doc = e.target.response;

      var container = document.querySelector('ol');
      container.innerHTML = ''; // clear out.

      var articles = doc.querySelectorAll('.articles-list li');

      // provides you a temorary root node on which you can hang your little nodes
      var frag = document.createDocumentFragment();

      [].forEach.call(articles, function(art, i) {

        var title = art.querySelector('.title');
        var summary = art.querySelector('.description');
        var date = art.querySelector('.date');
        var li = document.createElement('li');

        li.appendChild(title);
        li.appendChild(date);
        li.appendChild(summary);
        frag.appendChild(li);
      });

      container.appendChild(frag);
    };

    xhr.send();

References