Get the Dom Path of the Clicked <A>

Get the DOM path of the clicked a

Using jQuery, like this (followed by a solution that doesn't use jQuery except for the event; lots fewer function calls, if that's important):

$(".rightArrow").click(function () {
    const rightArrowParents = [];
    $(this)
        .parents()
        .addBack()
        .not("html")
        .each(function () {
            let entry = this.tagName.toLowerCase();
            const className = this.className.trim();
            if (className) {
                entry += "." + className.replace(/ +/g, ".");
            }
            rightArrowParents.push(entry);
        });
    console.log(rightArrowParents.join(" "));
    return false;
});

Live example:

$(".rightArrow").click(function () {
    const rightArrowParents = [];
    $(this)
        .parents()
        .addBack()
        .not("html")
        .each(function () {
            let entry = this.tagName.toLowerCase();
            const className = this.className.trim();
            if (className) {
                entry += "." + className.replace(/ +/g, ".");
            }
            rightArrowParents.push(entry);
        });
    console.log(rightArrowParents.join(" "));
    return false;
});

<div class="   lol   multi   ">
    <a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Need to print Dom path when clicked anywhere in a page using only JS

Once you have the event target, you just climb up the parentNode tree, prepending the tag names, e.g.

window.onload = function(){  document.body.addEventListener('click', climbNodes);}
function climbNodes(e){  var node = e.target;  var ancestors = node.tagName;  while (node.parentNode && node.parentNode.tagName) {    node = node.parentNode;    ancestors = node.tagName + '>' + ancestors;  }  console.log(ancestors);}

<div>Click here  <div>or here    <p>      <span>or here</span>    </p>    <ul>      <li>or here</li>    </ul>  </div></div>

Traversing up the dom getting the from a clicked element with id and class

Adding to the linked code, the code below will append all ids and classes on the element.

Clicking an element <div id="id1" class="class1 class2">Test</div>...

would output HTML > BODY > 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);

What is the path in the html dom for a selected element?

The following function does what you want, using jQuery:

function getElementPath(element)
{
    return "//" + $(element).parents().andSelf().map(function() {
        var $this = $(this);
        var tagName = this.nodeName;
        if ($this.siblings(tagName).length > 0) {
            tagName += "[" + $this.prevAll(tagName).length + "]";
        }
        return tagName;
    }).get().join("/").toUpperCase();
}

You can use it like this:

$(document).ready(function() {
    $("div").click(function(event) {
        event.stopPropagation();
        window.alert(getElementPath(this));
    });
});

You can test it here.

Is there any way to get dom path from inspector?

I'm using Firefox 57. This is possible by right-clicking an element, Copy -> CSS Path.

Alternatively, you can use the CSS Selector option to get a unique selector for that specific element.

Get the DOM path of the clicked a

Using jQuery, like this (followed by a solution that doesn't use jQuery except for the event; lots fewer function calls, if that's important):

$(".rightArrow").click(function () {
    const rightArrowParents = [];
    $(this)
        .parents()
        .addBack()
        .not("html")
        .each(function () {
            let entry = this.tagName.toLowerCase();
            const className = this.className.trim();
            if (className) {
                entry += "." + className.replace(/ +/g, ".");
            }
            rightArrowParents.push(entry);
        });
    console.log(rightArrowParents.join(" "));
    return false;
});

Live example:

$(".rightArrow").click(function () {
    const rightArrowParents = [];
    $(this)
        .parents()
        .addBack()
        .not("html")
        .each(function () {
            let entry = this.tagName.toLowerCase();
            const className = this.className.trim();
            if (className) {
                entry += "." + className.replace(/ +/g, ".");
            }
            rightArrowParents.push(entry);
        });
    console.log(rightArrowParents.join(" "));
    return false;
});

<div class="   lol   multi   ">
    <a href="#" class="rightArrow" title="Next image">Click here</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Getting Element Path for selector

Perhaps something like this:

function dompath( element )
{
    var path = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode )
    {
        var inner = $(element).children().length == 0 ? $(element).text() : '';
        var eleSelector = element.tagName.toLowerCase() + 
           ((inner.length > 0) ? ':contains(\'' + inner + '\')' : '');
        path = ' ' + eleSelector + path;
    }
    return path;
}

This modified a method from another question to go through, and add in the full text contents of the tag via a :contains() operator only if the tag has no children tags.

I had tested with this method:

$(document).ready(function(){
    $('#p').click(function() {
      console.log(dompath(this));
    });
});

Against this:

<html>
    <body>
        <div>
            <div> </div>
        </div>
       <ul>
         <li></li>
         <li></li>
       </ul>
       <div>
         <ul>
           <li id="p">hi</li>
           <li></li>
           <li id="p2">hello world</li>
        </ul>
       </div>
   <body>
<html>

The results of clicking on p then get output as:

html body div ul li:contains('hi')

---

Related Topics