Kā izmantot selektoru CSS vai JavaScript?

CSS selektori norāda, uz kuriem HTML elementiem piemērot stilus. JavaScript tos izmanto, lai izvēlētos DOM elementus.

Galvenie CSS selektoru tipi:

• Tipa selektors: Izvēlas visus norāda tipa elementus.

  div {
    /* stili visiem <div> */
  }
  

• Klases selektors: Izvēlas elementus ar norādītu klasi.

  .my-class {
    /* stili elementiem ar klasi "my-class" */
  }
  

• ID selektors: Izvēlas elementu ar norādītu ID (jābūt unikālam).

  #my-id {
    /* stili elementam ar ID "my-id" */
  }
  

• Universālais selektors: Izvēlas visus elementus.

  * {
    /* stili visiem elementiem */
  }
  

• Kombinatoru selektori: Apvieno selektorus.
  • Bērns ( ): div p - izvēlas visus <p> iekš <div>.
  • Tiešais bērns (>): div > p - izvēlas <p>, kas ir tieši <div> bērni.
  • Sēdējs brālis (+): h2 + p - pirmais <p>, kas tieši seko <h2>.
  • Kopējais brālis (~): h2 ~ p - visi <p>, kas seko pēc <h2>.

JavaScript izmantot DOM elementu izvēlei ir querySelector un querySelectorAll metodes.

• querySelector: atgriež pirmo elementu, kas atbilst norādītajam CSS selektoram.

  // Izvēlas pirmo elementu ar klasi "my-class"
  const element = document.querySelector('.my-class');
  

• querySelectorAll: atgriež NodeList (kā masīvs) ar visiem elementiem, kas atbilst selektoram.

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

Piemērs JavaScript:

// Atrodam pogu pēc ID
const myButton = document.querySelector('#my-button');

// Pievienojam klikšķa notikumu
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Poga nospiesta!');
  });
}

// Atrodam visus saraksta elementus ar klasi "list-item"
const listItems = document.querySelectorAll('.list-item');

// Mainām katra elementa tekstu
listItems.forEach(item => {
  item.textContent = 'Atjaunināts teksts';
});

CSS selektoru un to izmantošanas saistība JavaScript querySelector/querySelectorAll ir tieša. Jūs varat izmantot tos pašus CSS selektorus, kā stilā, lai izvēlētos elementus JavaScript.