0:00:00.921,0:00:06.523
აქამდე ძალიან ბევრ უკვე არსებულ[br]ელემენტს ვცვლიდით გვერდზე.

0:00:06.523,0:00:09.909
მაგრამ როგორ უნდა დავუმატოთ გვერდს[br]ახალი ელემენტები?

0:00:09.909,0:00:15.075
ამის გაკეთება შეგვიძლია 'innerHTML'-ით[br]HTML-ს თეგების წერით

0:00:15.075,0:00:18.926
სხვადასხვა ხაზებში.

0:00:18.926,0:00:22.258
ამან შეიძლება ცოტა არიოს სიტუაცია,

0:00:22.258,0:00:25.540
განსაკუთრებით თუ ბევრი თეგის დაწერა გინდა,[br]სხვადასხვა ატრიბუტებით, სტილებით და კლასებით.

0:00:25.540,0:00:31.097
ამითომ, შეგვიძლია

0:00:31.097,0:00:35.393
ახალი ელემენტები ნულიდან შევქმნათ[br]და შემდეგ დავუმატოთ ისინი გვერდს.

0:00:35.393,0:00:40.685
დავუშვათ, ამ გვერდზე კატის სურათის [br]დამატება გვინდა.

0:00:40.685,0:00:44.018
იმიტომ რომ გვგონია, რომ ჯერ კიდევ[br]საკმარისად ბევრი არ არის.

0:00:44.018,0:00:48.620
პირველ რიგში ახალი  ელემენტი[br]უნდა შევქმნათ, ხომ სწორია?

0:00:48.620,0:00:50.786
სწორია.

0:00:50.786,0:00:55.980
დავიწყოთ ელემენტის შესანახი ცვლადის[br]შექმნით. დავარქვათ მას catEI

0:00:55.980,0:01:00.935
შემდეგ უნდა გამოვიყენოთ[br]`document.createElement`,

0:01:00.935,0:01:06.615
და ჩავსვათ თეგის სახელი, რომელსაც ვქმნით[br]ამ შემთხვევაში img.

0:01:06.615,0:01:12.065
ახლა წარმოიდგინე, რომ ბრაუზერმა[br]შექმნა სურათის თეგი

0:01:12.065,0:01:15.069
და ახლა ეს სურათის თეგი სადღაც სივრცეში[br]ტივტივებს

0:01:15.069,0:01:19.111
ამიტომ ახლა უნდა მივანიჭოთ მას წყარო

0:01:19.111,0:01:23.308
catEl.src =

0:01:23.308,0:01:29.376
და უბრალოდ ჩავსვათ წყარო აქედან

0:01:29.376,0:01:34.764
და... ჰო, უნდა დავუმატოთ alt, რომ [br]სურათი უფრო ადვილად მისაწვდომი იყოს

0:01:34.764,0:01:42.081
alt თეგები ყოველთვის უნდა გვქონდეს სურათებზე

0:01:42.081,0:01:47.178
ახლა ამ  თეგს, რომელიც ჩვენ შევქმენით

0:01:47.178,0:01:58.144
აქვს src და ასევე alt თეგები[br]"Photo of cute cat/საყვარელი კათის სურათი"

0:01:58.144,0:02:04.928
ოქეი, ეს გავაკეთეთ JavaScript-ით.

0:02:04.928,0:02:08.983
თუმცა  თეგი ჯერ კიდევ ტივიტვებს[br]სივრცეში,

0:02:08.983,0:02:11.764
იმიტომ რომ არ გვითქვამს ბრაუზერისთვის,[br]სად უნდა წაიღოს იგი.

0:02:11.764,0:02:15.832
ჩვენს DOM-ში უამრავი ადგილია, სადაც[br]მისი მოთავსება შეიძლება.

0:02:15.832,0:02:21.342
ყველაზე მარტივად რომ ვქნათ, გამოვაჩინოთ[br]ეს სურათი გვერდის ბოლოს.

0:02:21.342,0:02:26.304
დავაჭიროთ  თეგის ბოლოს

