შესავალი. DOM მოდელთან მუშაობა რა არის dom დოკუმენტის ობიექტის მოდელი

ამ გაკვეთილზე ჩვენ გადავხედავთ რა არის DOM, რატომ არის საჭირო და როგორ არის აგებული.

რა არის DOM?

როდესაც ბრაუზერი ითხოვს გვერდს და იღებს მის წყაროს HTML კოდს სერვერისგან პასუხად, მან ჯერ უნდა გააანალიზოს იგი. HTML კოდის ანალიზისა და ანალიზის პროცესში ბრაუზერი მის საფუძველზე აშენებს DOM ხეს.

ამ და რიგი სხვა მოქმედებების დასრულების შემდეგ ბრაუზერი იწყებს გვერდის რენდერირებას. ამ პროცესში, ის, რა თქმა უნდა, უკვე იყენებს მის მიერ შექმნილ DOM ხეს და არა ორიგინალურ HTML კოდს.

DOM არის დოკუმენტის ობიექტის მოდელი, რომელსაც ბრაუზერი ქმნის კომპიუტერის მეხსიერებაში სერვერისგან მიღებული HTML კოდის საფუძველზე.

მარტივად რომ ვთქვათ, HTML კოდი არის გვერდის ტექსტი, ხოლო DOM არის დაკავშირებული ობიექტების ნაკრები, რომელიც შექმნილია ბრაუზერის მიერ მისი ტექსტის ანალიზისას.

Chrome-ში, გვერდის წყაროს კოდი, რომელსაც ბრაუზერი იღებს, შეგიძლიათ იხილოთ "წყარო" ჩანართში "ვებ დეველოპერის ხელსაწყოების" პანელში.

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

ამ მოდელის ობიექტები იქმნება თითქმის ყველაფრისგან, რაც HTML-შია (ტეგები, ტექსტის შინაარსი, კომენტარები და ა.შ.), მათ შორის თავად დოკუმენტი. ურთიერთობები ამ ობიექტებს შორის მოდელში იქმნება იმის საფუძველზე, თუ როგორ არის განლაგებული HTML ელემენტები ერთმანეთთან შედარებით კოდში.

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

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

DOM-თან მუშაობისთვის უმეტეს შემთხვევაში გამოიყენება JavaScript, რადგან... დღეს ეს არის ერთადერთი პროგრამირების ენა, რომელშიც სკრიპტები შეიძლება შესრულდეს ბრაუზერში.

რატომ გვჭირდება DOM API? ჩვენ გვჭირდება ის, რომ ჩვენ შეგვიძლია გამოვიყენოთ JavaScript გვერდის შესაცვლელად, ე.ი. გახადეთ ის დინამიური და ინტერაქტიული.

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

დღესდღეობით ინტერნეტში პრაქტიკულად არ არსებობს საიტები, რომელთა სცენარი არ იმუშავებს DOM-თან.

რისგან შედგება გვერდის HTML კოდი?

სანამ დოკუმენტის ობიექტის მოდელის შესწავლაზე გადახვალთ, ჯერ უნდა გახსოვდეთ, რა არის ვებ გვერდის (HTML დოკუმენტი) საწყისი კოდი.

ვებ გვერდის საწყისი კოდი შედგება ტეგებისგან, ატრიბუტებისაგან, კომენტარებისა და ტექსტისაგან. ტეგები HTML-ის ძირითადი სინტაქსური კონსტრუქციაა. მათი უმრავლესობა დაწყვილებულია. ამ შემთხვევაში, ერთი მათგანი იხსნება და მეორე იხურება. ტეგების ერთი ასეთი წყვილი ქმნის HTML ელემენტს. HTML ელემენტები შეიძლება ჰქონდეს დამატებითი პარამეტრები- ატრიბუტები.

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

მაგალითად, განიხილეთ შემდეგი HTMLკოდი:

გვერდის სათაური სტატიის სათაური სტატიის განყოფილება

სტატიის შინაარსი

ამ კოდში ძირეული ელემენტია html. იგი შეიცავს თავისა და სხეულის ელემენტებს. head ელემენტი შეიცავს სათაურს, ხოლო სხეული შეიცავს h1-ს და div-ს. div ელემენტი თავის მხრივ შეიცავს h2 და p .

ახლა ვნახოთ, როგორ აშენებს ბრაუზერი DOM ხეს HTML კოდის საფუძველზე.

როგორ არის აგებული დოკუმენტის DOM ხე?

როგორც უკვე აღვწერეთ, ბრაუზერი აშენებს ხეს HTML ელემენტებზე და სხვა ერთეულებზე საწყისი კოდიგვერდები. ამ პროცესის განხორციელებისას მხედველობაში მიიღება ელემენტების ერთმანეთში ბუდობა.

შედეგად, ბრაუზერი იყენებს მიღებულ DOM ხეს არა მხოლოდ თავის მუშაობაში, არამედ გვაწვდის API-ს. კომფორტული სამუშაომასთან ერთად JavaScript-ის საშუალებით.

DOM-ის აგებისას ბრაუზერი ქმნის ობიექტებს (DOM ხის კვანძები) HTML ელემენტებიდან, ტექსტიდან, კომენტარებიდან და ამ ენის სხვა ერთეულებიდან.

უმეტეს შემთხვევაში, ვებ დეველოპერებს აინტერესებთ მხოლოდ HTML ელემენტებიდან ჩამოყალიბებული ობიექტები (კვანძები).

ამავდროულად, ბრაუზერი არა მხოლოდ ქმნის ობიექტებს HTML ელემენტებიდან, არამედ აკავშირებს მათ ერთმანეთთან გარკვეული კავშირებით, იმისდა მიხედვით, თუ როგორ უკავშირდება თითოეული მათგანი მეორეს კოდში.

ელემენტები, რომლებიც პირდაპირ რომელიმე ელემენტშია, მასთან მიმართებაში ბავშვები არიან. და ის თითოეული მათგანის მშობელია. გარდა ამისა, ყველა ეს ელემენტი არის და-ძმები (ძმები) ერთმანეთთან მიმართებაში.

უფრო მეტიც, HTML-ში ნებისმიერ ელემენტს ყოველთვის აქვს ერთი მშობელი (HTML ელემენტი, რომელშიც ის პირდაპირ მდებარეობს). HTML-ში ელემენტს არ შეიძლება ჰქონდეს რამდენიმე მშობელი. ერთადერთი გამონაკლისი არის html ელემენტი. მას მშობელი არ ჰყავს.

იმისათვის, რომ მიიღოთ DOM ხე, როგორც მას ბრაუზერი აშენებს, თქვენ უბრალოდ უნდა „მოაწყოთ“ ყველა ელემენტი ერთმანეთთან ურთიერთობის მიხედვით.

