ისწავლე

სელექტორები

ხშირ შემთხვევაში ვებგვერდზე სტატიკური კონტენტის გარდა საჭიროა დინამიურადაც გამოვიტანოთ კონტენტი. წარმოვიდგინოთ მაღაზიის ვებგვერდი. რათქმაუნდა თითოეულ პროდუქტს HTML-ში ხელით არ დავწერთ, უფრო ეფექტური მიდგომა იქნება, რომ ჯერ სერვერიდან წამოვიღოთ ინფორმაცია იმის შესახებ, თუ რა პროდუქტები არის გამოსატანი ვებგვერდზე და შემდგომ ნაწილ-ნაწილ გამოვიტანოთ ვიზუალზე პროდუქტები. ამისათვის საჭიროა ჯერ შესაბამისი HTML ელემენტი ამოვიღოთ სელექტორების საშუალებით და შემდგომ მასში დავარენდეროთ კონტენტი.

რა არის სელექტორი ?

სელექტორი ეს არის ტექსტი, რომლის მიხედვითაც ბრაუზერი მოგვაწვდის შესაბამის ელემენტს ან ელემენტებს.

სელექტორი შესაძლოა იყოს:

  • თეგის სახელი
  • კლასი
  • იდ
  • ატრიბუტები
  • ფსევდო კლასებით
  • CSS სელექტორი

მაგალითად:

JS
const selector1 = 'button'; // თეგის სახელით
const selector2 = '.button'; // კლასი
const selector3 = '#button'; // იდ
const selector4 = '[data-value]'; // ატრიბუტით
const selector5 = '[data-value="22"]'; // ატრიბუტი სპეციფიკური მნიშვნელობით
const selector6 = 'main > p:first-child'; // პირველი პ ელემენტი მეინში
const selector7 = 'main > p:nth-of-type(3)'; // მესამე პ ელემენტი მეინში
const selector8 = ':not(section)'; // ყოველი ელემენტი გარდა სექციისა

შენიშნეთ, რომ ეს იგივე CSS-ის სელექტორებია?

სელექტორები გამოიყენება document ობიექტისა და დომის კვანძების სხვადასხვა მეთოდებში, რომლის მიხედვითაც შესაძლებელია ამოვიღოთ ელემენტები.

ელემენტების ძებნა

ელემენტების მოსაძებნად გვაქვს ჩაშენებული მეთოდები, რომლებიც მოდის ობიექტიდან. მოძებნილი ელემენტი ისეთივე DOM-ის კვანძია, როგორც თვითონ document, მაშასადამე მასზე მანიპულაცია შეგვიძლია. განვიხილოთ ელემენტების მოსაძებნად განკუთვნილი მეთოდები.

querySelector

querySelector არის მეთოდი, რომელიც გამოიყენება ერთი ელემენტის მოსაძებნად. ის პარამეტრად იღებს სელექტორს და აბრუნებს პირველივე ელემენტს, რომელიც დააკმაყოფილებს სელექტორის პირობას, ხოლო თუ ვერ იპოვა მსგავსი ელემენტი - დააბრუნებს null.

მაგალითები:

JS
const p = document.querySelector('p');
const button = document.querySelector('.btn');
const displayResult = document.querySelector('#result');
const highlightedParagraph = document.querySelector('p.highlight');

სხვა მეთოდებისგან განსხვავებით querySelector შედარებით უფრო მეტი შესაძლებლობა აქვს, რადგან შეიძლება ელემენტი მოვძებნოთ არა კონკრეტულად თეგის სახელით, კლასით ან აიდით, არამედ თითქმის ნებისმიერი CSS-ის სელექტორის მიხედვით.

querySelectorAll

querySelectorAll არის querySelector-ის მსგავსი მეთოდი მცირედი განსხვავებით. querySelectorAll აბრუნებს ყოველ იმ ელემენტს, რომელიც დააკმაყოფილებს სელექტორის პირობას. პოვნის შემთხვევაში დააბრუნებს მასივის მსგავს ობიექტს - NodeList-ს, რომელზეც შეიძლება მასივის forEach მეთოდის გამოყენება.

მაგალითები:

JS
const paragraphs = document.querySelector('p');
const actionButtons = document.querySelector('.action');
const elementsWithData = document.querySelector('[data-value]');

getElementById

getElementById არის მეთოდი, რომელიც გამოიყენება ერთი კონკრეტული ელემენტის ამოსაღებად id-ის გამოყენებით. არგუმენტად იღებს id-ს და დააბრუნებს პირველივე ელემენტს, რომელიც დააკმაყოფილებს პირობას. ვერ პოვნის შემთხვევაში - დააბრუნებს null. querySelector-ისგან განსხვავებით, ის მხოლოდ id-ით მიხედვით ეძებს ელემეტნს და არა სელექტორით, შესაბამისად არ სჭირდება # პრეფიქსი.

მაგალითები:

JS
const displayResult = document.getElementById('result');
const counter = document.getElementById('counter');

getElementsByTagName

getElementsByTagName არის მეთოდი, რომელიც გამოიყენება რამდენიმე ელემენტის ამოსაღებად ელემენტის თეგის სახელის გამოყენებით. მეთოდი არგუმენტად იღებს თეგის სახელს და აბრუნებს იმ ელემენტების NodeList-ს, რომლებიც განთავსებულია მიწოდებული თეგით, ვერ პოვნის შემთხვევაში - აბრუნებს null-ს.

მაგალითები:

JS
const paragraphs = document.getElementsByTagName('p');
const buttons = document.getElementsByTagName('buttons');

getElementsByTagName-ზე უფრო მოქნილი ვერსია არის querySelectorAll.

getElementsByClassName

