ნათესავი ელემენტების არჩევა / მიღება / ამოღება – parentNode, nextSibling, previousSibling – JS

აუცილებელია გადავხედოთ წინა გაკვეთილს: ნათესავი ელემენტების არჩევა / მიღება / ამოღება – childNodes – JS
ჩავრთოთ ლოკალური ვებ-სერვერი.
ჩვენ შეგვიძლია გავიგოთ, ნებისმიერი ელემენტის მშობელი node.
თუ index.html -ის კოდს დავათვალიერებთ ვნახავთ რომ, div ბლოკი ID -თ div_for_img -ის მშობელი div ბლოკი არის forbody :
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ანუ თუ ერთ DIV ბლოკში მოვაქცევთ, სხვა DIV ბლოკს, მაშინ ის იქნება ცხადია მისი შვილი:
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ასევე აუცილებელია დაიმახსოვროთ რომ, მშობელი div ბლოკი ყოველთვის იმყოფება შვილი div ბლოკის ზევით.
სპეციალური თვისების parentNode -ის გამოყენებით დავბეჭდოთ ეკრანზე div ბლოკი, id -თ div_for_img -ის მშობელო div ბლოკის id :
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling - code – JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ანუ ყველაფერი სწორია.
ჩვენ ვიცით რომ თუ ერთ ბლოკში მოთავსებულია ორი შვილი ელემენტი, მაშინ ისინი არიან ერთმანეთისთვის ძმები:
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling - code – JS
გამომდინარე აქედან შესაძლებელია, ერთ ბლოკში მოქცეული ნებისმიერი ელემენტის, ძმის გაგება, ძმის რომელიც მის შემდეგ წერია კოდში, ანუ:
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
როგორც ვხედავთ, div ბლოკის id -თ div_for_img -ს ძმა არის მისი მომდევნო აბზაცი (Paragraph).
დავბეჭდოთ ის ეკრანზე, თვისება nextSibling -ის (Next sibling ნიშნავს: მომდევნო ძმა -ს) გამოყენებით:
e1839ce18390e18397e18394e183a1e18390e18395e18398-e18394e1839ae18394e1839be18394e1839ce183a2e18394e18391e18398e183a1-e18390e183a0e183a916
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling - code – JS
შედეგად მივიღეთ, ცარიელი შეტყობინების ფანჯარა, როგორც ეს წინა გაკვეთილში ავხსენით , გავხსნათ ვებ-ბრაუზერის დამატება DOM Inspector და ვიპოვოთ div ბლოკი id -თ div_for_img -ის შემდეგი ელემენტი, ანუ მისი ძმა:
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
როგორც ხედავთ აქაც აღმოჩნდა space , წავშალოთ ის და შევამოწმოთ:
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ყველაფერი სწორია, მისი მომდევნო ძმა არის ობიექტი აბზაცი (Paragraph).
ასევე შესაძლებელია შევამოწმოთ თვისება previousSibling -ის გამოყენებით, node -ის / ელემენტის / div ბლოკის id -თ div_for_img -ის წინა ძმაც:
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – JS
ელემენტების არჩევა მეთოდით getElementsByTagName() - JS
ნათესავი ელემენტების არჩევა - მიღება - ამოღება – parentNode, nextSibling, previousSibling – 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