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.

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.

• javascript
• jquery

• I assume that your hierarchy is more complicated than your example, but you could simplify you selector to $('div#entry a[class*=element]') – Dexter Commented Jul 3, 2011 at 12:29
• Yes, apologies. I guess I was trying to make it look the chain more complicated than it needed to be to see if it was possible in fine detail. – gavin19 Commented Jul 3, 2011 at 12:45

4 Answers 4

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.

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!
}

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!

function selectors(){
      var temp= [];      //array for storing multiple id selectors.
      for(var i = 0;i<arguments.length;i++){
      if(typeof arguments[i] === 'string')
      temp.push(document.getElementById(arguments[i])); 
            }

          return temp; //for chanining
      },

 now call the function as many time as you want like
selectors('p').selectors('anyid')