> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/selectors/selector/handling-nodelists-and-htmlcollection-in-regular-javascript-vs-jscula.md).

# Handling NodeLists & HTMLCollection in Regular JavaScript vs Jscula

When a selector matches several elements, JavaScript returns a collection.

Two common collection types are:

* **`HTMLCollection`** from methods such as `getElementsByClassName()`.
* **`NodeList`** from methods such as `querySelectorAll()`.

Both hold several elements. They are not regular arrays.

### Regular JavaScript

Use `querySelectorAll()` to select every button:

```javascript
const buttons = document.querySelectorAll('.button');
```

Then loop through the collection to update every button:

```javascript
buttons.forEach(button => {
  button.classList.add('active');
});
```

`NodeList` supports `forEach()` in modern browsers. An `HTMLCollection` does not, so convert it first:

```javascript
const buttons = document.getElementsByClassName('button');

Array.from(buttons).forEach(button => {
  button.classList.add('active');
});
```

### Jscula

Add `*` to select all matching elements. Jscula then applies the method to every element in that collection.

```javascript
$('.button*').addClass('active');
```

This is equivalent to selecting the buttons and looping through them yourself.

### More examples

Remove every matched navigation button:

```javascript
$('#nav > .button*').remove();
```

Set text on every matched status element:

```javascript
$('.status*').text('Ready');
```

### When to use each approach

Use regular JavaScript when you need custom logic for each element.

Use Jscula collection methods when every matched element needs the same action.