JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<link rel="stylesheet" href="http://unstoppablecarl.com/rl/css/icons.css">
<div id="test">
    <span>
        <p></p>
        <p id="t1"></p>
    </span>
</div>

JavaScript

var selectorProperties = [
    {
        property: 'id',
        prefix:"#",
        multiple: false
    },
    {
        property: 'className',
        prefix:".",
        multiple: true
    },
    {
        property: 'tagName',
        prefix:"",
        multiple: false
    }
];

function getSingleProperty (property, prefix, elem) {
    if (property in elem) {
        return prefix + elem[property];
    }
}

function getMultiProperty (property, prefix, elem) {
    if (property in elem) {
        return elem[property].split(' ').map(function (prop){ return prefix + prop; });
    }
}

var selectorPropertySnatchers = selectorProperties.map(function(propInfo){
    if (propInfo.multiple) {
        return getMultiProperty.bind(null, propInfo.property, propInfo.prefix);
    } else {
        return getSingleProperty.bind(null, propInfo.property, propInfo.prefix);
    }
});

function getSelectorOptions (targetArray, snatcher) {
    var temp = snatcher(this);
   
    if (temp) return targetArray.concat(temp);
    return targetArray;
}

function trimPath(path) {
    var i = path.length;
    while (--i && path[i].id === "");
    return path.slice(i);
}

function getPath(element) {
    var path = [];
    while(path.unshift(element) && element.parentNode) element = element.parentNode;
    return path;
}

function getMinimalSelector(element) {
    var path = trimPath(getPath(element));
    return path;
}

console.log(getMinimalSelector(document.querySelector('#test p')))