Separate specs for CSS selectors and Javascript DOM selectors
Hi. I’m new here and I’d like to propose one important for me thing. I’m JS developer and I use jQuery for 2 years. Recently I tried to refuse of using it and use newest native things as querySelector.
The problem is that document.querySelector and document.querySelectorAll uses only selectors that described in specs for using in CSS. I’ve heard that next selector specs will include parent selector:
For example “ul! > li.active” – selects ul that includes li.active. My opinion is that this kind of selector is not flexible. As little example, how to select li that places in ul that contains li.active. In other words how to select siblings of li.active?
The answer is we should have :has() pseudoclass:
ul:has(li.active) > li
I’ve heard that it wasn’t implemented because of perfomance: http://snook.ca/archives/html_and_css/css-parent-selectors/ .
But if we use this selector in Javascript the problem disappears, because this query uses only once when developer needs to get element list. So why querySelector and querySelectorAll uses CSS selectors only? I’d like to have 2 cpecs: first is for using in CSS and second for using in JS (the first is subset of the second).
Idea can really help in JS DOM development, we’re haven’t use large and hardcoded DOM web spiders like jQuery.
Another very serious problem in querySelector is that we can’t select element itself. For example I want to get all children of the element. How can I do this?
el.querySelectorAll( ‘> *’ );
… doesn’t work
But if we’ve got something like ::this pseudoelement we could reduce code line number and improve performance.
Don’t you think that CSS selectors very poor in Javascript development?
P. S. As I said I’m new here and registered to send this message to comunity. Sorry if this is not good place for it.