DOM ხის შექმნა ხდება ზემოდან ქვემოდან.

ამ შემთხვევაში, DOM ხის ფესვი ყოველთვის არის თავად დოკუმენტი (დოკუმენტის კვანძი). შემდეგი, ხე აგებულია HTML კოდის სტრუქტურის მიხედვით.

მაგალითად, HTML კოდს, რომელსაც ზემოთ ვიხილეთ, ექნება შემდეგი DOM ხე:

ამ ხის ზედა ნაწილში არის დოკუმენტის კვანძი. ეს კვანძი ასოცირდება html-თან, ეს მისი შვილია. html კვანძი იქმნება html (...) ელემენტით. head(...) და body(...) კვანძებს აქვთ მშობელი ურთიერთობა html-თან. ერთმანეთთან მიმართებაში ისინი და-ძმა არიან, რადგან ჰყავს ერთი მშობელი. სათავე კვანძი ასოცირდება სათაურთან (lt;title>...), ეს მისი შვილია. h1 და div კვანძები ასოცირდება სხეულთან, რომელიც მათი მშობელია. div კვანძი დაკავშირებულია h2(...) და p(), ისინი მისი შვილები არიან.

ხე იწყება, როგორც ზემოთ აღინიშნა, დოკუმენტის ობიექტით (კვანძით). მას თავის მხრივ აქვს ერთი შვილობილი კვანძი, რომელიც ჩამოყალიბებულია html (...) ელემენტით. თავი(...) და სხეული(...) ელემენტები html-შია და, შესაბამისად, მისი შვილებია. შემდეგი, მთავარი კვანძი არის სათაურის მშობელი (lt;title>...). h1 და div ელემენტები მოთავსებულია სხეულში, რაც იმას ნიშნავს, რომ ისინი მისი შვილები არიან. div პირდაპირ შეიცავს ელემენტებს h2 (...) და p (). ეს ნიშნავს, რომ div კვანძი თითოეული მათგანისთვის არის მშობელი.

ასე მარტივია ბრაუზერში DOM ხის აშენება HTML კოდის საფუძველზე.

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

ვარჯიში

ნახატზე ნაჩვენები DOM ხის საფუძველზე შექმენით HTML კოდი.

მუშაობა DOM მოდელთან

ყველა Window ობიექტს აქვს დოკუმენტის თვისება, რომელიც ეხება Document ობიექტს. ეს დოკუმენტის ობიექტი არ არის დამოუკიდებელი ობიექტი. ეს არის ვრცელი API-ის ცენტრალური ობიექტი, რომელიც ცნობილია როგორც Document Object Model (DOM), რომელიც განსაზღვრავს, თუ როგორ შეიძლება დოკუმენტის შინაარსზე წვდომა.

DOM მიმოხილვა

Document Object Model (DOM) არის ფუნდამენტური აპლიკაციის პროგრამირების ინტერფეისი, რომელიც უზრუნველყოფს HTML და XML დოკუმენტების შინაარსთან მუშაობის უნარს. DOM აპლიკაციის პროგრამირების ინტერფეისი (API) არ არის განსაკუთრებით რთული, მაგრამ არსებობს უამრავი არქიტექტურული მახასიათებელი, რომელიც უნდა იცოდეთ.

უპირველეს ყოვლისა, თქვენ უნდა გესმოდეთ, რომ წყობილი HTML ელემენტებიან XML დოკუმენტები წარმოდგენილია როგორც DOM ობიექტების ხე. HTML დოკუმენტის ხის ხედი შეიცავს კვანძებს, რომლებიც წარმოადგენენ ელემენტებს ან ტეგებს, როგორიცაა და

და კვანძები, რომლებიც წარმოადგენენ ტექსტის ხაზებს. HTML დოკუმენტი ასევე შეიძლება შეიცავდეს კვანძებს, რომლებიც წარმოადგენენ HTML კომენტარებს. განვიხილოთ შემდეგი მარტივი HTML დოკუმენტი:

ნიმუში დოკუმენტი ეს არის HTML დოკუმენტი

მაგალითი მარტივიტექსტი.

ამ დოკუმენტის DOM წარმოდგენა ნაჩვენებია შემდეგ დიაგრამაზე:

მათთვის, ვინც არ იცნობს ხის სტრუქტურებს კომპიუტერულ პროგრამირებაში, სასარგებლოა იმის ცოდნა, რომ მათი აღწერის ტერმინოლოგია ნასესხები იყო ოჯახის ხეებიდან. ამ კვანძის პირდაპირ მდებარე კვანძს ეწოდება მშობელიამ კვანძთან მიმართებაში. კვანძები, რომლებიც მდებარეობს ერთ დონეზე მეორე კვანძის ქვემოთ შვილობილი კომპანიებიამ კვანძთან მიმართებაში. კვანძები, რომლებიც იმავე დონეზე არიან და აქვთ ერთი და იგივე მშობელი, ეწოდება ძმურად. კვანძები, რომლებიც მდებარეობს ნებისმიერი რაოდენობის დონეზე სხვა კვანძის ქვემოთ, მისი შვილები არიან. მშობელი, ბებია, ბაბუა და ნებისმიერი სხვა კვანძი მოცემული კვანძის ზემოთ მისი წინაპრები არიან.

ამ დიაგრამაში თითოეული მართკუთხედი არის დოკუმენტის კვანძი, რომელიც წარმოდგენილია Node ობიექტით. გაითვალისწინეთ, რომ ფიგურაში ნაჩვენებია სამი განსხვავებული ტიპის კვანძი. ხის ფესვი არის Document კვანძი, რომელიც წარმოადგენს მთელ დოკუმენტს. HTML ელემენტების გამომსახველი კვანძები არის Element ტიპის კვანძები, ხოლო ტექსტის გამომსახველი კვანძები არის ტექსტის ტიპის კვანძები. Document, Element და Text არის Node კლასის ქვეკლასები. Document და Element არის ორი ყველაზე მნიშვნელოვანი კლასი DOM-ში.

კვანძის ტიპი და მისი ქვეტიპები ქმნიან ტიპის იერარქიას, რომელიც ნაჩვენებია ქვემოთ მოცემულ დიაგრამაზე. გაითვალისწინეთ ფორმალური განსხვავებები ზოგადი ტიპის Document და Element და HTMLDocument და HTMLElement ტიპებს შორის. Document type წარმოადგენს HTML და XML დოკუმენტს, ხოლო Element კლასი წარმოადგენს ამ დოკუმენტის ელემენტს. HTMLDocument და HTMLElement ქვეკლასები წარმოადგენენ კონკრეტულად HTML დოკუმენტს და მის ელემენტებს:

ამ დიაგრამაში ასევე უნდა აღინიშნოს, რომ დიდი რაოდენობით HTMLElement კლასის ქვეტიპები, რომლებიც წარმოადგენენ HTML ელემენტების სპეციფიკურ ტიპებს. თითოეული მათგანი განსაზღვრავს JavaScript თვისებებს, რომლებიც ასახავს კონკრეტული ელემენტის ან ელემენტების ჯგუფის HTML ატრიბუტებს. ზოგიერთი კონკრეტული კლასი განსაზღვრავს დამატებით თვისებებს ან მეთოდებს, რომლებიც არ ასახავს HTML მარკირების ენის სინტაქსს.

დოკუმენტის ელემენტების შერჩევა

უმრავლესობის მუშაობა კლიენტის პროგრამები JavaScript-ში ის გარკვეულწილად ასოცირდება დოკუმენტის ელემენტების მანიპულირებასთან. გაშვების დროს ამ პროგრამებს შეუძლიათ გამოიყენონ გლობალური ცვლადი დოკუმენტი, რომელიც ეხება Document ობიექტს. თუმცა, დოკუმენტის ელემენტებზე ნებისმიერი მანიპულაციის შესასრულებლად, პროგრამამ უნდა მოიპოვოს ან შეარჩიოს ელემენტის ობიექტები, რომლებიც ეხება ამ დოკუმენტის ელემენტებს. DOM განსაზღვრავს ელემენტების არჩევის რამდენიმე გზას. თქვენ შეგიძლიათ აირჩიოთ დოკუმენტის ელემენტი ან ელემენტები:

id ატრიბუტის მნიშვნელობით;

სახელის ატრიბუტის მნიშვნელობით;

ტეგის სახელით;

CSS კლასის ან კლასების სახელით;

კონკრეტული CSS სელექტორის შესატყვისით.

ელემენტების შერჩევის ყველა ეს ტექნიკა აღწერილია შემდეგ ქვეთავებში.

ელემენტების შერჩევა id ატრიბუტის მნიშვნელობით

ყველა HTML ელემენტს აქვს id ატრიბუტები. ამ ატრიბუტის მნიშვნელობა უნდა იყოს უნიკალური დოკუმენტში - ერთსა და იმავე დოკუმენტში ორ ელემენტს არ უნდა ჰქონდეს იგივე id ატრიბუტის მნიშვნელობა. ელემენტის არჩევა უნიკალური ღირებულება id ატრიბუტის გამოყენება შესაძლებელია Document ობიექტის getElementById() მეთოდის გამოყენებით:

Var section1 = document.getElementById("section1");

ეს არის ელემენტების არჩევის უმარტივესი და ყველაზე გავრცელებული გზა. თუ თქვენს სკრიპტს უნდა შეეძლოს დოკუმენტის ელემენტების კონკრეტული ნაკრების მანიპულირება, მიანიჭეთ მნიშვნელობები ამ ელემენტების id ატრიბუტებს და გამოიყენეთ მათი მოძიების შესაძლებლობა ამ მნიშვნელობების გამოყენებით.

ვერსიებში Internet Explorer IE8-ის ქვემოთ, getElementById() მეთოდი ეძებს id ატრიბუტის მნიშვნელობებს რეგისტრის გარეშე და ასევე აბრუნებს ელემენტებს, რომლებიც ემთხვევა სახელის ატრიბუტის მნიშვნელობას.

ელემენტების შერჩევა სახელის ატრიბუტის მნიშვნელობით

სახელი HTML ატრიბუტი თავდაპირველად გამიზნული იყო ფორმის ელემენტების დასასახელებლად და ამ ატრიბუტის მნიშვნელობა გამოიყენებოდა სერვერზე ფორმის მონაცემების გაგზავნისას. id ატრიბუტის მსგავსად, სახელის ატრიბუტი ანიჭებს სახელს ელემენტს. თუმცა, id-ისგან განსხვავებით, სახელის ატრიბუტის მნიშვნელობა არ უნდა იყოს უნიკალური: რამდენიმე ელემენტს შეიძლება ჰქონდეს ერთი და იგივე სახელი, რაც საკმაოდ გავრცელებულია რადიო ღილაკებისა და ჩექმების ფორმებში გამოყენებისას. გარდა ამისა, id-ისგან განსხვავებით, სახელის ატრიბუტი დაშვებულია მხოლოდ გარკვეულ HTML ელემენტებზე, მათ შორის ფორმებზე, ფორმის ელემენტებზე და .

თქვენ შეგიძლიათ აირჩიოთ HTML ელემენტები მათი სახელის ატრიბუტების მნიშვნელობების საფუძველზე Document ობიექტის getElementsByName() მეთოდის გამოყენებით:

Var radiobuttons = document.getElementsByName("საყვარელი_ფერი");

getElementsByName() მეთოდი არ არის განსაზღვრული Document კლასით, არამედ HTMLDocument კლასით, ამიტომ ის ხელმისაწვდომია მხოლოდ HTML დოკუმენტებში და მიუწვდომელია XML დოკუმენტებში. ის აბრუნებს NodeList ობიექტს, რომელიც იქცევა ელემენტის ობიექტების მხოლოდ წაკითხვადი მასივის მსგავსად.

IE-ში getElementsByName() მეთოდი ასევე აბრუნებს ელემენტებს, რომელთა id ატრიბუტის მნიშვნელობა ემთხვევა მითითებულ მნიშვნელობას. თავსებადობის უზრუნველსაყოფად სხვადასხვა ვერსიებიბრაუზერებში, ფრთხილად უნდა იყოთ ატრიბუტების მნიშვნელობების არჩევისას და არ გამოიყენოთ იგივე სტრიქონები, როგორც მნიშვნელობები სახელისა და id ატრიბუტებისთვის.

აირჩიეთ ელემენტი ტიპის მიხედვით

Document ობიექტის getElementsByTagName() მეთოდი საშუალებას გაძლევთ აირჩიოთ მითითებული ტიპის ყველა HTML ან XML ელემენტი (ან ტეგის სახელით). მაგალითად, შეგიძლიათ მიიღოთ მხოლოდ წაკითხვადი მასივის მსგავსი ობიექტი, რომელიც შეიცავს დოკუმენტის ყველა ელემენტის Element-ის ობიექტებს შემდეგნაირად:

Var spans = document.getElementsByTagName("span");

