Get the selector string from DOM element with native Javascript

Question

Usually, we use querySelectorAll('html:eq(0) > body:eq(0) > div.row:eq(0) > div.span4:eq(2) > p.p3:eq(2)') to get the DOM ELEMENT.

If I want to use the ELEMENT <p class="p3">target</p> with native javascript to get the selector string, what should I do?

For example:

<div class="row">
    <div class="span4">
        <p class="p1">p1_1<p>
        <br>
        <p class="p1">p1_2<p>
        <p class="p1">p1_3<p>
    </div>
    <br>
    <div class="span4">
        <p class="p2">p2_1<p>
        <p class="p2">p2_2<p>
        <br>
        <p class="p2">p2_3<p>
    </div>
    <p>stranger</p>
    <div class="span4">
        <p class="p3">p3_1<p>
        <br>
        <p class="p3">p3_2<p>
        <br>
        <p class="p3">target<p>
    </div>
<div>
<div class="row">
    <div class="span3">
        <p class="p3">p1<p>
        <br>
        <p class="p3">p2<p>
        <p class="p3">p3<p>
    </div>
<div>
<br>
<div class="row">
    <p>stranger</p>
<div>

Thses are what I think:

1. Taking advantage of those attributes of the element <p class="p3">target</p>, I found these are useful:
   • attributes
   • nextElementSibling
   • previousElementSibling
   • parentElement
2. Attribute => attributes: I can use it generate the string like div.className#idName, this is not hard to do.
3. Attribute => nextElementSibling, previousElementSibling: I can use it generate the string like :eq(0).

What I met as a problem is the Step3, because if there are BR between two DIV, then this two ElementSibling will return BR, it means the BR is treated as a brother of this two div who has the same class, but that is not i want.

So I tried to consider use Step3.1:

3.1. Attribute => parentElement: Use element's parent to get the eq, who it is ? 0, 1, 2.....

But I find i cannot specify targeting element is which one, because he has so many same brothers have the same tagName, and className....

I would like to know if you guys have any good ideas?

Answer 1

If you are trying to find the element based on the html, in this case "target", you can do this:

var elms = document.querySelectorAll('p');
var targetElm;
for (var i = 0; i < elms.length; i++) {
   if (elms[i].innerHTML === 'target') {
       targetElm = elms[i];
   }
}