Ինչպես օգտագործել սելեկտոր CSS կամ JavaScript-ում?

CSS սելեկտորները ցույց են տալիս, թե որ HTML տարրերին պետք է կիրառել ոճերը: JavaScript-ում դրանք օգտագործվում են DOM տարրեր ընտրելու համար:

Հիմնական CSS սելեկտորների տեսակները՝

• Տիպային սելեկտոր: Ընտրում է բոլոր նշված տիպի տարրերը:

  div {
    /* բոլոր <div>-երի համար ոճեր */
  }
  

• Կլասի սելեկտոր: Ընտրում է նշված կլասով տարրերը:

  .my-class {
    /* ոճեր "my-class" կլասով տարրերի համար */
  }
  

• ID սելեկտոր: Ընտրում է նշված ID-ով տարրերը (պետք է լինի յուրահատուկ):

  #my-id {
    /* ոճեր "my-id" ID-ով տարրերի համար */
  }
  

• Ամբողջական սելեկտոր: Ընտրում է բոլոր տարրերը:

  * {
    /* բոլոր տարրերի համար ոճեր */
  }
  

• Կոմբինատորներ: Միավորում են սելեկտորները:
  • Որդին ( ): div p - ընտրում է բոլոր <p>-ները <div>-ի ներսում:
  • Ուղիղ որդին (>): div > p - ընտրում է <div>-ի ուղիղ որդիները <p>:
  • Հաջորդ եղբայր (+): h2 + p - առաջին <p>, որը անմիջապես հաջորդում է <h2>-ին:
  • Ընդհանուր եղբայր (~): h2 ~ p - բոլոր <p>-ները, որոնք հաջորդում են <h2>-ին:

JavaScript-ում DOM տարրեր ընտրելու համար օգտագործվում են querySelector և querySelectorAll մեթոդները:

• querySelector: վերադարձնում է առաջին համապատասխան տարր:

  // առաջին տարր, որը ունի դաս `my-class`
  const element = document.querySelector('.my-class');
  

• querySelectorAll: վերադարձնում է NodeList-ով բոլոր համապատասխան տարրերը:

  // բոլոր `<div>`-երը
  const elements = document.querySelectorAll('div');
  

Օրինակ՝ JavaScript-ում:

// Գտնում ենք կոճակ ID-ով
const myButton = document.querySelector('#my-button');

// Ավելացնում ենք սեղմման իրադարձություն
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Կոճակը սեղմվեց!');
  });
}

// Գտնում ենք բոլոր ցուցակային տարրերը `list-item` դասով
const listItems = document.querySelectorAll('.list-item');

// Փոխում ենք յուրաքանչյուր տարրի տեքստը
listItems.forEach(item => {
  item.textContent = 'Թարմացված տեքստ';
});

CSS սելեկտորների և JavaScript-ով նրանց օգտագործման միջև հարաբերությունը ուղղակի է: Կարող եք օգտագործել նույն CSS սելեկտորները, ինչն օգտագործվում է ոճերում՝ տարրեր ընտրելու համար JavaScript-ում: