Kaip naudoti selektorių CSS ar JavaScript?

CSS selektoriai nurodo, prie kurių HTML elementų taikyti stilius. JavaScript'e jie naudojami DOM elementų pasirinkimui.

Pagrindiniai CSS selektorių tipai:

• Tipo selektorius: Pasirenka visus nurodyto tipo elementus.

  div {
    /* stiliai visiems <div> */
  }
  

• Klasės selektorius: Pasirenka elementus su nurodyta klase.

  .my-class {
    /* stiliai elementams su klase "my-class" */
  }
  

• ID selektorius: Pasirenka elementą su nurodytu ID (turi būti unikalus).

  #my-id {
    /* stiliai elementui su ID "my-id" */
  }
  

• Universalus selektorius: Pasirenka visus elementus.

  * {
    /* stiliai visiems elementams */
  }
  

• Kombinatoriai: jungia selektorius.
  • Palikuonis ( ): div p - pasirenka visus <p> viduje <div>.
  • Tiesioginis palikuonis (>): div > p - pasirenka <p>, kurie yra tiesioginiai <div> palikuonys.
  • Giminaitis (+): h2 + p - pirmasis <p>, kuris iš karto po <h2>.
  • Bendras giminaitis (~): h2 ~ p - visi <p>, kurie seka po <h2>.

JavaScript'e DOM elementų pasirinkimui naudojami metodai querySelector ir querySelectorAll.

• querySelector: grąžina pirmą elementą, atitinkantį nurodytą CSS selektorių.

  // Pasirenka pirmą elementą su klase "my-class"
  const element = document.querySelector('.my-class');
  

• querySelectorAll: grąžina NodeList (panašų į masyvą) visų elementų, atitinkančių selektorių.

  // Pasirenka visus `<div>` elementus
  const elements = document.querySelectorAll('div');
  

Pavyzdys JavaScript'e:

// Rasti mygtuką pagal ID
const myButton = document.querySelector('#my-button');

// Pridėti paspaudimo įvykį
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Mygtukas paspaustas!');
  });
}

// Rasti visus sąrašo elementus su klase "list-item"
const listItems = document.querySelectorAll('.list-item');

// Keisti kiekvieno elemento tekstą
listItems.forEach(item => {
  item.textContent = 'Atnaujintas tekstas';
});

CSS selektorių ir jų naudojimo santykis JavaScript'e querySelector/querySelectorAll yra tiesioginis. Galite naudoti tuos pačius CSS selektorius, kaip ir stiliuose, norint pasirinkti elementus JavaScript'e.