title: Get the selector string from DOM element with native Javascript
body: <p>Usually, we use <code>querySelectorAll('html:eq(0) &gt; body:eq(0) &gt; div.row:eq(0) &gt; div.span4:eq(2) &gt; p.p3:eq(2)')</code> to get the DOM ELEMENT.</p>
  
  <p>If I want to use the ELEMENT <code>&lt;p class="p3"&gt;target&lt;/p&gt;</code> with native javascript to get the selector string, what should I do?</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span4"&gt;
          &lt;p class="p1"&gt;p1_1&lt;p&gt;
          &lt;br&gt;
          &lt;p class="p1"&gt;p1_2&lt;p&gt;
          &lt;p class="p1"&gt;p1_3&lt;p&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div class="span4"&gt;
          &lt;p class="p2"&gt;p2_1&lt;p&gt;
          &lt;p class="p2"&gt;p2_2&lt;p&gt;
          &lt;br&gt;
          &lt;p class="p2"&gt;p2_3&lt;p&gt;
      &lt;/div&gt;
      &lt;p&gt;stranger&lt;/p&gt;
      &lt;div class="span4"&gt;
          &lt;p class="p3"&gt;p3_1&lt;p&gt;
          &lt;br&gt;
          &lt;p class="p3"&gt;p3_2&lt;p&gt;
          &lt;br&gt;
          &lt;p class="p3"&gt;target&lt;p&gt;
      &lt;/div&gt;
  &lt;div&gt;
  &lt;div class="row"&gt;
      &lt;div class="span3"&gt;
          &lt;p class="p3"&gt;p1&lt;p&gt;
          &lt;br&gt;
          &lt;p class="p3"&gt;p2&lt;p&gt;
          &lt;p class="p3"&gt;p3&lt;p&gt;
      &lt;/div&gt;
  &lt;div&gt;
  &lt;br&gt;
  &lt;div class="row"&gt;
      &lt;p&gt;stranger&lt;/p&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>Thses are what I think:</p>
  
  <ol>
  <li>Taking advantage of those attributes of the element <code>&lt;p class="p3"&gt;target&lt;/p&gt;</code>, I found these are useful: 
  
  <ul>
  <li>attributes</li>
  <li>nextElementSibling</li>
  <li>previousElementSibling</li>
  <li>parentElement</li>
  </ul></li>
  <li>Attribute => <em>attributes</em>: I can use it generate the string like <code>div.className#idName</code>, this is not hard to do.</li>
  <li>Attribute =>  <em>nextElementSibling, previousElementSibling</em>: I can use it generate the string like <code>:eq(0)</code>.</li>
  </ol>
  
  <p><em>What I met as a <strong>problem</strong> 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.</em></p>
  
  <p>So I tried to consider use Step3.1:</p>
  
  <p>3.1. Attribute => parentElement: Use element's parent to get the eq, who it is ? 0, 1, 2.....</p>
  
  <p><strong><em>But</strong> I find i cannot specify targeting element is which one, because he has so many same brothers have the same tagName, and className....</em></p>
  
  <p>I would like to know if you guys have any good ideas?</p>