getElementsByName() მეთოდის მსგავსად, getElementsByTagName() აბრუნებს NodeList ობიექტს. დოკუმენტის ელემენტები შედის NodeList მასივში იმავე თანმიმდევრობით, რომლითაც ისინი ჩნდებიან დოკუმენტში, ე.ი. პირველი ელემენტი

დოკუმენტში შეგიძლიათ აირჩიოთ:

Var firstParagraph = document.getElementsByTagName("p");

HTML ტეგების სახელები არ არის რეგისტრირებული და როდესაც getElementsByTagName() გამოიყენება HTML დოკუმენტზე, ის ახორციელებს შედარებას ტეგის სახელთან მიმართებაში. მაგალითად, ზემოთ შექმნილი spans ცვლადი ასევე მოიცავს ყველა ელემენტს, რომელიც დაწერილია როგორც .

შეგიძლიათ მიიღოთ NodeList, რომელიც შეიცავს დოკუმენტის ყველა ელემენტს, wildcard სიმბოლოს "*"-ის გადაცემით getElementsByTagName() მეთოდზე.

გარდა ამისა, Element კლასი ასევე განსაზღვრავს getElementsByTagName() მეთოდს. ის მოქმედებს ზუსტად ისე, როგორც მეთოდის Document კლასის ვერსია, მაგრამ ირჩევს მხოლოდ ელემენტებს, რომლებიც არიან იმ ელემენტის შთამომავლები, რომელზედაც მეთოდია გამოძახებული. ანუ იპოვნეთ ყველა ელემენტი პირველი ელემენტის შიგნით

ამის გაკეთება შეგიძლიათ შემდეგნაირად:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

ისტორიული მიზეზების გამო, HTMLDocument კლასი განსაზღვრავს სპეციალურ თვისებებს გარკვეული ტიპის კვანძების წვდომისთვის. Თვისებები სურათები, ფორმებიდა ბმულებიმაგალითად, მიმართეთ ობიექტებს, რომლებიც იქცევიან მხოლოდ წაკითხული მასივების მსგავსად, რომლებიც შეიცავს ელემენტებს , და (მაგრამ მხოლოდ ეს ტეგები , რომლებსაც აქვთ href ატრიბუტი). ეს თვისებები ეხება HTMLCollection ობიექტებს, რომლებიც ძალიან ჰგავს NodeList ობიექტებს, მაგრამ შეიძლება დამატებით იყოს ინდექსირებული id და სახელის ატრიბუტების მნიშვნელობებით.

HTMLDocument ობიექტი ასევე განსაზღვრავს სინონიმურ თვისებებს ჩაშენებებსა და დანამატებს, რომლებიც წარმოადგენს HTMLCollection ელემენტების კოლექციებს. Anchors თვისება არასტანდარტულია, მაგრამ მისი გამოყენება შესაძლებელია ელემენტებზე წვდომისთვის , რომელსაც აქვს სახელის ატრიბუტი, მაგრამ არა href ატრიბუტი. სკრიპტების თვისება განისაზღვრება HTML5 სტანდარტით და წარმოადგენს HTMLCollection ელემენტების კრებულს.

გარდა ამისა, HTMLDocument ობიექტი განსაზღვრავს ორ თვისებას, რომელთაგან თითოეული ეხება არა კოლექციას, არამედ ერთ ელემენტს. document.body თვისება წარმოადგენს HTML დოკუმენტის ელემენტს, ხოლო document.head თვისება წარმოადგენს . ეს თვისებები ყოველთვის განსაზღვრულია დოკუმენტში: მაშინაც კი, თუ წყარო დოკუმენტი არ შეიცავს და ელემენტებს, ბრაუზერი შექმნის მათ იმპლიციტურად. Document ობიექტის documentElement თვისება ეხება დოკუმენტის ძირეულ ელემენტს. HTML დოკუმენტებში ის ყოველთვის წარმოადგენს .

ელემენტების შერჩევა CSS კლასის მიხედვით

HTML კლასის ატრიბუტის მნიშვნელობა არის ნულოვანი ან მეტი იდენტიფიკატორის სია, გამოყოფილი ინტერვალით. ის საშუალებას გაძლევთ განსაზღვროთ დაკავშირებული დოკუმენტის ელემენტების კომპლექტები: ნებისმიერი ელემენტი, რომელსაც აქვს იგივე იდენტიფიკატორი კლასის ატრიბუტში, არის იმავე ნაკრების ნაწილი. სიტყვა კლასი დაცულია JavaScript-ში, ამიტომ კლიენტის მხარეს JavaScript იყენებს className თვისებას HTML კლასის ატრიბუტის მნიშვნელობის შესანახად.

როგორც წესი, კლასის ატრიბუტი გამოიყენება CSS კასკადური სტილის ფურცლებთან ერთად, რათა გამოიყენოს საერთო რენდერის სტილი ნაკრების ყველა წევრზე. თუმცა, გარდა ამისა, HTML5 სტანდარტი განსაზღვრავს getElementsByClassName() მეთოდს, რომელიც საშუალებას გაძლევთ აირჩიოთ დოკუმენტის მრავალი ელემენტი მათი კლასის ატრიბუტების იდენტიფიკატორების საფუძველზე.

getElementsByTagName() მეთოდის მსგავსად, getElementsByClassName() მეთოდის გამოძახება შესაძლებელია როგორც HTML დოკუმენტებზე, ასევე HTML ელემენტებზე და აბრუნებს ცოცხალ NodeList ობიექტს, რომელიც შეიცავს დოკუმენტის ან ელემენტის ყველა შთამომავალს, რომელიც შეესაბამება საძიებო კრიტერიუმებს.

getElementsByClassName() მეთოდი იღებს ერთი სტრიქონის არგუმენტს, მაგრამ თავად სტრიქონი შეიძლება შეიცავდეს მრავალ იდენტიფიკატორს, გამოყოფილი სივრცეებით. ყველა ელემენტი, რომელთა კლასის ატრიბუტები შეიცავს ყველა მითითებულ იდენტიფიკატორს, ჩაითვლება შესატყვისად. იდენტიფიკატორების თანმიმდევრობას არ აქვს მნიშვნელობა. გაითვალისწინეთ, რომ როგორც კლასის ატრიბუტში, ასევე getElementsByClassName() მეთოდის არგუმენტში, კლასის იდენტიფიკატორები გამოყოფილია ინტერვალით და არა მძიმეებით.

ქვემოთ მოცემულია getElementsByClassName() მეთოდის გამოყენების რამდენიმე მაგალითი:

// იპოვეთ ყველა ელემენტი კლასით "warning" var warnings = document.getElementsByClassName("warning"); // იპოვნეთ ელემენტის ყველა შთამომავალი იდენტიფიკატორებით "log" // კლასებით "error" და "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("საბედისწერო შეცდომა");