getElementsByClassName არის მეთოდი, რომელიც გამოიყენება რამდენიმე ელემენტის ამოსაღებად კლასის სახელის მიხედვით. მეთოდი არგუმენტად იღებს კლასის სახელს და აბრუნებს იმ ელემენტების NodeList-ს, რომლებსაც გააჩნიათ მითითებული კლასი, ხოლო ვერ პოვნის შემთხვევაში - null-ს.

მაგალითები:

JS
const highlightedTexts = document.getElementsByClassName('highlight');
const actionButtons = document.getElementsByClassName('action');

querySelectorAll-სგან განსხვავებით getElementsByClassName არ სჭირდება კლასის პრეფიქსი ..

getElementsByName

getElementsByName არის მეთოდი, რომელიც გამოიყენება რამდენიმე ელემენტის ამოსაღებად ელემენტის name ატრიბუტის გამოყენებით. მეთოდი არგუმენტად იღებს name-ს და აბრუნებს იმ ელემენტების NodeList-ს, რომლებსაც გააჩნიათ მიწოდებული მნიშვნელობის name ატრიბუტი. ვერ პოვნის შემთხვევაში აბრუნებს null-ს.

მაგალითები:

JS
// იპოვის ელემენტებს <input name="some-random-radio-inputs">
const radioInputs = document.getElementsByName('some-random-radio-inputs');

მსგავსი ტიპის ელემენტები შეიძლება იყოს, ნებისმიერი HTML ელემენტი, მათ შორის <meta>, <object> და ისეთი ელემენტებიც კი, რომელსაც რეალურად არ გააჩნია name ატრიბუტი (მაგალითად: <div name="some"> ელემენტის ამოღებაც შეიძლება).

ერთი კვანძიდან მეორეზე

DOM-ში კვანძების ობიექტები ისე არის აგებული, რომ ნავიგაცია ნებისმიერი ელემენტიდან შეგვიძლია დავიწყოთ და გავიდეთ ნებისმიერ სხვა ელემეტნზე. ეს ყველაფერი კარგად ორგანიზებული ობიექტებით არის შესაძლებელი. განვიხილოთ რამოდენიმე ძირითადი თვისება, რომელიც დაგეხამრება ნავიგაციაში.

parentNode

parentNode თვისება გვიბრუნებს ამოღებული ელემენტის მშობელ ელემენტს. თუ ელემენტი ახალი შექმნილია და ჯერ არცეთ ელემენტზე არ არის დამატებული, მაშინ მისი მშობელი ელემენტი null გამოდის. სხვა შემთხვევაში, დაბრუნებული ელემენტი არის Node ტიპის.

childNodes

childNodes თვისება აბრუნებს ყოველ შვილობილ ელემენტს, მათ შორის კომენტარსაც კი. დაბრუნებული მნიშვნელობა არის NodeList ტიპის.

children

children თვისება აბრუნებს ყოველ შვილობილ ელემენტს გარდა კომენტარებისა. დაბრუნებული მნიშვნელობა არის HTMLCollection ტიპის.

firstElementChild

firstElementChild თვისება აბრუნებს პირველ შვილობილ ელემენტს, თუ ის არ არსებობს, დააბრუნებს null-ს. დაბრუნებული ელემენტი არის Element ტიპის.

lastElementChild

lastElementChild თვისება აბრუნებს ბოლო შვილობილ ელემენტს. თუ ის არ არსებობს - დააბრუნებს null-ს. დაბრუნებული ელემენტი არის Element ტიპის.

nextElementSibling

nextElementSibling აბრუნებს შემდგომი ელემენტის მნიშვნელობას, თუ ბოლო ელემენტია, დააბრუნებს null-ს. დაბრუნებული ელემენტი არის Element ტიპის.

previousElementSibling

previousElementSibling აბრუნებს წინა ელემენტის მნიშვნელობას, თუ ის თავად არის პირველი ელემენტი, დააბრუნებს null. დაბრუნებული ელემენტი არის Element ტიპის.

განვიხილოთ თითოეული თვისების მაგალითები:

HTML
<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>
JS
const parent = document.querySelector('#parent');
const child = document.querySelector('#child2');
console.log(parent.childNodes); // [ #text, <div id="child1"></div>, #text, <div id="child2"></div>, #text, <div id="child3"></div>, #text ]
console.log(parent.children); // [ <div id="child1"></div>, <div id="child2"></div>, <div id="child3"></div> ]
console.log(parent.firstElementChild); // <div id="child1"></div>
console.log(parent.lastElementChild); // <div id="child3"></div>
console.log(child.parentNode); // <div id="parent">...</div>
console.log(child.parentnextElementSiblingNode); // <div id="child3"></div>
console.log(child.previousElementSibling); // <div id="child1"></div>

შეჯამება

ამ თავში მიმოვიხილეთ სელექტორები და მათი გამოყენების ნიმუშები. ხშირ შემთხვევაში გამოიყენებთ შემდეგ მეთოდებს: querySelector, querySelectorAll, getElementById, getElementsByName. querySelector-ს გამოიყენებთ როცა ერთი ელემენტის ამოღება გსურთ, querySelectorAll-ს გამოიყენებთ მაშინ როცა ბევრი ერთნაირი ელემენტის ამოღება გსურთ, getElementById-ს გამოიყენებთ მაშინ, როცა id გაქვთ და პირდაპირ ელემენტის ამოღება გინდათ ზედმეტი პრეფიქსის გარეშე, ხოლო getElementsByName-ს - მაშინ როცა name ატრიბუტით გსურთ მიწვდეთ ელემენტებს. თუ გვსურს ნავიგაცია, შეგვიძლია გამოვიყენოთ კვანძის ელემენტების თვისებები.

იხილეთ სამაგალითო კოდები playground-ში.