---
name: selettore-rapido
description: Usare quando l'utente vuole una sintassi abbreviata per selezionare elementi DOM, simile a jQuery.
---

# Selettore Rapido

Questa skill fornisce uno shortcut per `document.querySelector()` con una sintassi più concisa. Riduce la verbosità del codice quando si lavora frequentementi con selettori DOM.

## Procedura

1. **Selezionare un elemento**: Usare `$(selettore)` invece di `document.querySelector(selettore)`
2. **Usare qualsiasi selettore CSS**: Passare stringhe di selettori CSS validi
3. **Gestire il risultato**: Il risultato è un singolo elemento DOM o `null` se non trovato

## Regole

- Il selettore deve essere una stringa valida per `querySelector()`
- Restituisce solo il **primo** elemento che matcha il selettore
- Restituisce `null` se nessun elemento matcha
- **Attenzione**: Il nome `$` può confliggere con librerie come jQuery

## Esempi

### Esempio 1: Selezionare un elemento per ID

```javascript
const myElement = $('#myId');
// Equivalente a: document.querySelector('#myId')
```

### Esempio 2: Selezionare per classe

```javascript
const firstBox = $('.box');
// Equivalente a: document.querySelector('.box')
```

### Esempio 3: Selezionare per tag

```javascript
const firstHeading = $('h1');
// Equivalente a: document.querySelector('h1')
```

### Esempio 4: Selezionare con attributo

```javascript
const button = $('[data-role="button"]');
// Equivalente a: document.querySelector('[data-role="button"]')
```

### Esempio 5: Combinare selettori

```javascript
const element = $('div.container > p.highlight');
```

## Dettagli Aggiuntivi

- **Selettori CSS validi**: tag, classi (`.class`), ID (`#id`), attributi (`[attr]`), combinatori (`>`, `+`, `~`)
- **Prestazioni**: Stessa performance di `document.querySelector()`
- **Compatibilità**: Funziona in tutti i browser moderni
- **Sicurezza**: Non protegge da selettori invalidi (restituisce `null`)