ელემენტების შერჩევა CSS სელექტორების გამოყენებით

CSS Cascading Style Sheets-ს აქვს ძალიან ძლიერი სინტაქსური კონსტრუქტები, რომლებიც ცნობილია როგორც სელექტორები, რომლებიც საშუალებას გაძლევთ აღწეროთ ელემენტები ან ელემენტების ნაკრები დოკუმენტში. CSS3 სელექტორების სტანდარტიზაციასთან ერთად, განსაზღვრავს კიდევ ერთი W3C სტანდარტი, რომელიც ცნობილია როგორც Selectors API JavaScript მეთოდებიმითითებულ სელექტორთან შესატყვისი ელემენტების მისაღებად.

ამ API-ს გასაღები არის Document ობიექტის querySelectorAll() მეთოდი. იგი იღებს ერთი სტრიქონის არგუმენტს CSS სელექტორთან და აბრუნებს NodeList ობიექტს, რომელიც წარმოადგენს დოკუმენტის ყველა ელემენტს, რომელიც ემთხვევა სელექტორს.

querySelectorAll() მეთოდის გარდა, დოკუმენტის ობიექტი ასევე განსაზღვრავს querySelector() მეთოდს, რომელიც მსგავსია querySelectorAll() მეთოდის გარდა იმისა, რომ ის აბრუნებს მხოლოდ პირველ (დოკუმენტის თანმიმდევრობით) შესატყვის ელემენტს, ან ნულს, თუ არ არსებობს. შესატყვისი ელემენტები.

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

დოკუმენტის სტრუქტურა და დოკუმენტის ნავიგაცია

დოკუმენტის ელემენტის შერჩევის შემდეგ, ზოგჯერ საჭიროა დოკუმენტის სტრუქტურულად დაკავშირებული ნაწილების (მშობელი, და-ძმა, შვილი) მოძიება. Document ობიექტი შეიძლება მივიჩნიოთ, როგორც Node ობიექტების ხე. Node ტიპი განსაზღვრავს თვისებებს, რომლებიც საშუალებას გაძლევთ ნავიგაცია ასეთ ხეზე. არსებობს კიდევ ერთი აპლიკაციის ინტერფეისი დოკუმენტების ნავიგაციისთვის, როგორიცაა Element ობიექტის ხე.

დოკუმენტები, როგორც კვანძის ხეები

Document ობიექტი, მისი Element ობიექტები და ტექსტის ობიექტები, რომლებიც წარმოადგენენ ტექსტის ფრაგმენტებს დოკუმენტში, არის Node ობიექტები. Node კლასი განსაზღვრავს შემდეგ მნიშვნელოვან თვისებებს:

მშობელი კვანძი

ამ კვანძის მშობელი კვანძი, ან null კვანძებისთვის, რომლებსაც არ აქვთ მშობელი, როგორიცაა Document.

ბავშვის კვანძები

წაკითხვადი მასივის მსგავსი ობიექტი (NodeList), რომელიც უზრუნველყოფს ბავშვის კვანძების წარმოდგენას.

პირველი შვილი, უკანასკნელი შვილი

პირველი და ბოლო შვილობილი კვანძები, ან ნულოვანი, თუ მოცემულ კვანძს არ აქვს შვილობილი კვანძები.

შემდეგი ძმა, წინა ძმა

შემდეგი და წინა ძმური კვანძები. და-ძმის კვანძები არის ორი კვანძი, რომლებსაც აქვთ ერთი და იგივე მშობელი. თანმიმდევრობა, რომლითაც ისინი გამოჩნდებიან, შეესაბამება დოკუმენტში მოცემულ თანმიმდევრობას. ეს თვისებები აკავშირებს კვანძებს ორმაგად დაკავშირებულ სიაში.

nodeType

ამ კვანძის ტიპი. Document-ის ტიპის კვანძებს აქვთ 9 მნიშვნელობა ამ თვისებაში. Element-ის ტიპის კვანძები - მნიშვნელობა 1. ტექსტური კვანძები ტიპის Text - მნიშვნელობა 3. კვანძები ტიპის Comments - მნიშვნელობა 8 და კვანძები DocumentFragment ტიპის - მნიშვნელობა 11.

nodeValue

ტექსტისა და კომენტარების კვანძების ტექსტური შინაარსი.

nodeName

ელემენტის ტეგის სახელი ყველა სიმბოლოთი გადაკეთებულია დიდზე.

Node კლასის ამ თვისებების გამოყენებით, შეგიძლიათ მიუთითოთ Document ობიექტის პირველი შვილი კვანძის მეორე შვილი კვანძი, როგორც ეს ნაჩვენებია ქვემოთ:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

დავუშვათ, რომ დოკუმენტს აქვს შემდეგი ფორმა:

TestHello World!

მაშინ პირველი შვილი კვანძის მეორე შვილი კვანძი იქნება ელემენტი. nodeType თვისებაში ის შეიცავს მნიშვნელობას 1 და nodeName თვისებაში შეიცავს მნიშვნელობას „BODY“.

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

დოკუმენტები, როგორც ელემენტების ხეები

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

ამ აპლიკაციის ინტერფეისის პირველი ნაწილი არის ელემენტის ობიექტების საბავშვო საკუთრება. childNodes თვისების მსგავსად, მისი მნიშვნელობა არის NodeList ობიექტი. თუმცა, childNodes თვისებისგან განსხვავებით, ბავშვების სია შეიცავს მხოლოდ Element ობიექტებს.

გაითვალისწინეთ, რომ ტექსტისა და კომენტარის კვანძებს არ აქვთ შვილობილი კვანძები. ეს ნიშნავს, რომ ზემოთ აღწერილი Node.parentNode თვისება არასოდეს აბრუნებს ტექსტის ან კომენტარის ტიპის კვანძებს. ნებისმიერი Element ობიექტის parentNode თვისების მნიშვნელობა ყოველთვის იქნება სხვა Element ობიექტი ან ხის ფესვი - Document ან DocumentFragment ობიექტი.

დოკუმენტის ელემენტის ნავიგაციის აპლიკაციის ინტერფეისის მეორე ნაწილი არის Element ობიექტის თვისებები, მსგავსია Node ობიექტის შვილობილი და ძმა კვანძების წვდომის თვისებები:

firstElementChild, lastElementChild

მსგავსია firstChild და lastChild თვისებები, მაგრამ დააბრუნეთ ბავშვის ელემენტები.

nextElementSibling, წინაElementSibling

მსგავსია nextSibling და previousSibling თვისებები, მაგრამ დააბრუნეთ ძმა ელემენტები.

