querySelectorAll() -- selecting _immediate_ children of element

querySelector() and querySelectorAll() methods are exciting features, but they do not allow select _immediate_ children of reference element.

To address this lack, we could use following syntax:

    var divs = refElement.querySelectorAll('> DIV');

Here 'divs' variable contains list of DIV elements that are immediate children (not just descendant elements) of reference element (refElement).

This syntax is extremely intuitive and BTW is supported in jQuery.

Other combinators (e.g. adjacent-sibling combinator) would have sense too, for example:

    var span = h1.querySelector('+ H2 SPAN');

'span' variable here contains DOM reference to SPAN elements inside H2 element which is next sibling of H1 element:

    <h1>...</h1>
    <h2>... <span>...</span> ...</h2>

But fundamental missing demanded feature is ability to select _child_ elements of reference element ( querySelectorAll('> DIV') ).

Since usecases are purely script-level, CSSWG has nothing to do with this syntax. From selectors perspective, there is nothing new here: we have reference element (in CSS, a selector is used in place of concrete element), standard selector (DIV), and standard combinator between them.

An acceptable alternative to implied reference element would be using ':this' pseudoclass:

    var divs = refElement.querySelectorAll(':this > DIV');
    var span = h1.querySelector(':this + H2 SPAN');

Furthermore, :this pseudoclass would give us additional possibilities such as selecting descendant elements via selectors _all_ parts of which matches to descendants of reference element.

For example, following code will select all links that are descendants of _any_ paragraph (not necessarily descendants of reference element):

    refElement.querySelectorAll('P A');

As opposed, this code:

    refElement.querySelectorAll(':this P A');

would select links that are inside of paragraphs which _themselves_ are descendants of the reference element.

Probably most DRY, usable, and flexible solution would be to allow both syntaxes: implied reference element to use with combinators (where :this would be just redundant), and explicit :this to use in conjunction with descendant selectors (where it really gives additional useful possibilities missing in current querySelector spec and implementations).

Thanks.

Received on Monday, 9 January 2012 14:18:15 UTC