title: How to get dept of selected div with javascript?
body: <p>I'd like to get the dept level of a selected div starting from <code>.element</code>:</p>
  
  <pre><code>&lt;div class="elements"&gt;
      &lt;div class="element"&gt;
          &lt;div&gt;
              &lt;div&gt;text&lt;/div&gt; &lt;!-- example: if click get DEPT level --&gt;
          &lt;/div&gt;
          &lt;div&gt;text&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="element"&gt;
          &lt;div&gt;text&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For this problem I'm using a algorithm that works like a tree (top to bottom), the problem is that it only get the dept of <code>firstChild</code> instead of getting the dept of the selected (<code>this</code>) element.</p>
  
  <pre><code>document.querySelector(".elements div").addEventListener("click", function() {
      var text = this,
          level = 0,
          parent = this.closest('.element'); //starting point is '.element'
  
      while (parent != null) {
          parent = parent.firstChild; //Problem: get 'this' instead of firstChild
          level += 1;
          console.log('dept: ', level);
          console.log('parent: ', parent);
  
          //fallback for not crashing the browser
          if (level &gt; 15) {return false;}
      }
  });
  </code></pre>
  
  <p>What is the cleanest way of doing so <strong>without JQuery</strong>?</p>