როგორ გამოვიყენოთ სელექტორი 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: აბრუნებს პირველ ელემენტს, რომელიც შეესაბამება მითითებულ CSS სელექტორს.

  // პირველ ელემენტს, რომელსაც აქვს კლასი "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-ში querySelector/querySelectorAll პირდაპირია. შეგიძლიათ გამოიყენოთ იგივე CSS სელექტორები, როგორც სტილებში, ელემენტების არჩევისთვის JavaScript-ში.