How to get the exact location of an html element

Question

I want to get the exact location of an html element, and output the address of that element, the logic goes like this.

<div id="foo">
   <article>
       <div>
          <p>you found me</p>
       </div>
   </article>
<div>

So that is the sample html, now lets say the user click something on that mark up, in this case lets say the user click the 'p' tag. how do I write my JavaScript to output the address of that 'p' tag.

     function getAddress(){
         // code here
         console.log('the user click the ')
         console.log(address)
     }

Desired output:

      // Console
      log: the user click the
      log: #foo > article > div > p

whats the logic behind this any search algorithm? or you want to backtrace until parent comes with id? — Omi, Jul 18 '17 at 23:23
@omi basically I want to backtrace until parent comes with id — Marven Wilson S Donque, Jul 18 '17 at 23:27

Frank Fajardo · Accepted Answer · 2017-07-19T00:43:38.117

1

Something like this:

$(document).ready(function () {
    var path = '';
    $('#foo').on('click', '*', function (e) {
        path = $(this).prop("tagName");
        $(this).parents().each(function () {
            path = $(this).prop("tagName") + ' > ' + path;
        });
        alert(path);
        e.stopPropagation();
    });
})

Sample fiddle

UPDATE

To add the id attributes:

$(document).ready(function () {
    var path = '';
    $('#foo').on('click', '*', function (e) {
        path = $(this).prop("tagName").toLowerCase();
        $(this).parents().each(function () {
            let id = $(this).attr('id');
            path = $(this).prop("tagName").toLowerCase() + (typeof id != 'undefined' ? '#'+id : '') + ' > ' + path;
        });
        alert(path);
        e.stopPropagation();
    });
});

Updated fiddle

UPDATE on Uppercase Tag Names

Based on MDN

In XML (and XML-based languages such as XHTML), tagName preserves case. On HTML elements in DOM trees flagged as HTML documents, tagName returns the element name in the uppercase form. The value of tagName is the same as that of nodeName.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

edited Jul 19 '17 at 00:43

answered Jul 18 '17 at 23:30

Frank Fajardo

7,034
1
29
47

this is exactly what I wanted, but why are the strings are in all caps? – Marven Wilson S Donque Jul 19 '17 at 00:40
@MarvenWilsonSDonque, see my update for the answer to your question about uppercase tag names. – Frank Fajardo Jul 19 '17 at 00:44
@MarvenWilsonSDonque, not sure why you marked my reply as the answer and then changed your mind. So much for saying 'thanks' :( – Frank Fajardo Jul 19 '17 at 00:58
1

@ Frank Fajardo sorry men I got confused, I thought I marked your answer, your code is what exactly what I am looking for, thank you so much.. – Marven Wilson S Donque Jul 20 '17 at 01:42
@ Frank Fajardo I got cofused, sorry, I did not changed my mind.. – Marven Wilson S Donque Jul 20 '17 at 01:44

score -1 · Answer 2 · answered Jul 18 '17 at 23:29

I am using jQuery and created this code snippet. Click on P tag

jQuery("p").click(function(){
  var parentEls = $(this).parents()
  .map(function() {
    return this.tagName;
  })
  .get()
  .join(">");
  alert(parentEls);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
   <article>
       <div>
          <p>you found me</p>
       </div>
   </article>
<div>

How to get the exact location of an html element

2 Answers2