1. Collections
2. DOM Elements
3. Synthetic & Custom Events
4. Other stuff we won't have time for

A collection is an object that represents a lists of DOM nodes. A collection can be either live or static. Unless otherwise stated, a collection must be live.

        interface NodeList {
          getter Node? item(unsigned long index);
          readonly attribute unsigned long length;
        };
      

        Node.childNodes
        document.getElementsByName
        document.getElementsByTagName
        document.getElementsByTagNameNS
        document.links
        document.getElementsByName
      

        document.getElementsByClassName
        element.getElementsByClassName
        document.querySelectorAll*
        element.querySelectorAll*

        *static NodeList
      

        interface HTMLCollection {
          readonly attribute unsigned long length;
          getter Element? item(unsigned long index);
          getter object? namedItem(DOMString name);
        };
      

HTMLAllCollection, HTMLFormControlsCollection, HTMLOptionsCollection, HTMLPropertiesCollection

        document.anchors
        document.applets
        document.forms
        document.images
        document.links
      

        formElement.elements
        selectElement.options
        tableElement.rows
        tableElement.tBodies
        tableRowElement.cells
      

        document.embeds
        document.plugins
        document.scripts
        document.all*

        
*obsolete but awesome
      

        var item = document.getItems("http://itemtype/URL")[0]
        item.properties.foo
        item.getValues()
      

Microdata and the Microdata DOM API, spec, demo

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

        <p id="#">Eeny  
        <p id="⌘⌥">Meeny 
        <p id="♥">Miny  
        <p id="©">Moe 
        <p id="{}">Catch
        <p id="“‘’”">A
        <p id="༼༭ຶཬ༤ຶ༽">Tiger
        <p id="¯\_(ツ)_/¯">#YOLO
      

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

The DOMTokenList interface represents an interface to an underlying string that consists of a set of space-separated tokens.

        interface DOMTokenList {
          readonly attribute unsigned long length;
          getter DOMString? item(unsigned long index);
          boolean contains(DOMString token);
          void add(DOMString... tokens);
          void remove(DOMString... tokens);
          boolean toggle(DOMString token);
        };
      

        Element.classList.length
        Element.classList.item(index)
        Element.classList.contains()
        Element.classList.add()
        Element.classList.remove()
        Element.classList.toggle()
      

Returns a DOMStringMap object for the element's data-* attributes.

Hyphenated names become camel-cased.
For example, data-foo-bar="" becomes element.dataset.fooBar.

The DOMStringMap interface represents a set of name-value pairs.

        interface DOMStringMap {
          getter DOMString (DOMString name);
          setter void (DOMString name, DOMString value);
          creator void (DOMString name, DOMString value);
          deleter void (DOMString name);
        };
      

        <button data-text="Web Workers">W</button>
        function showText(element){
          someDiv.textContent = element.dataset.text;
        }
      

All HTML elements may have the hidden content attribute set. The hidden attribute is a boolean attribute. When specified on an element, it indicates that the element is not yet, or is no longer, relevant. User agents should not render elements that have the hidden attribute specified.

If you want to hide content from all users, use the HTML5 hidden attribute (along with CSS display:none for browsers that do not yet support hidden) There is no need to use aria-hidden. (link)

        <img hidden src="super-offensive.jpg alt="[redacted]">
      

ParentNode

        Element.prepend()
        Element.append()
      

ChildNode

        Element.before()
        Element.after()
        Element.replace()
        Element.remove()
      

        var evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window,
                           0, 0, 0, 0, 0, false, false,
                           false, true, 0, null);
        target.dispatchEvent(evt)
      

What does true for the 13th argument mean?

        var evt = new MouseEvent({metakey: true})
        target.dispatchEvent(evt)
      

        function makeTaco(e) {
          tacoFactory.createSingletonTacoInstance(e.detail)
        }
        tacoObserver.addEventListener("taco", makeTaco)
        var f = new CustomEvent("taco", {detail: {crunchy: true}})
        tacoObserver.dispatchEvent(f)