Question

我想要的是检测用户点击哪些元素并将选择器查询发送到服务器
我不想使用任何库，只想通过javascript本身做这个，我的代码听document.onclick我可以得到event.target并实时做一些事情，但我想存储这个元素服务器中的选择器查询以供将来使用

document.onclick = function (event) {
    var target = event.target;
    var selector ; // 
}

如何获得event.target唯一选择器？并在document.querySelector中使用此选择器并访问元素

Answer 1

我在没有Jquery的Javascript中构建了一个函数，它为DOM中的任何元素创建了一个唯一的标识符。如果它有id，则使用id。否则，它会根据该元素的父元素创建一个路径：

function getSelector(node) {
    var id = node.getAttribute('id');

    if (id) {
        return '#'+id;
    }

    var path = '';

    while (node) {
        var name = node.localName;
        var parent = node.parentNode;

        if (!parent) {
            path = name + ' > ' + path;
            continue;
        }

        if (node.getAttribute('id')) {
            path = '#' + node.getAttribute('id') + ' > ' + path;
            break;
        }

        var sameTagSiblings = [];
        var children = parent.childNodes;
        children = Array.prototype.slice.call(children);

        children.forEach(function(child) {
            if (child.localName == name) {
                sameTagSiblings.push(child);
            }
        });

        // if there are more than one children of that type use nth-of-type

        if (sameTagSiblings.length > 1) {
            var index = sameTagSiblings.indexOf(node);
            name += ':nth-of-type(' + (index + 1) + ')';
        }

        if (path) {
            path = name + ' > ' + path;
        } else {
            path = name;
        }

        node = parent;
    }

    return path;
}

因此，如果您想要点击一个元素并获得唯一的选择器，只需添加：

window.addEventListener('click', function(event) {
    var ele = document.elementFromPoint(event.x, event.y);
    alert(getSelector(ele));
});

Answer 2

我想你的意思是一个CSS选择器。如果是这样，可以通过多种方法进行选择。如果它有一个id，你只需从元素中获取id：

var selector = "#" + target.id;

javascript找到元素的选择器

2 个答案: