title: How to get the innerHTML/innerText from a related node of a clicked element?
body: <p>I would like to get a certain innerText from a clicked  element in a HTML document that I clicked.</p>
  
  <p>The corresponding HTML looks something like this:</p>
  
  <pre><code>!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Some title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul class="categories"&gt;
          &lt;li&gt;
              &lt;a href="http://www.example2.com/1"&gt;
              &lt;div&gt;
                  &lt;img src="http://www.example.com/someSource"&gt;
                  &lt;span&gt;First&lt;/span&gt;
              &lt;/div&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              &lt;a href="http://www.example2.com/1"&gt;
              &lt;div&gt;
                  &lt;img src="http://www.example.com/someSource"&gt;
                  &lt;span&gt;Second&lt;/span&gt;
              &lt;/div&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>A Javascript function should return either "First" or "Second" depending on the clicked link.</p>
  
  <p>My basic idea is to add an event listener and use the returned event to get the content of the span element:</p>
  
  <pre><code>function(){
    document.addEventListener('click', function(e) {
      e = e || window.event;
      var spanText= e.path[i].innerText; //Don't know how to assign i correctly
      return spanText;
      }, false);
  }
  </code></pre>
  
  <p>My problem is that I don't know how to define <em>i</em> or if there is something more suitable than <em>.path[i]</em> to work with. Depending on whether I click the image or the text.</p>