Re: querySelectorAll() -- selecting _immediate_ children of element

This has actually been discussed quite a bit on this list, in various
contexts - for example see
http://lists.w3.org/Archives/Public/public-webapps/2011OctDec/0277.html(except
that you have to substitute ":scope" for your proposed ":this").


Cheers,

- Roland


On Mon, Jan 9, 2012 at 23:46, Marat Tanalin | tanalin.com <
mtanalin@yandex.ru> wrote:

> 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.
>
> P.S. The proposal has been originally posted in public-script-coord (
> http://lists.w3.org/Archives/Public/public-script-coord/2012JanMar/0078.html) but it seems public-webapps is probably more appropriate place for this.
>
>