ელემენტების ნულიდან შექმნა (ვიდეო ვერსია)

აქამდე ძალიან ბევრ უკვე არსებულ
ელემენტს ვცვლიდით გვერდზე.

მაგრამ როგორ უნდა დავუმატოთ გვერდს
ახალი ელემენტები?

ამის გაკეთება შეგვიძლია 'innerHTML'-ით
HTML-ს თეგების წერით

სხვადასხვა ხაზებში.

ამან შეიძლება ცოტა არიოს სიტუაცია,

განსაკუთრებით თუ ბევრი თეგის დაწერა გინდა,
სხვადასხვა ატრიბუტებით, სტილებით და კლასებით.

ამითომ, შეგვიძლია

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

დავუშვათ, ამ გვერდზე კატის სურათის
დამატება გვინდა.

იმიტომ რომ გვგონია, რომ ჯერ კიდევ
საკმარისად ბევრი არ არის.

პირველ რიგში ახალი ელემენტი
უნდა შევქმნათ, ხომ სწორია?

სწორია.

დავიწყოთ ელემენტის შესანახი ცვლადის
შექმნით. დავარქვათ მას catEI

შემდეგ უნდა გამოვიყენოთ
`document.createElement`,

და ჩავსვათ თეგის სახელი, რომელსაც ვქმნით
ამ შემთხვევაში img.

ახლა წარმოიდგინე, რომ ბრაუზერმა
შექმნა სურათის თეგი

და ახლა ეს სურათის თეგი სადღაც სივრცეში
ტივტივებს

ამიტომ ახლა უნდა მივანიჭოთ მას წყარო

catEl.src =

და უბრალოდ ჩავსვათ წყარო აქედან

და... ჰო, უნდა დავუმატოთ alt, რომ
სურათი უფრო ადვილად მისაწვდომი იყოს

alt თეგები ყოველთვის უნდა გვქონდეს სურათებზე

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

აქვს src და ასევე alt თეგები
"Photo of cute cat/საყვარელი კათის სურათი"

ოქეი, ეს გავაკეთეთ JavaScript-ით.

თუმცა თეგი ჯერ კიდევ ტივიტვებს
სივრცეში,

იმიტომ რომ არ გვითქვამს ბრაუზერისთვის,
სად უნდა წაიღოს იგი.

ჩვენს DOM-ში უამრავი ადგილია, სადაც
მისი მოთავსება შეიძლება.

ყველაზე მარტივად რომ ვქნათ, გამოვაჩინოთ
ეს სურათი გვერდის ბოლოს.

დავაჭიროთ თეგის ბოლოს

და დავწეროთ:
`document.body.appendChild(catEl);`

აი, ისიც!

საკმაოდ დიდია.

და ცოტა საშიშად გამოიყურება.

ახლა შეგიძლია გამოიძახო appendChild
გვერდის ნებისმიერი DOM კვანძზე

და ეს შესულ ელემენტს ამ კვანძის
ბოლო ელემენტად აქცევს.

აი ასეთ შემთხვევებში ნამდვილად სასარგებლოა
DOM-ის ხის სახით გამოსახვა

თეგი არის ამ ხის კვანძი
და მას რამდენიმე განყოფილება აქვს

მაგალითად ` და``,

და ახლა ბოლოს კიდევ ერთს ვუმატებთ.

მოკლედ ეს გადმოვა თეგის მერე,
აი, აქ.

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

DOM-ის ნებისმიერ ნაწილში.

ჩვენ უბრალოდ ის ყველაზე მარტივ და
ადვილად მისაგნებ ადგილას მოვათავსეთ.

გავაკეთოთ კიდევ ერთი მაგალითი.

აქ ჩვენ გამოვიყენეთ innerHTML იმისთვის,
რომ თეგებში ჩაგვესვა

თუმცა შეგვიძლია გამოვიყენოთ createElement

[ბეჭდავს]

ჰმ, ბეჭდური შეცდომა დავუშვი.
მართლწერა აქ ძალიან მნიშვნელოვანია.

ასე შევქმენით ცარიელი თეგი ,
რომელიც სადღაც სივრცეშია.

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

strongEl.textContent = "cat";

ხომ სწორია?

შეგვეძლო კიდევ შეგვექმნა

textNode

DOM-ის ბევრ კვანძს შეიძლება სპეციალური
textNode ჰქონდეს

და ეს კვანძები ცალკე ელემენტები კი არა,
მაინც DOM-ის კვანძებად რჩება.

რეალურად მათ ფოთლის კვანძებს ვეძახით

იმიტომ რომ ესენი ხის უკანასკნელი ელემენტებია.

[ბეჭდავს]

მოკლედ, ჩავწერთ ტექსტი "cat"

ახლა ჩვენ

შევქმენით ორი კვანძი, რომელიც უმისამართოდ
მდებარეობს სივრცეში: თეგი

და ეს textNode, რომელიც უბრალოდ გვეუბნება
"cat"-ს

ახლა კი ისინი ერთმანეთს უნდა დავუკავშიროთ.

და უნდა იყოს "cat"-ის მშობელი.

ამისთვის უნდა ჩავწეროთ
`strongEl.appendChild(strongText);`

მოკლედ, გვაქვს თეგი
რომელიც მოიცავს კვანძს "cat" .

ახლა კი სადმე უნდა ჩავსვათ ეს, მივუჩინოთ
ადგილი ამ კოდში და ვებ-გვერდზე.

ახლა ვართ ციკლში "for", რომელიც შექმნილია
ელემენტისთვის nameEls

სწორედ ყოველი nameEls-ს გვინდა, რომ
გადაებას თეგს

გამოვა ასე:
`nameEls[i].appendChild(strongEl);`

ახლა სურათს ორჯერ ვხედავთ, იმიტომ
რომ წინა გზით გაკეთებულიც დავტოვე.

მოკლედ, ეს გადაება თეგს ,
რომელიც უკვე შეიცავს თეგს.

ეს ხაზი შეიძლება შევცვალოთ ასე:
innerHTML უდრის ცარიელ ხაზს

რაც ეფექტურად მოაშორებს სპანს,
სანამ მას რამეს მივუმაგრებთ.

როგორც ხედავ, ამ მეთოდს კოდის მეტი ხაზი
დასჭირდა, ვიდრე innerHTML-ს.

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

ბევრ დეველოპერს დოკუმენტის ასე შეცვლა არ
მოსწონს,

იმიტომ რომ მეტი კოდის წერა უწევთ.

უმეტესობა ბიბლიოთეკებს იყენებს, მაგალითად
jQuery-ს.

შემდეგ კი ცვლიან DOM-ს.

ასე იგივე კოდში შენ, როგორც დეველოპერს,
გაცილებით ნაკლები ხაზის წერა გიწევს,

იმიტომ რომ ბიბლიოთეკის ფუნქციებს იყენებს.

მე კიდევ საკმაოდ მომწონს ასე წერა,

იმიტომ რომ ზუსტად ვხედავ, როგორც ვცვლი
DOM-ს, ხაზს ხაზის შემდეგ,

ასე თითტოს უფრო ცხადია ყველაფერი, ვიდრე
innerHTML-ის ერთ ხაზში.

შეიძლება, შენ არ მეთანხმები,

მაგრამ, მთავარია, იცი, რომ ეს გზაც არსებობს.

თუ დაგჭირდა, შეძლებ გამოიყენო და გაიგო,

რა ხდება "სცენის მიღმა" jQuery -ის მსგავს
ბიბლიოთეკებში.