ელემენტების პოვნა CSS სელექტორით (ვიდეო ვერსია)

ახლა კოდში ელემენტების მოპოვების
ძალიან ბევრი ხერხი იცი.

და ისინი ძალიან ხშირად გამოგადგება.

მაგრამ კიდევ ერთი უნდა ისწავლო,
რეალურად, ყველაზე მაგარი:

ელემენტების მოძებნა CSS სელექტორზე დაყრდნობით.

გახსოვს CSS სელექტორები?

ესე იგი, თეგის სახელით ძებნა,

ID-ით ძებნა,

ან კლასის მიხევით ძებნა.

მაგრამ კიდევ უფრო დახვეწილი
სელექტორებიც არსებობს.

მაგალითად, კლების სელექტორი, ატრიბურის,
კლასი + ელემენტი...

კარგი იქნებოდა, რომ გაგეხენებინა
CSS სელექტორები,

თუ არ გახსოვს.

მაგალითად, მინდა შევუცვალო სტილი
მხოლოდ ელემენტებს

კლასიდან "animal/ცხვოელი" და მდებარეობით
პარაგრაფის შიგნით.

ჩავწეროთ თეგი

შემდეგ კი ჩავწეროთ p

და გამოვტოვთო ერთი ადგილი,
ასე ვაჩვენებთ რომ ვეძებთ პარაგრაფებში

შემდეგ .animal, რომ ვაჩენოთ: ვეძებთ
ყველა ელემენტს

კლასიდან "animal"

და... უბრალოდ გამოვყოთ ისინი წითლად.

მშვენიერია.

შემიძლია გამოვიყენო იგივე CSS სელექტორი
ელემენტების JavaScrip-ში საპოვნელად

მეთოდით `document.querySelectorAll()`

ახლა მე შევცვლი ამ ხაზს.

CSS სელექტორი უნდა ჩავსვა, როგორც
არგუმენტი

როგორც ცალკე ხაზი ბრჭყალებში.

პარაგრაფი ისევ კატების შესახებაა..

ამ ფუნქციაში ნებისმიერი
CSS სელექტორის ჩასმა შეგიძლიათ;

ის დაგიბრუნებთ ელემენტების კოლექციას

და მერე მათი ციკლის შექმნა შეგიძლიათ.

გახსოვს, როგორ ვთქვით მაშინ,

რომ `getElementsByTagName()`
აბრუნებს HTML კოლექციას,

რომელიც ჰგავს მასივს?

ეს მეთოდის აბრუნებს `NodeList`-ს,
რომელიც ასევე ძალიან ჰგავს მასივს,

იმით, რომ შეგვიძლია გამოვიყენოთ ფრჩხილები,
გაზომო სიგრძე და ა.შ.

და თუ NodeList-ს და HTMLCollection-ს
შორის სხვაობას დიდად ვერ შეამჩნევთ,

თუ ამ ორ მეთოდს იყენებთ.

მაგრამ შეგიძლია დაძებნო მათ შესახებ მეტი
ინფორმაცია, თუ გაინტერესებს.

კიდევ არსებობს მეთოდი, რომელიც
დაძებნის CSS სელექტორებში

და დააბრუნებს მხოლოდ ერთ ელემეტს,

თუ შენი CSS სელექტორი მხოლოდ ერთს აბრუნებს

სინამდვილეში, ის ძალიანაც სასარგებლო არ არის

იმიტომ რომ ძირითადად თუ ერთ ელემენტს ეძებ
მაშინ ID გაქვს,

მაგრამ მაინც გაჩვენებ,
ყოველი შემთხვევისთვის

`getElementById`-ის მაგივრად შემიძლია
ვთქვა

`document.querySelector("`

და მერე, იმისთვის, რომ ნამდვილი ძებნა გამოვიდეს
და მოგვცეს ID, უბრალოდ დავუმატებ #-ს

აი.

როგორც ხედავ, ეს მართლა ჰგავს
`querySelectorAll()`-ს

ოღონდ მხოლოდ ერთ ელემენტს ვირჩევთ,
ამიტომ უბრალოდ `querySelector()' გვაქვს

და ვსვამთ მასში იმ CSS სელექტორს,
რომლის ერთ ელემტსაც ვეძებთ.

როდის შეიძლება გამოიყენო ეს
მეთოდები?

პირველები უფრო ეფექტურია ხოლმე

ამიტომ გირჩევ, ყოველთვის გამოიყენო,
როცა კი შეძლებ.

მაგრამ თუ კომპლექსური CSS სელექტორი
გჭირდება

და ესენი არ გამოდგება,
მაშინ `querySelectorAll()` გამოიყენე.

სცადეთ ამის გაკეთება შემდეგ ამოცანაში.

და მოემზადეთ - ვებ-გვერდზე მუშაობის
კიდევ რამდენიმე მეთოდს უნდა გაეცნოთ.