ნათესავი ელემენტების არჩევა / მიღება / ამოღება – childNodes – JS

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

ჩვენს მიერ რედაქტორში გახსნილ index.html გვერდის კოდში, იპოვეთ შემდეგი ჩანაწერი:

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

რომლის შიგნითაც მოქცეულია ოთხი სურათი.

მეთოდი getElementById(‘′); -ის გამოყენებით ჩვენ მარტივად შეგვიძლია, index.html -გვერდიდან div ბლოკის რომლის id -ც არის: div_for_img ამოღება, მისი მისამართის გატოლება ცვლადზე და შემდეგ დაბეჭდვა ეკრანზე. გარდა ამისა გავლილი გაკვეთილიდან გამომდინარე ასევე არ წარმოადგენს პრობლემას, ამ div ბლოკში არსებულ თვისებებზე ხელმისაწვდომობა და ასევე მათი დაბეჭდვაც ეკრანზე. მაგალითად ალტერნატიული ტექსტის, სურათის მისამართის, სიგრძის, სიგანის და ა.შ. მინდა მოგახსენოთ რომ, ასევე არსებობს სხვა საინტერესო თვისებაც, რომელსაც ჰქვია: childNodes.

განვიხილოთ ის: child ნიშნავს ბავშვს, ხოლო node – კვანძს / ჯაჭვს / ბმულს.

იმისათვის რომ მარტივად გაიგოთ node -ს მნიშვნელობა იხილეთ შემდეგი გაკვეთილი:

დოკუმენტის ობიექტის მოდელი – DOM – JS

თუ ჩვენ div ბლოკს დავაკვირდებით, ჩანს რომ:

<div id=”div_for_img”> //არის მშობელი
<img id=”img_1″ src=”images/flower1.jpg” width=”200″ height=”125″ alt=”ყვავილი 1″ /> //არის შვილი
<img id=”img_2″ src=”images/flower2.jpg” width=”200″ height=”125″ alt=”ყვავილი 2″ />  // არის შვილი
<img id=”img_3″ src=”images/flower3.jpg” width=”200″ height=”125″ alt=”ყვავილი 3″ /> // არის შვილი
<img id=”img_4″ src=”images/flower4.jpg” width=”200″ height=”125″ alt=”ყვავილი 4″ /> // არის შვილი
</div>

მისი საშუალებით შესაძლებელია, div ბლოკში არსებული შვილი node -ბის ამოღება და დაბეჭდვა ეკრანზე.

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

შედეგი:

შედეგიდან ჩანს რომ, ჩვენ ოთხი სურათის შეტყობინების სახით ეკრანზე დაბეჭდვის ნაცვლად მივიღეთ 9 შეტყობინება:

  1. ცარიელი ფანჯარა – არასწორია და არც შესაბამისი შედეგი მოგვითხოვია ჩვენს javascript ფაილში დაწერილი კოდით.
  2. ყვავილი ერთი – სწორია
  3. ცარიელი ფანჯარა – არასწორია და არც შესაბამისი შედეგი მოგვითხოვია ჩვენს javascript ფაილში დაწერილი კოდით.
  4. ყვავილი ორი – სწორია
  5. ცარიელი ფანჯარა – არასწორია და არც შესაბამისი შედეგი მოგვითხოვია ჩვენს javascript ფაილში დაწერილი კოდით.
  6. ყვავილი სამი – სწორია
  7. ცარიელი ფანჯარა – არასწორია და არც შესაბამისი შედეგი მოგვითხოვია ჩვენს javascript ფაილში დაწერილი კოდით.
  8. ყავილი ოთხი – სწორია
  9. ცარიელი ფანჯარა – არასწორია და არც შესაბამისი შედეგი მოგვითხოვია ჩვენს javascript ფაილში დაწერილი კოდით.

შენიშვნა: შეიძლება სხვა რომელიმე ბრაუზერში ან ამავე ბრაუზერის სხვა ვერსიაში, არ გამოჩნდეს ცარიელი ფანჯარა ეკრანზე, მის ნაცვლად შეიძლება გამოჩნდეს ფანჯარა შეტყობინებით: undefined (ნიშნავს: გაურკვეველი), ეს კი იგივე შეტყობინებაა რაც ჩვენს შემთხვევაში მივიღეთ (ანუ ცარიელი ფანჯარა).

იმისათვის რომ ვიპოვოთ თუ სად არის ეს შეცდომა, ვებ-ბრაუზერში რომელსაც ვიყენებთ ანუ Mozilla Firefox -ში დავაინსტალიროთ ამავე ვებ-ბრაუზერის უფასო დამატება (Addon) სახელით: DOM Inspector, საინსტალაციო მისამართი იხილეთ აქ

გახსენით Mozilla Firefox ვებ-ბრაუზერი

მისამართის ველში აკრიფეთ: https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/

გადადით გვერდზე და დააჭირეთ ღილაკს: Add to Firefox

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

გამოჩნდება ფანჯარა, დააჭირეთ: Install Now

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

გადატვირთეთ თქვენი ვებ-ბრაუზერი:

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

დამატება სახელით: DOM Inspector გამოჩნდება ვებ-ბრაუზერის ვებ-დეველოპერის ხელსაწყოების მენიუში:

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

ან მისი გახსნა ასევე შესაძლებელია კლავიატურაზე შემდეგი ღილაკების ერთდროულად დაჭერის შედეგადაც: ctrl + shift + l

გავხსნათ დამატება, რომლის შედეგადაც გაიხსნება ჩვენი html გვერდის DOM ხე და ვიპოვოთ მასში ის ბლოკი div რომელშიც მოთავსებულია ეს ოთხივე სურათი:

ყურადღება მიაქციეთ ამ სურათს:

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

როგორც ხედავთ გვაქვს ოთხივე სურათი, ხოლო მათ წინ წერია #text

ამ ჩანაწერებს როგორც ვხედავთ არ გააჩნია ატრიბუტი alt და სწორედ ამ ფაქტორმა განაპირობა ჩვენთვის ცარიელი ფანჯრის შეტყობინების სახით ჩვენება. ჩვენ ის ვებ-ბრაუზერის დამატების დახმარებით დავინახეთ, მაგრამ თვითონ index.html ფაილში არსებულ კოდში ჩვენ მას ვერ ვხედავთ.

როგორც ჩვენ ვიცით javascript -ისთვის ნებისმიერი ჩანაწერი რომელიც მაც შეხვდება კოდში მისი მოქმედების დიაპაზონში, მისთვის ის არის ობიექტი, ჩვენს კოდშიც არსებობს და აღმოვაჩენთ space -ებს ანუ ცარიელ სიმბოლოებს:

შენიშვნა: space არაფრით განსხვავდება სიმბოლოსაგან და ისიც ჩანაწერია სიმბოლოს სახით.

როგორ აღმოვფხვრათ ეს პრობლემა javascript პროგრამირების ენაში?

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

შევამოწმოთ ვებ-ბრაუზერის დამატების DOM Inspector -ის საშუალებით:

ნათესავი ელემენტების არჩევა - მიღება - ამოღება - JS

როგორც ვხედავთ #text ჩანაწერები აღარ ჩანს, იმიტომ რომ წავშალეთ space -ები და კოდი ერთ ხაზზე დავალაგეთ, ეხლა შევამოწმოთ ვებ-ბრაუზერში:

ყველაფერი სწორია.

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