WEBVTT

00:00:00.000 --> 00:00:09.980
ამ ვიდეოში ხშირად გაიგონებთ 
სიტყვას - DOM.

00:00:09.980 --> 00:00:15.502
DOM აღნიშნავს დოკუმენტის ობიექტურ მოდელს.

00:00:15.502 --> 00:00:18.907
ის აღნიშნავს ბრაუზერის თვისებას, რომელიც
საშუალებას გვაძლევს,

00:00:18.907 --> 00:00:21.637
ვმანიპულიროთ ვებ გვერდები
ჯავასკრიპტის მეშვეობით.

00:00:21.637 --> 00:00:26.726
როდესაც ბრაუზერი ტვირთავს ვებ გვერდს,
იგი აანალიზებს მთელ HTML-სა და CSS-ს,

00:00:26.726 --> 00:00:30.236
და გარდაქმნის დოკუმენტს DOM-ად.

00:00:30.236 --> 00:00:33.538
DOM რეალურად არის ჯავასკრიპტის
დიდი ობიექტი

00:00:33.538 --> 00:00:43.229
რომელიც შეიცავს ყველაფერს, რისი ცოდნაც
ან შეცვლა დაგვჭირდება ვებ გვერდზე.

00:00:43.229 --> 00:00:46.980
იმისთვის, რომ ჯავასკრიპტის მეშვეობით
ვებ გვერდის DOM-ზე წვდომა გვქონდეს

00:00:46.980 --> 00:00:52.913
ჩვენ ვიყენებთ გლობალურ ცვლადს 'document'
და შემდეგ ვიყენებთ თვისებებს

00:00:52.913 --> 00:00:57.520
და გამოძახების ფუნქციებს, რომლებიც
მიბმულები არიან ობიექტთან.

00:00:57.520 --> 00:01:04.226
ძირითადი სრატეგია DOM-ის მანიპულირებისთვის
შედგება 2 ნაბიჯისგან.

00:01:04.226 --> 00:01:14.759
მოდი, ჩამოვწერ.

00:01:14.759 --> 00:01:17.823
მოდი, სათითაოდ განვიხილოთ
ყოველი ნაბიჯი.

00:01:17.823 --> 00:01:23.493
პირველი ნაბიჯი არის DOM-ის კვანძის
პოვნა წვდომის მეთოდის გამოყენებით.

00:01:23.493 --> 00:01:28.969
თუ ჩვენ ვეძებთ  თეგს, ჩვენ
შეგვიძლია ძალიან მარტივად მივწვდეთ მას.

00:01:28.969 --> 00:01:33.504
უბრალოდ 'document.body'-ს აკრეფით.

00:01:33.504 --> 00:01:39.000
მეორე ნაბიჯი კი არის DOM-ის კვანძით
მანიპულირება, რომელიც უკვე ვიპოვეთ.

00:01:39.000 --> 00:01:43.386
ჩვენ შეგვიძლია შევცვალოთ მისი თვისებები,
სტილი, შიდა HTML,

00:01:43.386 --> 00:01:46.054
დავურთოთ ახალი კვანძები და ა.შ.

00:01:46.054 --> 00:01:50.495
თუ ჩვენ უბრალოდ გვინდა მთლიანი
თეგის შიგთავსის შეცვლა,

00:01:50.495 --> 00:01:53.758
ჩვენ შეგვიძლია გამოვიყენოთ 'innerHTML'
თვისება.

00:01:53.758 --> 00:02:01.763
თუ,`document.body.innerHTML = 
"Webpage be gone!"

00:02:01.763 --> 00:02:05.764
ბრაუზერი აკვირდება
დოკუმენტის ცვლილებებს

00:02:05.764 --> 00:02:10.184
და როგორც კი შეამჩნევს document.body-ს
შიდა HTML-ის ცვლილებას,

00:02:10.184 --> 00:02:13.450
ბრაუზერი ასახავს მას რეალურ დოკუმენტში.

00:02:13.450 --> 00:02:17.778
დაიმახსოვრეთ, დოკუმენტის ობიექტი
არ არის რეალური ვებ გვერდი,

00:02:17.778 --> 00:02:24.029
მაგრამ ბრაუზერი ცდილობს, რომ DOM-მა
მაქსიმალურად ასახოს მიმდინარე გვერდი.

00:02:24.029 --> 00:02:28.609
პირველი ნაბიჯის გაკეთების უამრავი ხერხია.

00:02:28.609 --> 00:02:32.794
ხშირად, ჩვენ გვინდა body თეგის გარდა
სხვა რაღაცის პოვნაც.

00:02:32.794 --> 00:02:34.993
შეიძლება გვინდოდეს
რაღაცის პოვნა ID-ს მიხედვით

00:02:34.993 --> 00:02:37.663
ან კონკრეტული თვისების მქონე თეგის პოვნა

00:02:37.663 --> 00:02:41.772
სწორედ ამაზე ვილაპარაკებთ DOM-ის
წვდომის მეთოდების ვიდეოებში.

00:02:41.772 --> 00:02:45.290
ასევე ბევრი საინტერესო რამის გაკეთება
შეგვიძლია მეორე ნაბიჯშიც.

00:02:45.290 --> 00:02:49.135
მაგალითად, თვისებების ან სტილების შეცვლა
იმ თეგებისა, რომლებსაც იპოვი.

00:02:49.135 --> 00:02:52.901
ამაზე ვისაუბრებთ DOM-ის ცვლილებების
ვიდეოებში.

00:02:52.901 --> 00:02:55.781
როდესაც ისწავლით DOM-ის წვდომასა
და მის შეცვლას

00:02:55.781 --> 00:02:58.765
უფრო საინტერესო რამეებს ვისწავლით

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

00:03:02.735 --> 00:03:06.657
ამჟამად, ძალიან სულელურად ვიყენებთ
ჯავასკრიპტს.

00:03:06.657 --> 00:03:10.253
ამის გაკეთება HTML-ითაც შეგვეძლო.

00:03:10.253 --> 00:03:14.977
მაგრამ მერწმუნეთ, თქვენ მოგინდებათ
DOM-ის წვდომის და DOM-ის შეცვლის სწავლა.

00:03:14.977 --> 00:03:18.893
რათა შემდგომ სრული ინტერაქტიული
გამოცდილება მიიღოთ.

00:03:18.893 --> 00:03:25.277
კიდევ შევხვდებით.