ელემენტების პოვნა იდენტიფიკატორის გამოყენებით

მოცემული გვაქვს ეს ვებ გვერდი
"All about dogs". ეს მშვენიერია, მაგრამ

მე უფრო კატები მომწონს. ვიცი ყველა
არ დამეთანხმება. მე მინდა

გადავაკეთო ეს ვებგვერდი
"All about cats"-ად.

მე გამოვიყენებ ჯავასკრიპტს ამისათვის,
HTML-ის მაგივრად.

შესაძლოა ასევე გადავაქციო ეს გვერდი
ბრაუზერის გაფართოებად, რომ

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

არ იქნება ეს საოცარი?
მთელი ინტერნეტი მხოლოდ კატების შესახებ.

ამ ვებ გვერდს აქვს სათაური, აბზაცი
და რამდენიმე სურათი.

ჩვენ შევცვლით ყოველ მათგანს და
დავიწყებთ სათაურით.

გამოვიყენებთ იმ ორ ნაბიჯს,
რომელიც ახლა ვისწავლეთ.

პირველი ნაბიჯია DOM-ის იმ ბმულის
პოვნა რომელიც შეიცავს სათაურს.

აქამდე DOM-ს ვპუოლობდით
document.body-ს გამოყენებით.

მაგრამ ახლა მინდა უფრო სპეციფიურად
გავაკეთო, მინდა მხოლოდ ეს h1.

ამ h1-ს აქვს ID.

რაც ნიშნავს, ის ერთადერთი თეგია
ამ ID-თი ვებ გვერდზე.

ძალიან მარტივია DOM კვანძის პოვნა,
რომელსაც აქვს ეს ID.

მეთოდი დოკუმენტ ობიექტზე, რომელსაც
getElementById ეწოდება.

მოდი, გამოვიყენოთ იგი
-ის თეგზე.

დავიწყოთ ცვლადის შექმნით და დავარქვათ
მას შესაბამისი სახელი 'var headinEl'.

ცვლადების სახელებს ხშირად ვამთავრებ
El-ით ან Node-ით. იმიტომ, რომ

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

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

დოკუმენტ ობიექტს. დავწეროთ 'document' ,
შემდეგ მძიმე, შემდეგ კი 'getElementById' ,

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

მან არ იცის, თუ რომელ ID-ს ეძებს.

ფრჩხილებში უნდა მივუთითოთ ID,
რომელსაც ვეძებთ, სტრინგად.

ეს არის 'heading'.

საიდან ვიცით ვიპოვეთ თუ არა ელემენტი

იქამდე სანამ ვცდით მის გამოყენებას?

ერთი ხერხია console.log ფუნქციის
გამოყენება.

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

სცადეთ კლავიატურის command-option-i
მაკზე,

ან contorl-shift-i უინდოუსზე.

შემაჩნიეთ რომ h1 გამოვიდა თქვენი
კონსოლიდან? თუ ასეა, ეს ნიშნავს, რომ

თქვენი პირველი ნაბიჯი დასრულებულია. ჩვენ
ვიპოვეთ ელემენტი და შევინახეთ ის ცვლადად.

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

შინგანი HTML-ის შეცვლით.
ანუ, უნდა დავწეროთ

'headingEl.innerHTML= All about cats '

და ჩვენც დავიწყეთ, კატიფიკაცია
დაწყებულია.

ახლა, თქვენ სცადეთ
რაიმე მსგავსის გაკეთება.