title: How to chain selectors in Javascript without jQuery
body: <p>While trying to manipulate the layout of external sites I am often forced to use a chain of selectors to target the specific element I want. The first time I encountered this I was offered a jQuery solution and it is very easy to get results. I would prefer not to rely on jQuery and would like to know how feasible this is in standard Javascript. Here is an example jQuery 'chain' -</p>
  
  <pre><code>$('div[id="entry"] &gt; p[class="header"] &gt; span[id="title"] &gt; div[class*="entry"] &gt; p[class="title"] &gt; a[class*="target"]').. etc
  </code></pre>
  
  <p>So say the HTML structure is roughly</p>
  
  <pre><code>&lt;div id="entry"&gt;
      &lt;p class="primary"&gt;
      &lt;p class="header"&gt;
          &lt;span class="side"&gt;
          &lt;span id="title"&gt;
              &lt;div class="secondary entry"&gt;
                  &lt;p class="return"&gt;
                  &lt;p class="title"&gt;
                      &lt;a class="img"&gt;
                      &lt;a class="mytargetelement"&gt;
  </code></pre>
  
  <p>So how is this possible normally? Thanks.</p>