DOM Collections, Lists, & Maps in HTML5

Mike Taylor, Opera Software

HTML5

DOM Core

Explosion!

Outline

  1. Collections
    • NodeList
    • HTMLCollection
  2. Lists
    • DOMTokenList
    • DOMSettableTokenList
  3. Maps
    • DOMStringMap

Collections

Hammer guy

Collections

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.

Collections: NodeLists

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

NodeLists: examples

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

NodeLists: examples

        document.getElementsByClassName
        element.getElementsByClassName
        document.querySelectorAll*
        element.querySelectorAll*
*static NodeList

Collections: HTMLCollections

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

HTMLAllCollection, HTMLFormControlsCollection, HTMLOptionsCollection, HTMLPropertiesCollection

HTMLCollections: examples

        document.anchors
        document.applets
        document.forms
        document.images
        document.links
      
        formElement.elements
        selectElement.options
        tableElement.rows
        tableElement.tBodies
        tableRowElement.cells
      

HTMLCollections: examples

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

*obsolete but awesome

HTMLPropertiesCollection

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

Microdata and the Microdata DOM API, spec, demo

Lists

Guy working on a drill press

Lists

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

DOMTokenList

        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);
        };
      

DOMTokenList: classList

        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);
        };
      
*View Source. Go crazy.

Maps

The DOM is a mess

DOMStringMap

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

DOMStringMap

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

dataset demo

Thank You

Mike Taylor, Opera Software