childElementCount

რაოდენობა ბავშვის ელემენტები. აბრუნებს იგივე მნიშვნელობას, რასაც kids.length თვისება.

ბავშვებისა და და-ძმის ელემენტების წვდომის ეს თვისებები სტანდარტიზებულია და დანერგილია ყველაში მიმდინარე ბრაუზერებიგარდა IE.

innerHTML
var text = element.innerHTML;
element.innerHTML = "";
ახალი innerHTML-ის მინიჭება კოდს გადაწერს, მაშინაც კი, თუ ახალი მნიშვნელობა დაერთოს მიმდინარეს (+=). ამ გზით დამატებული სკრიპტები არ სრულდება.

outerHTML
შეიცავს მთელ ელემენტს და მისი შეცვლა შეუძლებელია. ტექნიკურად, ამ თვისებაზე ჩაწერა ქმნის ახალ ელემენტს, რომელიც ცვლის ძველს. ცვლადებში ძველი ელემენტის მითითებები არ იცვლება.

მონაცემები
textNode.data - ტექსტის კვანძებისა და კომენტარების შინაარსი

ტექსტის შინაარსი
element.textContent - ტექსტი ელემენტის შიგნით ტეგების გარეშე.
ასევე არსებობს არასტანდარტული თვისება, სახელად innerText, რომელსაც ბევრი საერთო აქვს textContent-თან.

ელემენტის ხილვადობა

დამალული
ელემენტი.დამალული = ჭეშმარიტი
ფარული ატრიბუტი არ არის მხარდაჭერილი IE11-ში.

ატრიბუტები

DOM-ში სტანდარტული ატრიბუტების უმეტესობა ხდება ობიექტის თვისებები:
element.id = "id"
არასტანდარტული ატრიბუტებისთვის, საკუთრება არ არის შექმნილი (დაუზუსტებელი)

თქვენ შეგიძლიათ შექმნათ თქვენი საკუთარი DOM თვისებები:
element.myData = (სახელი:"ჯონ", გვარი:"სმიტი");
და მეთოდები:
element.myFunc = ფუნქცია())(გაფრთხილება this.nodeName);
ეს მუშაობს, რადგან DOM კვანძები არის რეგულარული JavaScript ობიექტები. ასეთი არასტანდარტული თვისებები და მეთოდები გავლენას არ ახდენს ტეგის ჩვენებაზე და ჩანს მხოლოდ JavaScript-ში.

ტეგის ატრიბუტებზე წვდომა:
element.hasAttribute(სახელი)
element.getAttribute(სახელი)
element.setAttribute(სახელი, მნიშვნელობა)
element.removeAttribute(name)
element.attributes არის ატრიბუტების ფსევდომასივი.

ატრიბუტები არის რეგისტრის მგრძნობიარე (html), ხოლო თვისებები - რეგისტრის მგრძნობიარე (javaScript).
ატრიბუტის მნიშვნელობა ყოველთვის არის სტრიქონი.

ატრიბუტი: a.getAttribute("href") - აჩვენებს ზუსტად იმას, რაც არის HTML-ში
თვისება: a.href - შეიძლება განსხვავდებოდეს ატრიბუტის მნიშვნელობისაგან
ყველაზე ხშირად, საკუთრება დამოკიდებულია ატრიბუტზე, მაგრამ არა პირიქით. ქონების შეცვლა არ იმოქმედებს ატრიბუტზე.

კლასებთან მუშაობა

კლასის ატრიბუტი შეესაბამება ორ თვისებას:
className - სტრიქონი
classList - ობიექტი

classList ობიექტის მეთოდები:
element.classList.contains("class") - ამოწმებს შეიცავს თუ არა ობიექტი მოცემულ კლასს
element.classList.add("კლასი")
element.classList.remove("კლასი")
element.classList.toggle ("კლასი")

classList არის ფსევდო მასივი და შეიძლება განმეორდეს for loop-ის მეშვეობით.

მონაცემთა ატრიბუტები

მორგებული მონაცემთა ატრიბუტები ხელმისაწვდომია არა მხოლოდ ატრიბუტების სახით, არამედ მონაცემთა საკუთრების მეშვეობით
data-about = "გარკვეული მნიშვნელობა"
element.dataset.about

კვანძის შეკვეთა

მშობელი.შეიცავს(შვილი) - ჭეშმარიტი ან მცდარი
ამოწმებს, არის თუ არა ბავშვის კვანძი მშობლის შიგნით

nodeA.compareDocumentPosition(nodeB) - გვაწვდის ინფორმაციას ელემენტების შინაარსისა და შედარებითი რიგის შესახებ. დაბრუნებული მნიშვნელობა არის ბიტმასკი:

კვანძების დამატება და ამოღება

var div = document.createElement ("div")
document.createTextNode ("ტექსტი")

parent.appendChild(element) - ელემენტი ემატება მშობლის ბოლოს
parent.insertBefore(element, nextSibling) - ელემენტი ემატება nextSibling-მდე
parent.insertBefore(element, parent.firstChild) - დამატებულია დასაწყისში
parent.insertBefore(element, null) - იმუშავებს appendChild-ის მსგავსად
ჩასმის ყველა მეთოდი აბრუნებს ჩასმული კვანძს.
ელემენტის გადაადგილებისას არ გჭირდებათ მისი ძველი ადგილიდან ამოღება; ჩასმის მეთოდი ამას ავტომატურად აკეთებს.

element.insertAdjacentHTML(where, html) - აყენებს თვითნებურ HTML კოდს დოკუმენტში ნებისმიერ ადგილას. Where მიუთითებს, სად უნდა იყოს ჩასმული html ელემენტთან მიმართებაში - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(სად, ტექსტი)
ბოლო ორი მეთოდი არ არის მხარდაჭერილი Firefox-ში

node.append(...nodes) – ათავსებს კვანძებს კვანძის ბოლოს,
node.prepend(...nodes) – ათავსებს კვანძებს კვანძის დასაწყისში,
node.after(...nodes) – ჩასმა კვანძები კვანძის შემდეგ,
node.before(...nodes) – ათავსებს კვანძებს კვანძის წინ,
node.replaceWith(...nodes) – კვანძების ნაცვლად ათავსებს კვანძებს.
აქ კვანძები არის კვანძები ან სტრიქონები, ნებისმიერი რაოდენობით და კომბინაციით, ჩამოთვლილი მძიმით გამოყოფილი.

var fragment = document.createDocumentFragment() - ახდენს DOM კვანძის სიმულაციას, რომელიც დოკუმენტში ჩასმისას ქრება და რჩება მხოლოდ მისი შთამომავლები. IN თანამედროვე ბრაუზერებიᲐრარეკომენდირებული.

