[Powered by Google Translate] [DOM]
[ტომი MacWilliams] [ჰარვარდის უნივერსიტეტი]
[ეს არის CS50.] [CS50.TV]
ამ ვიდეო ჩვენ ვაპირებთ შევხედოთ DOM.
როდესაც ბრაუზერი იწერს ვებგვერდზე, უნდა იყოს წარმოდგენილი მეხსიერება რატომღაც.
დოკუმენტის ობიექტური მოდელი, DOM,
აღწერილია, თუ როგორ ბრაუზერის წარმოადგენს ვებგვერდზე მეხსიერებაში.
ამ ვიდეო, ჩვენ შევხედოთ DOM კონტექსტში JavaScript,
მაგრამ DOM არის ენის დამოუკიდებელი კონცეფცია.
მაგალითად, PHP აქვს საკუთარი DOM განხორციელებისათვის,.
თუმცა, DOM ხშირად გამოყენებული JavaScript
მას შემდეგ, რაც JavaScript საშუალებას გვაძლევს შეცვლის შინაარსი ვებგვერდის on the fly,
და DOM საშუალებას გვაძლევს, რათა შეამოწმონ ნაწილების ვებგვერდზე.
მოდით შევხედოთ მაგალითად ვებგვერდზე.
კარგი, ახლა ვნახოთ, თუ როგორ ამ გვერდზე იქნება წარმოდგენილი, DOM.
და ყოველი ხე სჭირდება ძირეული კვანძის ზედა.
ამ დოკუმენტს, HTML ელემენტი ძირეული კვანძის
იმიტომ, რომ ეს არის პირველი ელემენტი, რომელიც, როგორც ჩანს.
მოდით დაამატოთ ძირეული კვანძის ჩვენი ხე.
მოდით შევხედოთ HTML დოკუმენტი კიდევ ერთხელ.
გავითვალისწინოთ, რომ სხეულის ტეგი წყობილი შიგნით HTML აქვს.
ეს ნიშნავს, რომ სხეულის ელემენტი ბავშვი HTML ელემენტს.
ჩვენ შეგვიძლია წარმოადგენს ამ ჩვენს DOM ხე მიერ მიღების ორგანოს ფოთოლი
დაღმავალი ეხლა HTML.
მოდით, რომ.
ჩვენ გვყავს სხეულის ქვეშ HTML.
ახლა ჩვენ ვხედავთ, რომ სხეული 2 შვილი საკუთარი,
h1 ელემენტს და ul ელემენტს.
ეს იმას ნიშნავს, რომ ჩვენ შეგვიძლია დაკავშირება ორივე ელემენტები
იმ ორგანოს ელემენტის, მოდით გავაკეთოთ, რომ.
ჩვენ გვყავს h1 და ul.
და ბოლოს, ul ელემენტს აქვს კიდევ 3 შვილი,
და ეს დაასრულებს ჩვენი DOM ხე, მოდით დაამატოთ li, li, li.
ეს ასრულებს ჩვენი DOM ხე, და ასე ბროუზერი შენახვა თქვენს საიტს.
ახლა შევხედოთ როგორ შეგვიძლია traverse ამ ხის გამოყენებით JavaScript.
ჩვენ შეუძლია ამ ხის გამოყენებით სპეციალური JavaScript ცვლადში დოკუმენტი.
ერთი ქონება ამ დოკუმენტის ობიექტი
არის ორგანო ქონებას და ეს ობიექტი წარმოადგენს
სხეულის ელემენტია ჩვენს მაგალითზე ვებგვერდზე.
თუ გვინდოდა, რომ მიიღოთ ყველა ბავშვის სხეულის ელემენტის,
რაც თუ გახსოვთ ის არის, რომ h1 tag და ul tag,
შეგვიძლია ვთქვათ, document.body.childNodes.
ეს მოგვცემს უკან მასივი შეიცავს როგორც h1 ელემენტს
და ul ელემენტს რადგან ისინი პირდაპირ ბავშვების სხეულის.
თუ გვინდოდა, რომ შევქმნათ ცვლადი წარმოადგენს ul ელემენტს
შეგვიძლია ვთქვათ, vrr ul = მაშინ ეს კოდი აქ,
და ახლა, რადგან childNodes უბრალოდ მასივი
ჩვენ შეგვიძლია ინდექსი შევიდა იგი [1] რომ მივიღოთ მეორე ელემენტი, რომელიც მასივი.
ამ ახალი ul ობიექტი ჩვენ შეუძლია სხვადასხვა თვისებების ელემენტს ისევე როგორც მისი პირადობის მოწმობა.
თუ ჩვენ ვამბობთ, ul.id რომ იქნება ტოლი სიმებიანი სია
იმიტომ, რომ ის, რაც ჩვენ გვაქვს ჩვენი HTML გვერდი.
ჩვენ შეგვიძლია ასევე მისი tagName, რომელიც ამ შემთხვევაში იქნება
რა ტიპის ელემენტს ეს, ამ შემთხვევაში, ul.
ჩვენ შეგვიძლია ასევე მისი მშობლის ან კვანძის ზემოთ, რაც ამ შემთხვევაში
იქნება სხეულის ელემენტს.
თუ ჩვენ ვიტყვით. ParentNode, რომ იქნება იგივე, რაც document.body.
რა თქმა უნდა, ამ ul აქვს ბავშვებს საკუთარი,
ასე რომ ჩვენ შეგვიძლია მაინც ამბობენ. childNodes ამ ელემენტის,
და ეს მასივი უნდა ჰქონდეს სიგრძის 3 რადგან არსებობს 3 ელემენტი ჩვენს სიაში.
და ბოლოს, ალბათ, ყველაზე სასარგებლო ქონების იქნება. InnerHTML,
და ეს იქნება რეალური შინაარსი სია, რომელიც ჩვენი მაგალითი გვერდი
იყო იმ 3 li tags.
რა თქმა უნდა, გვაქვს თუ არა დიდი დოკუმენტი, რომელიც შედის ელემენტები
ამ სახით იქნება მართლაც რთული იმიტომ
საბოლოოდ ჩვენ უნდა ვთქვა რამ, როგორიცაა document.body.childNodes
bracket რაღაც. childNodes bracket რაღაც,
და ეს აპირებდა ნამდვილად რთული.
იმის ნაცვლად, რომ ის, რაც ჩვენ ნამდვილად გსურთ ამის გაკეთება არის შეძლებს შეკითხვის დოკუმენტი,
ასე რომ ისევე როგორც ჩვენ ეძებდნენ რამ ინტერნეტში გამოყენებით საკვანძო სიტყვები
ჩვენ ნამდვილად გვჭირდება ძიების გზაზე ამ დოკუმენტის აღწეროთ
დავუბრუნდეთ მხოლოდ ელემენტები ჩვენ აინტერესებს გარეშე გადიოდა
მთელი ხე ზემოდან.
საბედნიეროდ, თანამედროვე ბრაუზერებში საშუალებას მოგვცემს ამის გაკეთება
სპეციალური ფუნქცია მოუწოდა querySelectorAll,
და ეს ფუნქცია იღებს ერთი არგუმენტი
რომ არის CSS selector და ეს დაბრუნებას აპირებს us
ყველა ელემენტს, რომლებიც ემთხვევა, რომ არჩევის.
ეს იმას ნიშნავს, რომ თქვენ არ უნდა ვისწავლოთ მთელი ახალი სინტაქსი querying DOM.
იმის ნაცვლად, შეგიძლიათ მიმართოთ ცოდნა იცით
ცენტრის შესახებ სელექციონერები.
მოდით შევხედოთ მაგალითები querying დოკუმენტი.
თუ ჩვენ ვამბობთ, querySelectorAll და გაიაროს ეს ეს კონტექსტი # foo
რომ აპირებენ უკან ელემენტს ID foo.
თქვენ ასევე აცხადებენ, document.getElementByID
და გაიაროს ეს სიმებიანი foo გარეშე hashtag.
თქვენ აპირებს დაბრუნებას იგივე ზუსტი ობიექტი.
თუ ნაცვლად ჩვენ გაივლის მისაღებად. ბარი document.querySelectorAll
ჩვენ ვაპირებთ დაიბრუნოს ყველა ელემენტების კლასის ბარი.
ჩვენ ასევე გაერთიანდება CSS სელექციონერები.
თუ ჩვენ გაივლის სიმებიანი # foo img
რომ აპირებენ უკან ყველა გამოსახულების ელემენტები
რომ შვილები არიან ელემენტს ID foo.
როგორც ხედავთ, აერთიანებს სელექციონერები გვაქვს რამდენიმე მართლაც ძლიერი ძებნის შესაძლებლობები.
მაგრამ ქვეშ Hood, DOM არის უბრალოდ ხე,
და ეს სელექციონერები საშუალებას მოგვცემს აბსტრაქტული, რომ მოშორებით გარკვეულწილად
იმიტომ, რომ ჩვენ ყოველთვის არ აინტერესებს მთელი სტრუქტურა DOM ხე.
ეს იყო სწრაფი მიმოხილვა DOM, და მადლობა გაწევრიანების ჩვენთვის.
[CS50.TV]