WEBVTT

00:00:02.084 --> 00:00:06.101
ახლა კოდში ელემენტების მოპოვების
ძალიან ბევრი ხერხი იცი.

00:00:06.101 --> 00:00:08.645
და ისინი ძალიან ხშირად გამოგადგება.

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

00:00:12.492 --> 00:00:18.070
ელემენტების მოძებნა CSS სელექტორზე დაყრდნობით.

00:00:18.070 --> 00:00:20.384
გახსოვს CSS სელექტორები?

00:00:20.384 --> 00:00:24.562
ესე იგი, თეგის სახელით ძებნა,

00:00:24.562 --> 00:00:26.170
ID-ით ძებნა,

00:00:26.170 --> 00:00:27.518
ან კლასის მიხევით ძებნა.

00:00:27.518 --> 00:00:30.027
მაგრამ კიდევ უფრო დახვეწილი 
სელექტორებიც არსებობს.

00:00:30.027 --> 00:00:35.333
მაგალითად, კლების სელექტორი, ატრიბურის,
კლასი + ელემენტი...

00:00:35.333 --> 00:00:38.547
კარგი იქნებოდა, რომ გაგეხენებინა
CSS სელექტორები,

00:00:38.547 --> 00:00:40.643
თუ არ გახსოვს.

00:00:40.643 --> 00:00:45.642
მაგალითად, მინდა შევუცვალო სტილი
მხოლოდ ელემენტებს

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

00:00:50.765 --> 00:00:54.606
ჩავწეროთ თეგი 

00:00:54.606 --> 00:00:57.124
შემდეგ კი ჩავწეროთ p

00:00:57.124 --> 00:01:01.532
და გამოვტოვთო ერთი ადგილი,
ასე ვაჩვენებთ რომ ვეძებთ პარაგრაფებში

00:01:01.532 --> 00:01:06.492
შემდეგ .animal, რომ ვაჩენოთ: ვეძებთ 
ყველა ელემენტს

00:01:06.492 --> 00:01:09.603
კლასიდან "animal"

00:01:09.603 --> 00:01:12.671
და... უბრალოდ გამოვყოთ ისინი წითლად.

00:01:12.671 --> 00:01:14.130
მშვენიერია.

00:01:14.130 --> 00:01:19.665
შემიძლია გამოვიყენო იგივე CSS სელექტორი 
ელემენტების JavaScrip-ში საპოვნელად

00:01:19.665 --> 00:01:24.944
მეთოდით `document.querySelectorAll()`

00:01:24.944 --> 00:01:30.323
ახლა მე შევცვლი ამ ხაზს.

00:01:30.323 --> 00:01:35.377
CSS სელექტორი უნდა ჩავსვა, როგორც 
არგუმენტი

00:01:35.377 --> 00:01:38.392
როგორც ცალკე ხაზი ბრჭყალებში.

00:01:38.392 --> 00:01:42.486
პარაგრაფი ისევ კატების შესახებაა..

00:01:42.486 --> 00:01:45.823
ამ ფუნქციაში ნებისმიერი 
CSS სელექტორის ჩასმა შეგიძლიათ;

00:01:45.823 --> 00:01:48.414
ის დაგიბრუნებთ ელემენტების კოლექციას

00:01:48.414 --> 00:01:50.883
და მერე მათი ციკლის შექმნა შეგიძლიათ.

00:01:50.883 --> 00:01:53.507
გახსოვს, როგორ ვთქვით მაშინ,

00:01:53.507 --> 00:01:57.617
რომ `getElementsByTagName()`
აბრუნებს HTML კოლექციას,

00:01:57.617 --> 00:01:59.998
რომელიც ჰგავს მასივს?

00:01:59.998 --> 00:02:06.710
ეს მეთოდის აბრუნებს `NodeList`-ს, 
რომელიც ასევე ძალიან ჰგავს მასივს,

00:02:06.710 --> 00:02:12.530
იმით, რომ შეგვიძლია გამოვიყენოთ ფრჩხილები, 
გაზომო სიგრძე და ა.შ.

00:02:12.530 --> 00:02:16.282
და თუ NodeList-ს და HTMLCollection-ს 
შორის სხვაობას დიდად ვერ შეამჩნევთ,

00:02:16.282 --> 00:02:20.029
თუ ამ ორ მეთოდს იყენებთ.

00:02:20.029 --> 00:02:24.375
მაგრამ შეგიძლია დაძებნო მათ შესახებ მეტი 
ინფორმაცია, თუ გაინტერესებს.

00:02:24.375 --> 00:02:28.924
კიდევ არსებობს მეთოდი, რომელიც
დაძებნის CSS სელექტორებში

00:02:28.924 --> 00:02:32.782
და დააბრუნებს მხოლოდ ერთ ელემეტს,

00:02:32.782 --> 00:02:35.061
თუ შენი CSS სელექტორი მხოლოდ ერთს აბრუნებს

00:02:35.061 --> 00:02:37.409
სინამდვილეში, ის ძალიანაც სასარგებლო არ არის

00:02:37.409 --> 00:02:40.458
იმიტომ რომ ძირითადად თუ ერთ ელემენტს ეძებ
მაშინ ID გაქვს,

00:02:40.458 --> 00:02:43.079
მაგრამ მაინც გაჩვენებ, 
ყოველი შემთხვევისთვის

00:02:43.079 --> 00:02:46.310
`getElementById`-ის მაგივრად შემიძლია 
ვთქვა

00:02:46.310 --> 00:02:48.577
`document.querySelector("`

00:02:48.577 --> 00:02:53.565
და მერე, იმისთვის, რომ ნამდვილი ძებნა გამოვიდეს
და მოგვცეს ID, უბრალოდ დავუმატებ #-ს


00:02:53.565 --> 00:02:54.520
აი.

00:02:54.520 --> 00:02:57.917
როგორც ხედავ, ეს მართლა ჰგავს
`querySelectorAll()`-ს

00:02:57.917 --> 00:03:01.547
ოღონდ მხოლოდ ერთ ელემენტს ვირჩევთ,
ამიტომ უბრალოდ `querySelector()' გვაქვს

00:03:01.547 --> 00:03:06.510
და ვსვამთ მასში იმ CSS სელექტორს,
რომლის ერთ ელემტსაც ვეძებთ.

00:03:06.510 --> 00:03:10.434
როდის შეიძლება გამოიყენო ეს 
მეთოდები?

00:03:10.434 --> 00:03:13.702
პირველები უფრო ეფექტურია ხოლმე

00:03:13.702 --> 00:03:15.734
ამიტომ გირჩევ, ყოველთვის გამოიყენო,
როცა კი შეძლებ.

00:03:15.734 --> 00:03:19.587
მაგრამ თუ კომპლექსური CSS სელექტორი
გჭირდება

00:03:19.587 --> 00:03:24.053
და ესენი არ გამოდგება,
მაშინ `querySelectorAll()` გამოიყენე.

00:03:24.053 --> 00:03:26.109
სცადეთ ამის გაკეთება შემდეგ ამოცანაში.

00:03:26.109 --> 00:03:31.273
და მოემზადეთ - ვებ-გვერდზე მუშაობის 
კიდევ რამდენიმე მეთოდს უნდა გაეცნოთ.