Перебирая дом, получая из щелкающего элемента с идентификатором и классом

Question

Я нашел отличную информацию о том, как обходить DOM, получая узел из элемента, по которому щелкнули ...

Обход DOM, получая узел из элемента, по которому щелкнули *

Кто может помочь мне включить в хлебную крошку атрибуты id = и class =, которые вы видите в большинстве плагинов?

, поэтому вместо:

HTML  > BODY  > UL  > LI  > SPAN

Я хотел бы:

HTML  > BODY  > UL.menu  > LI  > SPAN#whatever

... или что-то подобное.

Answer 1

При добавлении к связанному коду приведенный ниже код добавит все идентификаторы и классы элемента.

При щелчке по элементу <div id="id1" class="class1 class2">Test</div> ...

будетвывод HTML> ТЕЛО> DIV # id1.class1.class2

function clickHandler(event) {
    var target = event.target,
    breadcrumb = [];

    while (target) {
        var id = target.id;
        var classes = target.className;
        var crumb = target.tagName;
        if (id) { 
            crumb += "#" + id; 
        }
        if (classes) {
            var classList = classes.split(' ');
            for (var c = 0; c < classList.length; c++) {
                crumb += "." + classList[c];
            }
        }
        breadcrumb.unshift(crumb);
        target = target.parentElement;
    }
    console.log(breadcrumb.join(" > "));
}

document.addEventListener('click', clickHandler, false);