The HTML5 Element DOM Interface

1. Element.id
2. Element.classList
3. Element.dataset
4. Element.hidden
5. Microdata (Element.*)
• .itemType, .itemId, .itemRef, .itemProp, .properties, .itemValue

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="#">Foo.  
        <p id="##">Bar. 
        <p id="♥">Baz.  
        <p id="©">Inga. 
        <p id="{}">Lorem.
        <p id="“‘’”">Ipsum.
        <p id="⌘⌥">Dolor.
      

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 token);
          void remove(DOMString token);
          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.

A mechanism for adding machine-readable annotations to documents, so that tools can extract trees of name-value pairs from the document.

        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
        document.embeds
        document.plugins
      

        formElement.elements
        selectElement.options
        tableElement.rows
        tableElement.tBodies
        tableRowElement.cells
        document.scripts
        document.all
      

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

Microdata and the Microdata DOM API, spec, demo

Mike Taylor, Opera Software

• miketaylr.com / @miketaylr
• miket@opera.com / @ODevRel

Shower!