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

ამ გაკვეთილში შევისწავლით თუ როგორ უნდა ამოვიღოთ / ამოვარჩიოთ გვერდიდან ჩვენთვის სასურველი კონკრეტული ელემენტი, მისი უნიკალური იდენტიფიკატორის მიხედვით.

თუ თქვენ ყურადღებით გადახედავთ ჩვენს მიერ კოდის რედაქტორში გახსნილ გვერდს, ნახავთ რომ უმეტესობა ობიექტს გააჩნია საკუთარი იდენტიფიკატორი, მაგალითად ავიღოთ ბლოკი div, მას გააჩნია id, რომელიც ტოლია / უდრის / მინიჭებული აქვს სახელი main_div

id არის html ატრიბუტი და ვრცლად მას Identification – იდენტიფიკაცია / ამოცნობა (ამოცნობის საშუალება) ჰქვია.

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

ასევე ბლოკი header, მას გააჩნია id=”forheader” :

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

და ა.შ.

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

ამოცანის სახით, ამოვიღოთ რომელიმე კონკრეტული ელემენტი ჩვენი გვერდიდან, მისი id -ს მიხედვით / გამოყენებით, მაგალითისთვის ეს იყოს პირველი ყვავილის სურათი:

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

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

<img id=”img_1″ src=”images/flower1.jpg” width=”200″ height=”125″ alt=”ყვავილი 1″ />

მისი იდენტიფიკატორია: img_1

გადავინაცვლოთ ჩვენს javascript ფაილში და დავწეროთ შემდეგი:

შევქმნათ ჩვენთვის სასურველი ცვლადი ნებისმიერი სახელით:

var flower = document.getElementById(‘img_1’);

ასეთი ჩანაწერი ჩვენ დაგვიბრუნებს ბმულს / მისამართს ობიექტისა img_1 (და არა პირდაპირ სურათს) და ცვლადი flower -ის დახმარებით ჩვენ შეგვეძლება მასზე ჩვენთვის საჭირო ნებისმიერი ქმედების შესრულება.

გავიხსენოთ გავლილი გაკვეთილი: პრაქტიკული მაგალითი ობიექტი Date -ისათვის – JS

სადაც ვქმნიდით ჯერ ჩვენთვის სასურველ ცვლადს, შემდეგ მას ვუტოლებდით ობიექტს new date(); და ამ ცვლადის საშუალებით ვახდენდით დაკავშირებას ობიექტი date(); -ის თვისებებზე. მაგალითად ჩვენ შეგვეძლო გაგვეგო თუ რომელი წელია ეხლა

ობიექტი: Date, მისი მეთოდები getFullYear() , getMonth() , getDate() , getDay() , getHours() , gerMinutes() და getSeconds() – JS 

შეგვეძლო გაგვეგო თვე და ა.შ.

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

თუ ჩვენ დავაკვირდებით ტეგ img -ს

<img id=”img_1″ src=”images/flower1.jpg” width=”200″ height=”125″ alt=”ყვავილი 1″ />

მას გააჩნია ასევე სხვა ტიპის ატრიბუტები:

სურათის მისამართი: src=”images/flower1.jpg”

სიგანე სურათის: width=”200″

სიმაღლე სურათის: height=”125″

და

ალტერნატიული ტექსტი: alt=”ყვავილი 1″

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

ამოვიღოთ / დავბეჭდოთ ეკრანზე ჩვენთვის სასურველი თვისება, მაგალითად სურათის სიგანე

( სიგანე სურათის: width=”200″ ) :

var flower = document.getElementById(‘img_1’);

alert(flower.width);

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

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

შედეგად მივიღეთ 200 ანუ ყველაფერი სწორია.

ასევე შეგვიძლია ეკრანზე დავბეჭდოთ, ობიექტი / ტეგი img -ს ალტერნატიული ტექსტი

( ალტერნატიული ტექსტი: alt=”ყვავილი 1″ ) :

var flower = document.getElementById(‘img_1’);

alert(flower.alt);

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

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

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