# select direct children by JS

{% tabs %}
{% tab title="📗 參考" %}
* 🗣 [Using querySelectorAll to retrieve direct children](https://stackoverflow.com/q/3680876/5409815)
* 📘 [:scope](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) - [Direct children](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#direct_children)
* 💾 replit: [\<dom-hierarchy>](https://replit.com/@pegasusroe/lessdom-hierarchygreater#DomHierarchy.js)&#x20;
{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

```javascript
// assume li is a <li> element
li.querySelector(':scope > ul.methods')    
// select direct child <ul class="methods">
```
