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.