HTML Console Tree (+CSS Selector)

// Usage: tree(HTML_DOM);

function tree(e) {
    if (!e) return
    let className = "." + [...e.classList].join('.')
    if (className == ".") {
        className = "";
    }
    let id = "#" + e.id;
    if (id == "#") {
        id = "";
    }
    let attrNames = e.getAttributeNames().filter(function (name) {
        return !(name == "id" || name == "class");
    });
    let attrValue = new Array(attrNames.length).fill().map(function (a,b) {
        return e.getAttribute(attrNames[b])
    });
    let attr = new Array(attrNames.length).fill().map(function (a,b) {
        if (attrValue[b] == "") {
            return '[' + attrNames[b] + ']';
        } else {
            return '[' + attrNames[b] + '="' + attrValue[b] + '"]';
        }
    }).join("");
    if (e.hasChildNodes()) {
        if (e.tagName.toLowerCase() == "script") {
            console.groupCollapsed(e.tagName.toLowerCase() + className + id + attr);
            console.log(e.innerHTML);
        } else {
            console.group(e.tagName.toLowerCase() + className + id + attr);
            for (let i = 0; i < e.children.length; i++) {
                tree(e.children[i]);
            }
        }
        console.groupEnd();
    } else {
        if (e.innerHTML == "") {
            console.log(e.outerHTML);
        } else {
            console.groupCollapsed(e.tagName.toLowerCase() + className + id + attr);
            console.log(e.innerHTML);
            console.groupEnd();
        }
    }
}