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

როცა ბრაუზერში სერვერიდან იტვირთება რაიმე სახის კოდი,

მაგალითად ეს:

e18393e1839de18399e183a3e1839be18394e1839ce183a2e18398e183a1-e1839de18391e18398e18394e183a5e183a2e18398e183a1-e1839be18394e18397e1839d

http://jsfiddle.net/wholehat/J87pZ/

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

დოკუმენტის ობიექტის მეთოდი - DOM - JS

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

ეს ყველაფერი დაახლოებით ასე გამოიყურება:

e18393e1839de18399e183a3e1839be18394e1839ce183a2e18398e183a1-e1839de18391e18398e18394e183a5e183a2e18398e183a1-e1839be18394e18397e1839d2

თუ სურათს დავაკვირდებით ის გავს ტეგებისაგან / ობიექტებისაგან შემდგარ ხეს, ამიტომ დოკუმენტის ობიექტის მეთოდს – DOM ხე -საც (DOM tree) უწოდებენ.

როგორც თქვენ აქ ხედავთ ყველაფერი მსგავსია (ჰგავს) კოდისა:

e18393e1839de18399e183a3e1839be18394e1839ce183a2e18398e183a1-e1839de18391e18398e18394e183a5e183a2e18398e183a1-e1839be18394e18397e1839d4

განვიხილოთ თითოეული მათგანი:

პირველი ტეგი – html : რომლის შიგნითაც მოქცეულია სხვა დანარჩენი ტეგები

e18393e1839de18399e183a3e1839be18394e1839ce183a2e18398e183a1-e1839de18391e18398e18394e183a5e183a2e18398e183a1-e1839be18394e18397e1839d5

მეორე ტეგი – head და მესამე ტეგი – body, რომელთა შიგნითაც მოქცეულია ასევე სხვა ტეგები, ანუ უფრო მარტივად რომ დავინახოთ და ვთქვათ

ტეგ html -ის შიგნით მოქცეულია head და body ტეგები, ხოლო head და body ტეგებს შიგნით კი სხვა ტეგები:

e18393e1839de18399e183a3e1839be18394e1839ce183a2e18398e183a1-e1839de18391e18398e18394e183a5e183a2e18398e183a1-e1839be18394e18397e1839d6

ჩვენი კოდის შემთხვევაში ტეგ head -ში მოთავსებულია ორი ტეგი, ესენია: ტეგი – meta და ტეგი – title:

es1

ხოლო ტეგ body -ს შიგნით მოთავსებულია სხვა ტეგები, ესენია:

ტეგი h1 ანუ სათაური, ტეგი p ანუ აბზაცი, ასევე ტეგი div (ბლოკი):

es2

ხოლო ტეგი div წარმოადგენს ბლოკს, რომლის შიგნითაც მოთავსებულია ტეგი p და ტეგი img:

es3

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

აუცილებელია ვიცოდეთ ისიც რომ DOM ხე -ში შენახულია ყველა ტეგი და ამ ტეგებისათვის გამოყენებული / საჭირო ყველა ატრიბუტი.

მაგალითად ტეგი div -ისათვის გამოყენებულია ატრიბუტი style:

es4

ხოლო ტეგ img -ში შენახულია სამი ატრიბუტი, ესენია:

  • სურათის მისამართი, თუ საიდან ჩამოტვირთოს ის ბრაუზერმა;
  • სიგანე სურათის;
  • სიმაღლე სურათის;

es5

გამომდინარე აქედან, ყველა ელემენტი რომელიც მოქცეულია DOM ხე -ში, წარმოადგენენ კვანძის / ჯაჭვის / ბმულის (node) შემადგენელ ნაწილებს.

მაგალითად: ტეგი body არის node, ტეგი h1 არის node, ხოლო ტეგ h1 -ში მოთავსებულ ფრაზას: “შესავალი” ეწოდება ტექსტური node.

ასევე აუცილებელია იცოდეთ ნათესაობის მოდელი, ანუ:

ყველაზე მთავარი ტეგი html, ის ითვლება ყველა დანარჩენი ტეგების მშობლად.

გამომდინარე აქედან გამოდის რომ, ტეგები: head და body წარმოადგენენ მის შვილებს, ისინი ერთმანეთთან მიმართებაში არიან ძმები, ასევე მათ ჰყავს შვილები.

ტეგ head -ს ჰყავს შვილი title, თუ ტეგი title არის ტეგი head -ის შვილი, მაშინ ტეგი html გამოდის რომ არის მისი ბაბუა.

ხოლო თუ ტეგ body -ს გადავხედავთ, მისი შვილები არიან:

ტეგი: h1

ტეგი: p

ტეგი: div

ეს სამივე ტეგი, ერთმანეთისათვის არიან ძმები, ხოლო ტეგ div -ს ჰყავს / გააჩნია ორი შვილი, ესენია: p და img -ტეგები, რომლების ერთმანეთისათვის არიან ასევე ძმები, ხოლო ტეგი div არის მათთვის მშობელი.

 

ჩვენ იმიტომ განვიხილეთ DOM ხე, რომ javascript -ის საშუალებით ჩვენ შეგვიძლია ვემუშაოთ სრულად DOM ხე -ს.

სწორედ javascript -ის საშუალებით შეგვიძლია დავამატოთ ან პირიქით წავშალოთ node -ბი, DOM ხე -ში, ასევე შევცვალოთ node -ბის ატრიბუტი (-ები).

მაგალითად თუ ჩვენ წავშლით javascript -ის საშუალებით ტეგ p -ს, მაშინ ჩვენი ბრაუზერის მიერ ეკრანზე დაბეჭდილი შედეგიდან წაიშლება აბზაცი:

javascript – ეს პროგრამირების ენაა.

ან მაგალითად, თუ ჩვენ შევცვლით javascript -ის საშუალებით სურათის მისამართს, რომელიც მოცემულია ჩვენს კოდში: image.png -ს სახით, შეიცვლება ის ჩვენი ბრაუზერის მიერ დაბეჭდილი შედეგიდანაც.

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