Chrome inspector-like DOM ancestor printer.

ancestors.js

/* Output is: div#a > span.red > ul#c.xyz.123.hello.goodbye */
/* Can skip lower dom elements and truncate the class name list on each element */

/* Mock Duck */
var doc = {};
var a = {nodeName: "DIV",  id: "a", className: ""};
var b = {nodeName: "SPAN", id: "",  className: "red"};
var c = {nodeName: "UL",   id: "c", className: "   xyz 123 hello goodbye"};

c.parentNode = b;
b.parentNode = a;
a.parentNode = doc;

/* Parent Printer */

var info = function(element, options)
{
    options.class_limit = options.class_limit || 5;

    var formatted = element.nodeName.toLowerCase();
    
    if(element.id.length > 0)
    {
        formatted = formatted + "#" + element.id;
    }
    
    if(element.className.length > 0)
    {
        /* Clean up white space */
        var classList = element.className.split(" ").filter(function(name) { return name.length > 0 });
        var classLimited = classList.slice(0, options.class_limit)
        var classCleaned = classLimited.map(function(name) { return "."+name;})
        formatted = formatted + classCleaned.join("");
    }
    return formatted;
};


var parents = function(node, options)
{
    var currentNode = node;
    var parents = [];
    
    while (currentNode.parentNode)
    {
         parents.push(info(currentNode, options));
         currentNode = currentNode.parentNode;
    }
    return parents;
};


var ancestors_print = function(node, options)
{
    var options = typeof options !== 'undefined' ?  options : {};
    options.start_level = options.start_level || 0;
    console.log(parents(node, options).reverse().slice(options.start_level).join(" > "));
};

/* Test it */
ancestors_print(c, {start_level: 1, class_limit:3});
ancestors_print(c);