How to chain selectors in Javascript without jQuery

Question

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' -

$('div[id="entry"] > p[class="header"] > span[id="title"] > div[class*="entry"] > p[class="title"] > a[class*="target"]').. etc

So say the HTML structure is roughly

<div id="entry">
    <p class="primary">
    <p class="header">
        <span class="side">
        <span id="title">
            <div class="secondary entry">
                <p class="return">
                <p class="title">
                    <a class="img">
                    <a class="mytargetelement">

So how is this possible normally? Thanks.

Answer 1

Enter document.querySelectorAll.

It's what jQuery uses internally for browsers that support it. The syntax is the same as in jQuery (Sizzle) selectors, see Selectors API.

Answer 2

This isn't pretty..

For each nested/chained element you can get its children via childNodes property. And then let the looping commence. :/ You'd then have to recursively loop through all children and children's children, and so on, until you find the appropriately matched element(s).

Updated:

To check for part of class name, you can do something like this:

if (element.className.indexOf('myClass') >= 0) {
   // found it!
}

Answer 3

If you want to avoid jQuery and only use complex CSS selectors then the SizzleJS library might be what you need. It's a lot easier than doing it yourself every time you're looking for a DOM element!