ელემენტების არჩევა / მიღება / ამოღება მეთოდით getElementsByTagName() – JS

მანამ სანამ დავიწყებდეთ უშუალოდ, მეთოდი getElementsByTagName() -ს ახსნას, მანამდე საჭიროა ჩავრთოთ ჩვენი ლოკალური სერვერი და გადავხედოთ index.html ფაილში არსებულ კოდს:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

root/1800flowers.com ფოლდერში არსებულ js ფოლდერში შევქმნათ ფაილი სახელით: myscripts.js :

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

და მივუერთოთ / მივაბათ ეს javascript ფაილი ჩვენს კოდს:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

<script src=”js/myscripts.js” type=”text/javascript”></script>

მარტივია იმის მიხვედრა რომ, ადრე ჩვენ javascript კოდს ვწერდით:

<script type=”text/javascript”>

შუაში

</script>

ეხლა კი მივაბით კონკრეტული javascript ფაილი, ჩვენს html კოდს, რაც ნიშნავს რომ კოდი ისევ ისე მუშაობს ანუ:

<script src=”js/myscripts.js” type=”text/javascript”></script> – შემთხვევაში

myscripts.js – ფაილში არსებული / ჩაწერილი სკრიპტი, ავტომატურად გვერდის ჩატვირთვის დროს ბრაუზერში, კომპიუტერის მიერ თავსდება javascript ტეგებს შორის ანუ:

<script type=”text/javascript”>

აი აქ

</script>

მაგალითისათვის დავწეროთ myscripts.js ფაილში რაიმე ქმედება და დავბეჭდოთ ის ეკრანზე:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

შენიშვნა: ნუ დაიბნევით, თქვენ დაინახეთ კოდის რედაქტორის ორი ტაბი, ეს იმიტომ გავაკეთე რომ უკვე ორ ფაილთან მიწევს მუშობა, ესენია: .html და .js ფაილები.

შედეგი:

ვარეფრეშებ / ვუკეთებ განახლებას ბრაუზერის მიერ ჩატვირთულ გვერდს:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

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

 

შევუდგეთ მეთოდი: getElementsByTagName() -ის სწავლას, თუ ამ მეთოდის სახელს გადავთარგმნით: get Elements By Tag Name ნიშნავს – მივითოთ ელემენტები ტეგების სახელის მიხედვით.

თუ ჩვენი დავალება იქნება მებისმიერი ელემენტების ამოღება გვერდიდან ერთნაირი ტეგების მიხედვით, მაგალითად ყველა აბზაცი, ყველა div ბლოკი ან ყველა სურათი და ა.შ. შეგიძლიათ შეასრულოთ ეს ამოცანა მეთოდი getElementsByTagName() -ის დახმარებით.

შევადრულოთ მოცემული ამოცანა:

ობიექტი document უკვე თქვენთვის ცნობილია გაკვეთილებიდან:

ობიექტი document -ის ყველა თვისების დაბეჭდვა ეკრანზე – JS

ობიექტები: NAVIGATOR, SCREEN, LOCATION და მათი თვისებები – JS

ამიტომ დავწეროთ:

document.getElementsByTagName(‘img’); – პარამეტრად მას გადავცემთ ტეგს img , ანუ ყველა სურათი და შედეგად დაგვიბრუნდება მასივი შემდგარი ყველა სურათებისაგან რომელიც გვაქვს ჩვენ გვედზე.

შედეგი მოვაქციოთ ცვლადში:

var allImg = document.getElementsByTagName(‘img’);

როგორც ჩვენთვის ცნობილია, ნებისმიერ მასივს გააჩნია სიგრძე ( მასივში არსებული ელემენტების რაოდენობის გამოთვლა – LENGTH – JS ), გამომდინარე აქედან ჩვენ შეგვიძლია მარტივად გავიგოთ და ეკრანზე შეტყობინების სახით დავბეთდოთ, თუ რამდენი სურათი გვაქვს გვერდზე:

var allImg = document.getElementsByTagName(‘img’);
alert(“ჩვენ ვებ-გვერდზე გვაქვს ” + allImg.length + ” სურათი”);

შევინახოთ ჩვენს მიერ დაწერილი javascript კოდი და დავბეჭდოთ ის ეკრანზე:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

შედეგი:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

ალბათ თქვენთვის საინტერესოა ის ფაქტი რომ, მიუხედავად იმ 6 სურათისა რომელიც ჩვენ გვერდზე გვაქვს:

სურათი 1:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

სურათი 2, 3, 4 და 5:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

სურათი 6:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

შედეგად მივიღეთ ნული.

ეს შემთხვევა საჭიროა რომ თქვენ იცოდეთ, რომელიც გამოგადგებათ javascript -თან მუშაობის დროს, ანუ როგორც ჩვენ გაკვეთილში დოკუმენტის ობიექტის მოდელი – DOM – JS განვიხილეთ, როცა ბრაუზერში სერვერიდან იტვირთება რაიმე სახის კოდი, პირველ შემთხვევაში ხდება კოდის ტრანსფორმაცია ჩვენთვის გასაგებ სურათად და DOM ხის ჩამოყალიბება / შექმნა, გამომდინარე აქედან რადგან ჩვენს კოდზე javascript ფაილი მიბმული / მიერთებული გვაქვს, html კოდის დასაწყისში:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
კოდის ჩატვირთვის დროს ბრაუზერში, მანამ სანამ ჩაიტვირთა javascript ფაილი / ფუნქცია, დაგენერირდა შემდეგი DOM ხე:

html

head

meta

title

link

და

script

DOM ხის გენერაცია მივიდა, script ანუ javascript ფუნქციამდე და ამ ფუნქციამ დაინახა ზევითჩამოთვლილი დაგენერირებული DOM ხე, რომელშიც ვერ იპოვა სურათი და დაბეჭდა ეკრანზე შედეგი: ნული.

მიაქციეთ ყურადღება როცა თქვენ მუშაობს ტეგებთან ან სხვა გვერდზე მოთავსებულ ელემენტებთან, საჭიროა javascript ფაილი გამოიძახოთ არა html გვერდის დასაწყისში, ანუ ისე როგორც ეხლა გვაქვს გამოძახებული, არამედ html გვერდის ბოლოს ანუ იქ სადაც იხურება ტეგი </body> :

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

განვაახლოთ გვერდი და დავბეჭდოთ ეკრანზე შედეგი:

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

ელემენტების არჩევა მეთოდით getElementsByTagName() - JS

შედეგად მივიღეთ 6 სურათი, რაც სწორი პასუხია.

გამომდინარე აქედან შეიძლება გავაკეთოთ დასკვნა რომ, თუ DOM ხის გენერაცია არ არის დასრულებული და ჩვენ გვსურს ამ პროცესის დასრულებამდე რაიმე ფუნქციის / ქმედების შესრულება, მაშინ ვერ მივიღებთ სწორ პასუხს.

Advertisements

კომენტარის დატოვება

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / შეცვლა )

Twitter picture

You are commenting using your Twitter account. Log Out / შეცვლა )

Facebook photo

You are commenting using your Facebook account. Log Out / შეცვლა )

Google+ photo

You are commenting using your Google+ account. Log Out / შეცვლა )

Connecting to %s