ある要素からHTMLパンくずリストを取得

ある要素からHTMLパンくずリストを取得するには、次のような方法で可能です。

関数定義

var getHtmlBreadcrumbs = function(element, returnArray) {
	if (!element) return;

	var parentElement  = element,
	    selectors      = [],
	    selector       = '',
	    returnSelector = '';

	var createSelectorString = function(element) {
		var selectorStr = element.tagName.toLowerCase();

		if (parentElement.id) {
			selectorStr += '#' + parentElement.id;
		}

		if (parentElement.className) {
			selectorStr += '.' + parentElement.className.replace(/ /g, '.');
		}

		return selectorStr;
	};

	selector = createSelectorString(parentElement);
	selectors.push(selector);

	while (parentElement.tagName.toLowerCase() !== 'html') {
		parentElement = parentElement.parentNode;
		selector      = createSelectorString(parentElement);

		selectors.push(selector);
	}

	selectors.reverse();

	if (typeof returnArray === 'boolean' && returnArray === true) {
		returnSelector = selectors;
	} else {
		returnSelector = selectors.join(' > ');
	}

	return returnSelector;
};

使い方

第一引数（必須）に要素を指定します。
戻り値はHTML階層の文字列を返します。
なお、第二引数は省略可能で、戻り値を配列で返すかどうかを指定します。

var result = getHtmlBreadcrumbs(element[, returnArray]);

引数

戻り値

第二引数の指定でtrueの場合は配列、それ以外は文字列で返します。

var sampleElem         = document.getElementById('sample'),
    htmlBreadcrumbsStr = getHtmlBreadcrumbs(sampleElem);

alert(htmlBreadcrumbsStr);