element.cloneNode(true) - ელემენტის ღრმა ასლი
element.cloneNode(false) - კოპირება ბავშვის ელემენტების გარეშე

parent.removeChild(element)
parent.replaceChild(newElement, ელემენტი)
element.remove() - შლის ელემენტს პირდაპირ, მის მშობელზე მითითების გარეშე.
დისტანციური კვანძის დაბრუნების მეთოდები

W3C
DOM-ის შემქმნელები

სანამ დაიწყებთ DOM ტექნოლოგიის შესწავლას, თქვენ უკვე უნდა იცოდეთ საფუძვლები HTML ენები, CSS და გარდა ამისა, თქვენ უნდა წაიკითხოთ სტატიები HTML ფორმებზე (იცოდეთ როგორ შექმნათ ღილაკები, ტექსტური ველები და ა.შ.).

DOM (დოკუმენტის ობიექტის მოდელი)- დოკუმენტის ობიექტის მოდელი, შექმნილი W3C (World Wide Web Consortium) - მსოფლიო ქსელის კონსორციუმი.

DOM არის ვებ ტექნოლოგია, რომელიც საშუალებას გაძლევთ მართოთ HTML გვერდის ტეგები JavaScript ენის საშუალებით. DOM წარმოადგენს HTML ტეგებს, როგორც ობიექტებს თვისებებითა და მეთოდებით. თითოეულ HTML ტეგს (ობიექტს) HTML გვერდზე, DOM-ის წყალობით, აქვს თავისი უნიკალური მისამართი. ამ მისამართზე წვდომით JavaScript-ს შეუძლია HTML ტეგით მანიპულირება.

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

როგორ მუშაობს DOM

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

DOM-ის ისტორია

თავდაპირველად, DOM არ იყო სტანდარტიზებული და ორი არსებობდა იმ დროს Netscape ბრაუზერინავიგატორმა და Internet Explorer-მა შექმნეს DOM საკუთარი გაგებით. იმ დროს, ვებ პროგრამისტებს უნდა ესწავლათ DOM-ის ორი ვერსია.

ჩართულია ამ მომენტში W3C-მ მოახდინა DOM-ის სტანდარტიზება და ყველა ბრაუზერი ცდილობს დაიცვას ეს სტანდარტი.

ამ განყოფილებაში მოცემულია დოკუმენტის ობიექტის მოდელის (DOM) მოკლე შესავალი - რა არის DOM, როგორ არის მოწოდებული HTML და XML დოკუმენტების სტრუქტურები და როგორ ურთიერთქმედება მათთან. ეს განყოფილება შეიცავს ფონურ ინფორმაციას და მაგალითებს.

რა არის დოკუმენტის ობიექტის მოდელი (DOM)?

Document Object Model (DOM) არის პროგრამირების ინტერფეისი (API) HTML და XML დოკუმენტებისთვის. DOM უზრუნველყოფს დოკუმენტის სტრუქტურირებულ წარმოდგენას და განსაზღვრავს, თუ როგორ შეიძლება ამ სტრუქტურაზე წვდომა პროგრამების მიერ, რომლებსაც შეუძლიათ შეცვალონ დოკუმენტის შინაარსი, სტილი და სტრუქტურა. DOM ხედი შედგება კვანძებისა და ობიექტების სტრუქტურირებული ჯგუფისგან, რომლებსაც აქვთ თვისებები და მეთოდები. არსებითად, DOM აკავშირებს ვებ გვერდს სკრიპტირების ენებთან ან პროგრამირების ენებთან.

ვებ გვერდი არის დოკუმენტი. დოკუმენტი შეიძლება წარმოდგენილი იყოს როგორც ბრაუზერის ფანჯარაში, ასევე თავად HTML კოდში. ყოველ შემთხვევაში, ეს იგივე დოკუმენტია. DOM გთავაზობთ ამ დოკუმენტის წარმოდგენის, შენახვისა და მანიპულირების სხვა გზას. DOM სრულად უჭერს მხარს ვებ გვერდის ობიექტზე ორიენტირებულ წარმოდგენას, რაც შესაძლებელს ხდის მის შეცვლას სკრიპტირების ენის გამოყენებით, როგორიცაა JavaScript.

როგორ ხდება DOM-ზე წვდომა?

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

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

შემდეგ მაგალითს აქვს JavaScript კოდი განსაზღვრული ელემენტის შიგნით, ეს კოდიადგენს ფუნქციას დოკუმენტის ჩატვირთვისას (როდესაც მთელი DOM ხელმისაწვდომია გამოსაყენებლად). ეს ფუნქცია ქმნის ახალ H1 ელემენტს, ამატებს ტექსტს ამ ელემენტს და შემდეგ ამატებს H1 დოკუმენტის ხეს:

< html > < head > < script >// გაუშვით ეს ფუნქცია დოკუმენტის ფანჯრის ჩატვირთვისას. onload = ფუნქცია () ( // რამდენიმე ელემენტის შექმნა // დაცლა HTML გვერდისათაური = დოკუმენტი. createElement("h1"); heading_text = დოკუმენტი. createTextNode("დიდი თავი!") ; სათაური. appendChild( heading_text) ; დოკუმენტი. სხეული. appendChild( სათაური) ; )< body >მონაცემთა მნიშვნელოვანი ტიპები

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

ქვემოთ მოცემულია ცხრილი მოკლე აღწერაამ ტიპის მონაცემები.

