Jak używać selektora w CSS lub JavaScript?

W CSS selektory wskazują, do których elementów HTML zastosować style. W JavaScript służą do wybierania elementów DOM.

Główne typy selektorów CSS:

• Selektor typu: Wybiera wszystkie elementy określonego typu.

  div {
    /* style dla wszystkich <div> */
  }
  

• Selektor klasy: Wybiera elementy z określoną klasą.

  .moja-klasa {
    /* style dla elementów z klasą "moja-klasa" */
  }
  

• Selektor ID: Wybiera element z określonym ID (powinien być unikalny).

  #moje-id {
    /* style dla elementu z ID "moje-id" */
  }
  

• Selektor uniwersalny: Wybiera wszystkie elementy.

  * {
    /* style dla wszystkich elementów */
  }
  

• Kombinatory: łączą selektory.
  • Potomek ( ): div p - wybiera wszystkie <p> wewnątrz <div>.
  • Bezpośredni potomek (>): div > p - wybiera wszystkie <p>, które są bezpośrednimi dziećmi <div>.
  • Sąsiedni brat (+): h2 + p - wybiera pierwszy <p>, który bezpośrednio po <h2>.
  • Ogólny brat (~): h2 ~ p - wybiera wszystkie <p>, które następują po <h2>.

W JavaScript do wybierania elementów DOM używa się metod querySelector i querySelectorAll.

• querySelector: Zwraca pierwszy element pasujący do podanego selektora CSS.

  // Wybiera pierwszy element z klasą "moja-klasa"
  const element = document.querySelector('.moja-klasa');
  

• querySelectorAll: Zwraca NodeList (podobny do tablicy) wszystkich elementów pasujących do selektora CSS.

  // Wybiera wszystkie elementy `<div>`
  const elementy = document.querySelectorAll('div');
  

Przykład użycia w JavaScript:

// Znajdź przycisk po ID
const mojPrzycisk = document.querySelector('#moj-przycisk');

// Dodaj obsługę zdarzenia kliknięcia
if (mojPrzycisk) {
  mojPrzycisk.addEventListener('click', () => {
    alert('Przycisk został kliknięty!');
  });
}

// Znajdź wszystkie elementy listy z klasą "lista-element"
const elementyListy = document.querySelectorAll('.lista-element');

// Zmień tekst każdego elementu listy
elementyListy.forEach(item => {
  item.textContent = 'Zaktualizowany tekst';
});

Związek między selektorami CSS a ich użyciem w JavaScript z querySelector/querySelectorAll jest bezpośredni. Możesz używać tych samych selektorów CSS, co w stylach, do wybierania elementów w JavaScript.