# Element.makeQuerySelector()
**URL:** https://es.discourse.group/t/element-makequeryselector/455
**Category:** 🦋 Proposals
**Created:** [September 4, 2020, 7:47pm UTC](https://es.discourse.group/t/element-makequeryselector/455 "2020-09-04T19:47:37Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@Ayc0](https://es.discourse.group/u/Ayc0)
#### Post date: [September 4, 2020, 7:47pm UTC](https://es.discourse.group/t/element-makequeryselector/455/1 "2020-09-04T19:47:37Z")
The idea would be to add a new method to dom elements and to the document like `.querySelector()` but which would share a syntax with `matchMedia`:
```javascript
const element = document.getElementById('my-id');
const selector = '.css [data-query] :scope';
const qs = element.makeQuerySelector(selector);
qs.get() === element.querySelector(selector);
qs.get({ all: true }) === element.querySelectorAll(selector);
```
The real benefits would be since now `makeQuerySelector` returns an object instead of a direct value (like a DOM element), we will be able to iterate in the future and add new methods and avoid having to add to the elements' prototype new methods.
Another thing we could (and which was the basis of my proposal) is to add a `.addEventListener` method to it:
```javascript
const onChangeOne = (event) => {
console.log('matched? ', event.element !== null);
}
qs.addEventListener('change', onChangeOne);
const onChangeAll = (event) => {
console.log('matched? ', event.elements.length !== 0);
}
qs.addEventListener('change', onChangeAll, { all: true });
```
---
### Author:  [@ljharb](https://es.discourse.group/u/ljharb)
#### Post date: [September 5, 2020, 6:33am UTC](https://es.discourse.group/t/element-makequeryselector/455/2 "2020-09-05T06:33:17Z")
DOM elements and query selectors are part of HTML not JavaScript - [https://discourse.wicg.io/](https://discourse.wicg.io/) may be helpful.