ატრიბუტების შეცვლა (ვიდეო ვერსია)

დავბრუნდით მე და ჩემი გვერდი ძაღლების შესახებ
და მე ვაპირებ გამოვიყენო JavaScript

და DOM api იმისთვის, რომ ეს გვერდი
კატების შესახებ გვერდად გადავაქციო.

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

რეალურად, ოთახში ძაღლია, უფრო სწორად - ორი,
კიდევ უფრო სწორად - ძაღლების სურათებია.

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

დავიწყოთ სურათების ძებნით. ვეძებთ
თეგის სახელით.

`var imageEls =
document.getElementsByTagName("img");`

ახლა, რადგანაც ეს ბევრ ელემენტს გვიბრუნებს,

მათ შორის ბრძანების გასამეორებლად
უნდა გამოვიყენოთ ციკლი for

`var i = 0; i < imageEls.length; i++`

მაგრამ რა უნდა ჩავსვა ციკლში?
მე ვერ შეცვლი სურათ-ელემენეტბს, თუ

ისინი იყენებენ innerHTML-ს, იმიტომ რომ
სურათების თეგები არ შეიცავენ innerHTML-ს.

მე უნდა შევცავლო ის, რის გამოც ამ სურათებზე
გამოსახულია ძაღლები --

სურათების URL , რაც განისაზღვრება

ყოველი თეგის src ატრიბუტში.

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

გადავდივართ მიმდინარე ელემენტზე,
ნოტაციით ფრჩხილებში, ვსვამთ წერტილს

და ვსვამთ HTML ატრიბუტის სახელს როგორც
JavaScript თვისების სახელს -- src -- უდრის

და აქ ვსვამთ ახალ მნიშვნელობას;
ჯერ ცარიელი ხაზი იყოს.

ხედავ? სურათები გაქრა.

იმიტომ რომ ცარიელი ხაზი
არ მიუთითებს საერთოდ არანაირ სურათზე.

იმისთვის, რომ ახალი URL ჩავსვა,
ვაკოპირებ აქ ძველს

და ფაილის სახლეს ვცვლი კატაზე;
ასე მოხდა, რომ ვიცი

რომ სწორედ ასეთია ხანის აკადემიაზე
კატის სურათის URL

გამოვიდა! ძაღლები კატებად გადაიქცა და
ჩვენი კატიფიკაცია თითქმის დასრულდა.

ხედავთ კიდევ რაღაცას, რაც ძაღლებთანაა
კავშირში? თითქმის შეუმჩნეველია,

მაგრამ რაღაც დაგვრჩა - ესაა ვიკიპედიის
ბმული, რომელიც გადადის ძაღლების გვერდზე.

და თუ მომხმარებელი გადავა ამ ბმულზე,
იგი მიიღებს ინფორმაციას ძაღლებზე.

მე კი მინდა, რომ მან კატებზე წაიკითხოს.
როგორ ვიპოვო ეს ბმული JavaScript-ში?

შემიძლია მივცე ამ ბმულს ID
და გამოვიყენო getElementById

ან შემიძლია გამოვიყენო getElementsByTagName
და შევცვალო ყველა ბმული გვერდზე.

ან, სუპერ-მონდომებული თუ ვარ,

CSS სელექტორით შემიძლია ვიპოვო ყველა
ის ბმული, რომელიც ძაღლებიან გვერდზე გადადის.

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

ეს CSS სელექტორი იპოვის ყველა ბმულს,
რომელიც რამე კავშირშია ძაღლებთან.

პირველ რიგში უნდა ჩავწერო a,
იმიტომ რომ ვეძებ ბმულებს.

შემდეგ კი ჩავწერ [href*="Dog"]

ეს აცნობებს CSS-ს, რომ უნდა იპოვოს ყველა
ბმული, რომელიც შეიცავს სიტყვას "Dog"

შემდეგ კი შევცვალოთ მათი ფერი იასამნისფერზე.
მზადაა.

კარგი მეთოდია, არა?
ეს არის ატრიბუციის სელექტორი

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

ახლა ამის JavaScript-ში საპოვნად
შეგვიძლია გამოვიყენოთ document.querySelectorAll

ვუთითებთ var linkEls = document.querySelectorAll

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

მთავარია, ორმაგი ბრჭყალები არ დაგვრჩეს.
ესეც ასე. კარგი ხაზი გამოვიდა.

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

ალბათ, უკვე შეეჩვიე ციკლების შექმნას --

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

ამისთვის ჩავწეროთ linkEls[i].href --

იმიტომ რომ ეს არის იმ ატრიბუტის სახელი,
რომელსაც ვცვლით -- უდრის

ჩავსვათ აქ ეს URL და შეცვალოთ ის კატებზე.

იმიტომ რომ დარწმუნებული ვარ,
რომ სტატიის URL ზუსტად ეს იქნება.

მორჩა, სამყაროს კატიფიკაცია დასრულებულია.

მაგრამ JavaScript-ის სწავლა ჯერ არ დასრულებულა.