0:02:26.304,0:02:29.860
და დავწეროთ:[br]`document.body.appendChild(catEl);`

0:02:29.860,0:02:31.197
აი, ისიც!

0:02:31.197,0:02:32.711
საკმაოდ დიდია.

0:02:32.711,0:02:34.979
და ცოტა საშიშად გამოიყურება.

0:02:34.979,0:02:41.198
ახლა შეგიძლია გამოიძახო appendChild[br]გვერდის ნებისმიერი DOM კვანძზე

0:02:41.198,0:02:47.337
და ეს შესულ ელემენტს ამ კვანძის[br]ბოლო ელემენტად აქცევს.

0:02:47.337,0:02:52.115
აი ასეთ შემთხვევებში ნამდვილად სასარგებლოა[br]DOM-ის ხის სახით გამოსახვა

0:02:52.115,0:02:57.873
თეგი  არის ამ ხის კვანძი[br]და მას რამდენიმე განყოფილება აქვს

0:02:57.873,0:03:00.076
მაგალითად ` და``,

0:03:00.076,0:03:04.395
და ახლა ბოლოს კიდევ ერთს ვუმატებთ.

0:03:04.395,0:03:09.074
მოკლედ ეს გადმოვა  თეგის მერე,[br]აი, აქ.

0:03:09.074,0:03:13.320
DOM მეთოდების გამოყენებით თეორიულად[br]უნდა შეგეძლოს მიამაგრო ელემენტები

0:03:13.320,0:03:15.531
DOM-ის ნებისმიერ ნაწილში.

0:03:15.531,0:03:19.447
ჩვენ უბრალოდ ის ყველაზე მარტივ და [br]ადვილად მისაგნებ ადგილას მოვათავსეთ.

0:03:19.447,0:03:22.016
გავაკეთოთ კიდევ ერთი მაგალითი.

0:03:22.016,0:03:28.283
აქ ჩვენ გამოვიყენეთ innerHTML იმისთვის,[br]რომ  თეგებში ჩაგვესვა

0:03:28.283,0:03:31.443
თუმცა შეგვიძლია გამოვიყენოთ createElement

0:03:31.443,0:03:33.159
[ბეჭდავს]

0:03:39.622,0:03:43.824
ჰმ, ბეჭდური შეცდომა დავუშვი.[br]მართლწერა აქ ძალიან მნიშვნელოვანია.

0:03:43.824,0:03:48.663
ასე შევქმენით ცარიელი თეგი ,[br]რომელიც სადღაც სივრცეშია.

0:03:48.663,0:03:51.879
პირველ რიგში უნდა განვსაზღვროთ მისთვის ტექსტი:

0:03:51.879,0:03:56.573
strongEl.textContent = "cat";

0:03:56.573,0:03:57.746
ხომ სწორია?

0:03:57.746,0:04:01.816
შეგვეძლო კიდევ შეგვექმნა

0:04:01.816,0:04:04.581
textNode

0:04:04.581,0:04:10.204
DOM-ის ბევრ კვანძს შეიძლება სპეციალური[br]textNode ჰქონდეს

0:04:10.204,0:04:14.998
და ეს კვანძები ცალკე ელემენტები კი არა,[br]მაინც DOM-ის კვანძებად რჩება.

0:04:14.998,0:04:17.541
რეალურად მათ ფოთლის კვანძებს ვეძახით

0:04:17.541,0:04:20.077
იმიტომ რომ ესენი ხის უკანასკნელი ელემენტებია.

0:04:20.077,0:04:21.736
[ბეჭდავს]

0:04:27.548,0:04:31.816
მოკლედ, ჩავწერთ ტექსტი "cat"

0:04:31.816,0:04:34.496
ახლა ჩვენ

0:04:34.496,0:04:42.169
შევქმენით ორი კვანძი, რომელიც უმისამართოდ[br]მდებარეობს სივრცეში: თეგი

0:04:42.169,0:04:46.547
და ეს textNode, რომელიც უბრალოდ გვეუბნება[br]"cat"-ს

0:04:46.547,0:04:49.680
ახლა კი ისინი ერთმანეთს უნდა დავუკავშიროთ.

0:04:49.680,0:04:54.910
და  უნდა იყოს "cat"-ის მშობელი.

0:04:54.910,0:05:03.152
ამისთვის უნდა ჩავწეროთ[br]`strongEl.appendChild(strongText);`

0:05:03.152,0:05:12.114
მოკლედ, გვაქვს თეგი [br]რომელიც მოიცავს კვანძს "cat" .

0:05:12.114,0:05:18.582
ახლა კი სადმე უნდა ჩავსვათ ეს, მივუჩინოთ[br]ადგილი ამ კოდში და ვებ-გვერდზე.

0:05:18.582,0:05:24.527
ახლა ვართ ციკლში "for", რომელიც შექმნილია[br]ელემენტისთვის nameEls

0:05:24.527,0:05:27.354
სწორედ ყოველი nameEls-ს გვინდა, რომ[br]გადაებას თეგს

0:05:27.354,0:05:34.975
გამოვა ასე:[br]`nameEls[i].appendChild(strongEl);`

0:05:34.975,0:05:42.195
ახლა სურათს ორჯერ ვხედავთ, იმიტომ [br]რომ წინა გზით გაკეთებულიც დავტოვე.

0:05:42.195,0:05:47.335
მოკლედ, ეს გადაება თეგს ,[br]რომელიც უკვე შეიცავს  თეგს.

0:05:47.335,0:05:52.434
ეს ხაზი შეიძლება შევცვალოთ ასე:[br]innerHTML უდრის ცარიელ ხაზს

0:05:52.434,0:05:57.817
რაც ეფექტურად მოაშორებს სპანს,[br]სანამ მას რამეს მივუმაგრებთ.

0:05:57.817,0:06:04.925
როგორც ხედავ, ამ მეთოდს კოდის მეტი ხაზი[br]დასჭირდა, ვიდრე innerHTML-ს.

0:06:04.925,0:06:06.991
შეიძლება, გაინტერესებს, საერთოდ რატომ[br]გამოვიყენეთ ის?

0:06:06.991,0:06:11.099
ბევრ დეველოპერს დოკუმენტის ასე შეცვლა არ[br]მოსწონს,

0:06:11.099,0:06:13.433
იმიტომ რომ მეტი კოდის წერა უწევთ.

0:06:13.433,0:06:16.714
უმეტესობა ბიბლიოთეკებს იყენებს, მაგალითად[br]jQuery-ს.

0:06:16.714,0:06:21.352
შემდეგ კი ცვლიან DOM-ს.

0:06:21.352,0:06:26.873
ასე იგივე კოდში შენ, როგორც დეველოპერს, [br]გაცილებით ნაკლები ხაზის წერა გიწევს,

0:06:26.873,0:06:29.310
იმიტომ რომ ბიბლიოთეკის ფუნქციებს იყენებს.

0:06:29.310,0:06:33.366
მე კიდევ საკმაოდ მომწონს ასე წერა,

0:06:33.366,0:06:38.666
იმიტომ რომ ზუსტად ვხედავ, როგორც ვცვლი[br]DOM-ს, ხაზს ხაზის შემდეგ,

0:06:38.666,0:06:43.043
ასე თითტოს უფრო ცხადია ყველაფერი, ვიდრე[br]innerHTML-ის ერთ ხაზში.

0:06:43.043,0:06:44.772
შეიძლება, შენ არ მეთანხმები,

0:06:44.772,0:06:47.188
მაგრამ, მთავარია, იცი, რომ ეს გზაც არსებობს.

0:06:47.188,0:06:50.939
თუ დაგჭირდა, შეძლებ გამოიყენო და გაიგო,

0:06:50.939,0:06:55.064
რა ხდება "სცენის მიღმა" jQuery -ის მსგავს[br]ბიბლიოთეკებში.