1
00:00:00,000 --> 00:00:09,980
ამ ვიდეოში ხშირად გაიგონებთ 
სიტყვას - DOM.

2
00:00:09,980 --> 00:00:15,502
DOM აღნიშნავს დოკუმენტის ობიექტურ მოდელს.

3
00:00:15,502 --> 00:00:18,907
ის აღნიშნავს ბრაუზერის თვისებას, რომელიც
საშუალებას გვაძლევს,

4
00:00:18,907 --> 00:00:21,637
ვმანიპულიროთ ვებ გვერდები
ჯავასკრიპტის მეშვეობით.

5
00:00:21,637 --> 00:00:26,726
როდესაც ბრაუზერი ტვირთავს ვებ გვერდს,
იგი აანალიზებს მთელ HTML-სა და CSS-ს,

6
00:00:26,726 --> 00:00:30,236
და გარდაქმნის დოკუმენტს DOM-ად.

7
00:00:30,236 --> 00:00:33,538
DOM რეალურად არის ჯავასკრიპტის
დიდი ობიექტი

8
00:00:33,538 --> 00:00:43,229
რომელიც შეიცავს ყველაფერს, რისი ცოდნაც
ან შეცვლა დაგვჭირდება ვებ გვერდზე.

9
00:00:43,229 --> 00:00:46,980
იმისთვის, რომ ჯავასკრიპტის მეშვეობით
ვებ გვერდის DOM-ზე წვდომა გვქონდეს

10
00:00:46,980 --> 00:00:52,913
ჩვენ ვიყენებთ გლობალურ ცვლადს 'document'
და შემდეგ ვიყენებთ თვისებებს

11
00:00:52,913 --> 00:00:57,520
და გამოძახების ფუნქციებს, რომლებიც
მიბმულები არიან ობიექტთან.

12
00:00:57,520 --> 00:01:04,226
ძირითადი სრატეგია DOM-ის მანიპულირებისთვის
შედგება 2 ნაბიჯისგან.

13
00:01:04,226 --> 00:01:14,759
მოდი, ჩამოვწერ.

14
00:01:14,759 --> 00:01:17,823
მოდი, სათითაოდ განვიხილოთ
ყოველი ნაბიჯი.

15
00:01:17,823 --> 00:01:23,493
პირველი ნაბიჯი არის DOM-ის კვანძის
პოვნა წვდომის მეთოდის გამოყენებით.

16
00:01:23,493 --> 00:01:28,969
თუ ჩვენ ვეძებთ  თეგს, ჩვენ
შეგვიძლია ძალიან მარტივად მივწვდეთ მას.

17
00:01:28,969 --> 00:01:33,504
უბრალოდ 'document.body'-ს აკრეფით.

18
00:01:33,504 --> 00:01:39,000
მეორე ნაბიჯი კი არის DOM-ის კვანძით
მანიპულირება, რომელიც უკვე ვიპოვეთ.

19
00:01:39,000 --> 00:01:43,386
ჩვენ შეგვიძლია შევცვალოთ მისი თვისებები,
სტილი, შიდა HTML,

20
00:01:43,386 --> 00:01:46,054
დავურთოთ ახალი კვანძები და ა.შ.

21
00:01:46,054 --> 00:01:50,495
თუ ჩვენ უბრალოდ გვინდა მთლიანი
თეგის შიგთავსის შეცვლა,

22
00:01:50,495 --> 00:01:53,758
ჩვენ შეგვიძლია გამოვიყენოთ 'innerHTML'
თვისება.

23
00:01:53,758 --> 00:02:01,763
თუ,`document.body.innerHTML = 
"Webpage be gone!"

24
00:02:01,763 --> 00:02:05,764
ბრაუზერი აკვირდება
დოკუმენტის ცვლილებებს

25
00:02:05,764 --> 00:02:10,184
და როგორც კი შეამჩნევს document.body-ს
შიდა HTML-ის ცვლილებას,

26
00:02:10,184 --> 00:02:13,450
ბრაუზერი ასახავს მას რეალურ დოკუმენტში.

27
00:02:13,450 --> 00:02:17,778
დაიმახსოვრეთ, დოკუმენტის ობიექტი
არ არის რეალური ვებ გვერდი,

28
00:02:17,778 --> 00:02:24,029
მაგრამ ბრაუზერი ცდილობს, რომ DOM-მა
მაქსიმალურად ასახოს მიმდინარე გვერდი.

29
00:02:24,029 --> 00:02:28,609
პირველი ნაბიჯის გაკეთების უამრავი ხერხია.

30
00:02:28,609 --> 00:02:32,794
ხშირად, ჩვენ გვინდა body თეგის გარდა
სხვა რაღაცის პოვნაც.

31
00:02:32,794 --> 00:02:34,993
შეიძლება გვინდოდეს
რაღაცის პოვნა ID-ს მიხედვით

32
00:02:34,993 --> 00:02:37,663
ან კონკრეტული თვისების მქონე თეგის პოვნა

33
00:02:37,663 --> 00:02:41,772
სწორედ ამაზე ვილაპარაკებთ DOM-ის
წვდომის მეთოდების ვიდეოებში.

34
00:02:41,772 --> 00:02:45,290
ასევე ბევრი საინტერესო რამის გაკეთება
შეგვიძლია მეორე ნაბიჯშიც.

35
00:02:45,290 --> 00:02:49,135
მაგალითად, თვისებების ან სტილების შეცვლა
იმ თეგებისა, რომლებსაც იპოვი.

36
00:02:49,135 --> 00:02:52,901
ამაზე ვისაუბრებთ DOM-ის ცვლილებების
ვიდეოებში.

37
00:02:52,901 --> 00:02:55,781
როდესაც ისწავლით DOM-ის წვდომასა
და მის შეცვლას

38
00:02:55,781 --> 00:02:58,765
უფრო საინტერესო რამეებს ვისწავლით

39
00:02:58,765 --> 00:03:02,735
მაგალითად, მომხმარებელთან ინტერაქციას
და ანიმაციის გაკეთებას.

40
00:03:02,735 --> 00:03:06,657
ამჟამად, ძალიან სულელურად ვიყენებთ
ჯავასკრიპტს.

41
00:03:06,657 --> 00:03:10,253
ამის გაკეთება HTML-ითაც შეგვეძლო.

42
00:03:10,253 --> 00:03:14,977
მაგრამ მერწმუნეთ, თქვენ მოგინდებათ
DOM-ის წვდომის და DOM-ის შეცვლის სწავლა.

43
00:03:14,977 --> 00:03:18,893
რათა შემდგომ სრული ინტერაქტიული
გამოცდილება მიიღოთ.

44
00:03:18,893 --> 00:03:25,277
კიდევ შევხვდებით.