Kuidas kasutada selektorit CSS või JavaScriptis…

CSS valikud näitavad, milliseid HTML elemente stiilide rakendamiseks kasutada. JavaScriptis kasutatakse neid DOM elementide valimiseks.

Peamised CSS valikute tüübid:

Tüüpvalik: Valib kõik määratud tüüpi elemendid.
```
div {
  /* stiilid kõigile <div>-idele */
}
```

Klassivalik: Valib elemendid, millel on määratud klass.

.my-class {
  /* stiilid elementidele klassiga "my-class" */
}

ID valik: Valib elemendi, millel on määratud ID (peab olema unikaalne).
```
#my-id {
  /* stiilid elemendile ID-ga "my-id" */
}
```

Universaalne valik: Valib kõik elemendid.

* {
  /* stiilid kõigile elementidele */
}

Kombinaatorid: ühendavad valikuid.
- Järeltüüp ( ): div p - valib kõik <p>-d <div>-i sees.
- Otse järeltüüp (>): div > p - valib <p>-d, mis on otse <div>-i järeltüüp.
- Sõbralised vennad (+): h2 + p - esimene <p>, mis järgneb otse <h2>-le.
- Üldised vennad (~): h2 ~ p - kõik <p>-d, mis järgivad <h2>-le.

JavaScriptis DOM elementide valimiseks kasutatakse meetodeid querySelector ja querySelectorAll.

querySelector: tagastab esimese vastava elemendi.

// Valib esimese elemendi klassiga "my-class"
const element = document.querySelector('.my-class');

querySelectorAll: tagastab NodeList-ina kõik vastavad elemendid.

// Valib kõik `<div>`-id
const elements = document.querySelectorAll('div');

Näide JavaScriptis:

// Leia nupp ID järgi
const myButton = document.querySelector('#my-button');

// Lisa klikkimise sündmus
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Nupp on vajutatud!');
  });
}

// Leia kõik nimekirja elemendid klassiga "list-item"
const listItems = document.querySelectorAll('.list-item');

// Muuda iga elemendi tekst
listItems.forEach(item => {
  item.textContent = 'Uuendatud tekst';
});

CSS valikute ja nende kasutamise vahe JavaScriptis querySelector/querySelectorAll on otsene. Saate kasutada samu CSS valikuid, mida stiilides, elementide valimiseks JavaScriptis.

Kuidas kasutada selektorit CSS või JavaScriptis?