javascript find selector of an element

Question

what i want is to detect which elements clicks by user and send those selector query to server
I don't want to use any library and want to do this only by javascript itself, my code listen document.onclick and I could get event.target and do some stuff in real time, but I want store this element selector query in server for future usage

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

how get event.target unique selector? and use this selector in document.querySelector and access to element

What do you mean by "selector query"? Can you give an example? — dee-see, Mar 19 '14 at 19:10
I think OP wants to send the clicked element to the server for storage — Huangism, Mar 19 '14 at 19:10
Element can be selected in multiple ways - by ID, by tag, by class, there's no unique "selector" for the element. — Yuriy Galanter, Mar 19 '14 at 19:12
assume user clicks on `.header .logo` element, how achieve to this selector from `event.target` ? @Jonn — Farnabaz, Mar 19 '14 at 19:16
You may want to look into Xpath https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript — Yuriy Galanter, Mar 19 '14 at 19:18
This question appears to be off-topic because it is so clueless. — , Mar 19 '14 at 19:19
I'd think there should be a library that does this. And no you can't (easily) do this yourself. — sabof, Mar 19 '14 at 19:25
This may be what you're looking for: http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery — Jonn, Mar 19 '14 at 19:26

score 3 · Answer 1 · answered May 27 '15 at 14:05

I built a function in Javascript without Jquery that creates a unique identifier for any element in the DOM. If it has an id it uses the id. Otherwise it creates a path based on the parents of that element:

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;
}

So if you want to click on an element and get the unique selector just add:

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

score 0 · Answer 2 · answered Mar 19 '14 at 19:13

0

I suppose you mean a CSS selector. If so, it can be selected through multiple methods. If it has an id you can simply get the id from the element:

var selector = "#" + target.id;

answered Mar 19 '14 at 19:13

Kenneth

28,294
6
61
84

Hence "If it has an id you can ..." – Kenneth Mar 19 '14 at 19:14

score 0 · Answer 3 · answered Jan 24 '22 at 00:22

If you want it to be very expressive you could do, or perhaps remove the else block.

const attributes = target.getAttributeNames();

let query = target.localName;

for (let i = 0; i < attributes.length; i++) {
  const a = attributes[i];
  const attrValue = target.getAttribute(a);
  if (!attrValue) return;

  if (a === 'id') {
    query += `#${attrValue}`;
  } else if (a === 'class') {
    query += `.${attrValue.split(' ').join('.')}`;
  } else {
    query += `[${a}="${attrValue}"]`;
  }
}

javascript find selector of an element

3 Answers3