DOM Traversal Media Gallery

DOM Traversal is an easy way to iterate through a simple list of only the things you care about. It powers this media gallery. Try it out!
Show All Show Videos Show Audio Show Images Filter by Keywords 'flight' or 'space'

You just ran the following NodeFilter:

function audioFilter(node)
{
   if (node.getAttribute('mediatype') == "audio")
      return NodeFilter.FILTER_ACCEPT;
   else
      return NodeFilter.FILTER_REJECT;
}

By calling, e.g., nextNode() and previousNode(), you'll now only get the elements that map to <audio> elements in your library.

You just ran the following NodeFilter:

function videoFilter(node)
{
   if (node.getAttribute('mediatype') == "video")
      return NodeFilter.FILTER_ACCEPT;
   else
      return NodeFilter.FILTER_REJECT;
}

By calling, e.g., nextNode() and previousNode(), you'll now only get the elements that map to <video> elements in your library.

You just ran the following NodeFilter:

function imageFilter(node)
{
   if (node.getAttribute('mediatype') == "img")
      return NodeFilter.FILTER_ACCEPT;
   else
      return NodeFilter.FILTER_REJECT;
}

By calling, e.g., nextNode() and previousNode(), you'll now only get the elements that map to <img> elements in your library.

You just ran the following NodeFilter:

function keywordFilter(node)
{
   var altStr = node.getAttribute('alt').toLowerCase();
   
   if (altStr.indexOf("flight") != -1 || altStr.indexOf("space") != -1)
      return NodeFilter.FILTER_ACCEPT;
   else
      return NodeFilter.FILTER_REJECT;				
}

By calling, e.g., nextNode() and previousNode(), you'll now only get the elements that have an 'alt' attribute that matches what you're looking for.

The DOM Traversal specification defines two new ways of traversing a document -- TreeWalker (when you care about tree structure) and NodeIterator (when you just want a flat list of nodes).

This demo uses Traversal in two ways:

These APIs take the difficult task of picking arbitrary elements from the tree and make it as simple as writing a callback and iterating forward or backward through a list -- a list that's as flat as you want it to be.