დოკუმენტი	როდესაც წევრი აბრუნებს დოკუმენტის ტიპის ობიექტს (მაგალითად, ელემენტის მფლობელიDocument თვისება აბრუნებს დოკუმენტს, რომელსაც ის მიუთითებს), ეს დოკუმენტის ობიექტი არის მისი საკუთარი root ობიექტი. DOM დოკუმენტის მითითების განყოფილება აღწერს დოკუმენტის ობიექტს. ელემენტი
ელემენტი	აღნიშნავს DOM API-ს წევრის მიერ დაბრუნებულ ელემენტს ან კვანძს. იმის ნაცვლად, რომ ვთქვათ, რომ document.createElement() მეთოდი აბრუნებს მითითებას კვანძზე, ჩვენ უბრალოდ ვიტყვით, რომ ეს ელემენტი აბრუნებს ელემენტს, რომელიც უბრალოდ შეიქმნა DOM-ში. ელემენტის ობიექტები ახორციელებენ DOM ელემენტის ინტერფეისს და ასევე უფრო ზოგად კვანძის ინტერფეისს. ორივე ინტერფეისი შედის ამ დახმარებაში. nodeList
NodeList	ელემენტების მასივი, როგორიც არის Document.getElementsByTagName() მეთოდით დაბრუნებული. მასივის სპეციფიკურ ელემენტებზე წვდომა ინდექსით ხდება ორი გზით: list.item (1) ეს მეთოდები ექვივალენტურია. პირველ მეთოდში item() არის NodeList ობიექტის ერთადერთი მეთოდი. ეს უკანასკნელი იყენებს მასივის ნორმალურ სინტაქსს სიაში მეორე მნიშვნელობის მისაღებად.
ატრიბუტი	როდესაც ატრიბუტი დაბრუნდება API წევრის მიერ (მაგალითად, createAttribute() მეთოდი) ეს იქნება მითითება ობიექტზე, რომელიც უზრუნველყოფს სპეციალურ (თუმცა მცირე) ინტერფეისს ატრიბუტებისთვის. ატრიბუტები არის კვანძები DOM-ში, ისევე როგორც ელემენტები, თუმცა შეიძლება იშვიათად გამოიყენოთ ისინი ამ გზით.
სახელადNodeMap	namedNodeMap არის მასივის მსგავსი, მაგრამ ელემენტებზე წვდომა ხდება სახელით ან ინდექსით. ინდექსით წვდომა მხოლოდ ჩამონათვალის მოხერხებულობისთვისაა, რადგან ელემენტებს არ აქვთ კონკრეტული თანმიმდევრობა სიაში. ამ მონაცემთა ტიპს აქვს item() მეთოდი ამ მიზნით და ასევე შეგიძლიათ დაამატოთ და წაშალოთ ელემენტები namedNodeMap-დან

DOM ინტერფეისები

ეს არის გაკვეთილი ობიექტებისა და რეალური ნივთების შესახებ, რომელთა გამოყენება შეგიძლიათ DOM იერარქიის მანიპულირებისთვის. ბევრი ადგილია, სადაც იმის გაგება, თუ როგორ მუშაობს ის, შეიძლება გასაკვირი იყოს. მაგალითად, ობიექტი, რომელიც წარმოადგენს HTML ფორმის ელემენტს, იღებს თავის სახელს HTMLFormElement ინტერფეისიდან და კლასიName თვისებას HTMLElement ინტერფეისიდან. ორივე შემთხვევაში, თქვენთვის სასურველი საკუთრება არის ამ ფორმის ობიექტი.

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

ინტერფეისები და ობიექტები

ბევრი ობიექტი ახორციელებს მოქმედებებს მრავალი ინტერფეისიდან. მაგიდის ობიექტი, მაგალითად, ახორციელებს სპეციალურს, რომელიც მოიცავს მეთოდებს, როგორიცაა createCaption და insertRow. მაგრამ რადგან ეს არის ცხრილი, ის ასევე არის HTML ელემენტი, ცხრილი ახორციელებს ელემენტის ინტერფეისს, რომელიც აღწერილია განყოფილებაში. დაბოლოს, იმის გამო, რომ HTML ელემენტი (DOM გაგებით) არის კვანძი ხეში, რომელიც ქმნის ობიექტის მოდელს HTML ან XML გვერდისთვის, ცხრილის ელემენტი ასევე ახორციელებს უფრო ზოგად Node ინტერფეისს, საიდანაც ელემენტი არის მიღებული.

Var table = document.getElementById("ცხრილი"); var tableAttrs = table.attributes; // კვანძის/ელემენტის ინტერფეისი (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

ძირითადი ინტერფეისები DOM-ში

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

დოკუმენტი, ფანჯარა არის ობიექტები, რომელთა ინტერფეისებს ხშირად იყენებთ DOM პროგრამირებაში. ლაპარაკი მარტივი სიტყვებით, ფანჯრის ობიექტი წარმოადგენს რაღაც ბრაუზერის მსგავსს, ხოლო დოკუმენტის ობიექტი არის თავად დოკუმენტის ფესვი. ელემენტი მემკვიდრეობით იღებს საერთო კვანძის ინტერფეისს და ეს ინტერფეისები ერთად იძლევა ბევრ მეთოდსა და თვისებას, რომელთა გამოყენებაც შესაძლებელია ინდივიდუალური ელემენტები. ამ ელემენტებს ასევე შეიძლება ჰქონდეთ ცალკეული ინტერფეისები მონაცემთა ტიპებთან მუშაობისთვის, რომლებსაც ეს ელემენტები შეიცავს, როგორც წინა შემთხვევაში ცხრილის ობიექტის მაგალითში.

ქვემოთ არის მოკლე სიასაერთო API წევრები გამოიყენება პროგრამირების ვებ და XML გვერდებზე DOM-ის გამოყენებით:

• parentNode.appendChild(node)

DOM API ტესტირება

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

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

თქვენ შეგიძლიათ გამოიყენოთ ეს სატესტო გვერდი ან მსგავსი გვერდი, რათა შეამოწმოთ თქვენთვის საინტერესო DOM ინტერფეისები და ნახოთ როგორ მუშაობენ ისინი ბრაუზერებში. თქვენ შეგიძლიათ განაახლოთ test() ფუნქციის შიგთავსი საჭიროებისამებრ, შექმნათ მეტი ღილაკი ან საჭიროებისამებრ დაამატოთ ელემენტები.

< html > < head > < title >DOM ტესტები< script type = " application/javascript" >ფუნქცია setBodyAttr (attr, მნიშვნელობა) (თუ (დოკუმენტი. კორპუსი) eval ("document.body." + attr+ "="" + value+ """ ) ; else არ არის მხარდაჭერილი () ;)< body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt >ტექსტი< form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = "შავი" >შავი< option value = "მუქი ლურჯი" >მუქი ლურჯი< p > < b > < tt >bgColor< select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = "თეთრი" >თეთრი< option value = "ღია ნაცრისფერი" >ნაცრისფერი< p > < b > < tt >ბმული< select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = "ლურჯი" >ლურჯი< option value = "მწვანე" >მწვანე< small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" >(ნიმუში ბმული)< br > < form > < input type = " button" value = "ვერსია" onclick = " ver()" />

ერთ გვერდზე მრავალი ინტერფეისის შესამოწმებლად, თვისებების ნაკრები, რომელიც ცვლის ვებ გვერდის ფერებს, შეგიძლიათ შექმნათ მსგავსი ვებ გვერდი ღილაკების, ტექსტური ველებისა და სხვა ელემენტების მთელი „კონსოლით“. შემდეგი სკრინშოტი იძლევა იდეას, თუ როგორ შეიძლება ინტერფეისების დაჯგუფება ტესტირებისთვის

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