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

ამ გაკვეთილში ჩვენ განვიხილავთ მოვლენებთან, ატრიბუტებთან და getElementById-თან მუშაობის საფუძვლებს JavaScript-ში.

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

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

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

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

ღონისძიების საფუძვლები

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

მოვლენასთან ერთად ატრიბუტის მნიშვნელობა არის JavaScript კოდი. შემდეგ მაგალითში ღილაკზე მაუსის დაჭერითგაფრთხილების ფუნქცია შესრულდება:

Და ახლა დაწკაპუნებით func ფუნქცია შესრულდება ელემენტზე:

ფუნქცია func() ( alert("!"); )

თქვენ შეგიძლიათ შეასრულოთ არა მხოლოდ ერთი, არამედ რამდენიმე ფუნქცია:

ფუნქცია func1() ( alert("1"); ) ფუნქცია func2() (alert("2"); )

გთხოვთ გაითვალისწინოთ, რომ თუ თქვენ გჭირდებათ ორმაგი ბრჭყალები ატრიბუტის შიგნით (მაგალითად, სტრიქონისთვის) და ატრიბუტის გარე ბრჭყალები ასევე ორმაგი ბრჭყალებია - onclick="გაფრთხილება("!")"- ეს კოდი არ იმუშავებს.

ამის წინააღმდეგ ბრძოლის რამდენიმე გზა არსებობს: შეგიძლიათ შეცვალოთ გარე ბრჭყალები ერთ ბრჭყალზე onclick="გაფრთხილება("!")", თქვენ ასევე შეგიძლიათ გაექცეთ შიდა ციტატებს უკანა ხაზით onclick="გაფრთხილება(\"!\)"ან უბრალოდ გადაიტანეთ JavaScript კოდი ატრიბუტიდან ფუნქციაში და დატოვეთ მხოლოდ ფუნქციის სახელი ატრიბუტში onclick="func()".

იგივე მოხდება, თუ თქვენ განათავსებთ ატრიბუტის გარე ბრჭყალებს ერთ ბრჭყალებში და ასევე გამოიყენებთ ერთ ბრჭყალებს სტრიქონისთვის: onclick="გაფრთხილება("!")"- აქაც მსგავსი გზებით წყდება ყველაფერი.

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

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

დავუშვათ, რომ გვერდზე გვაქვს ტეგი, id ატრიბუტით დაყენებულია შესამოწმებლად. მოდით ჩავწეროთ ამ ტეგის ბმული elem ცვლადში. ამისათვის ჩვენ უნდა გამოვიყენოთ getElementById მეთოდი, რომელიც იღებს ელემენტს თავისი id-ით.

ეს ჩანაწერი გამოჩნდება, როდესაც დააწკაპუნებთ ღილაკზე, რომელსაც ჩვენ მივენიჭეთ onclick ატრიბუტი. ამ ღილაკზე დაწკაპუნებით იმუშავებს ფუნქცია func, რომელიც იპოვის ელემენტს HTML გვერდზე, რომლის ID ტოლია ტესტირება და ჩაწერა. ბმული მასზეელემენტის ცვლადამდე:

ახლა elem ცვლადში გვაქვს ბმული ელემენტთან, რომელსაც აქვს id ატრიბუტი ტესტის მნიშვნელობაში. ცვლადი ელემენტი თავად არის ობიექტი.

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

ვნახოთ, როგორ ხდება ეს პრაქტიკაში.

HTML ატრიბუტებთან მუშაობის საფუძვლები JavaScript-ის საშუალებით

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

func ფუნქციის შიგნით ჩვენ მივიღებთ ჩვენს შეყვანას მისი პირადობის მოწმობითდა ჩაწერეთ ბმული elem ცვლადში:

ფუნქცია func() ( var elem = document.getElementById("ტესტი"); )

მოდით ახლა ვაჩვენოთ ჩვენი შეყვანის ატრიბუტების შინაარსი. მაგალითად, მნიშვნელობის ატრიბუტზე წვდომისთვის, თქვენ უნდა დაწეროთ შემდეგი: elem.value , სადაც elem არის ცვლადი, რომელშიც დავწერეთ ბმული ჩვენს ელემენტზე getElementById-ის გამოყენებით, და მნიშვნელობა არის ტეგის ატრიბუტი, რომელიც გვაინტერესებს.

ჩვენ შეგვიძლია გამოვაჩინოთ ატრიბუტის შიგთავსი alert-ის მეშვეობით ამ გზით - alert(elem.value) - ან ჩავწეროთ იგი რომელიმე ცვლადზე. Მოდი გავაკეთოთ ეს:

ფუნქცია func() ( var elem = document.getElementById("ტესტი"); alert(elem.value); //აჩვენებს "!")

ჩვენ შეგვიძლია სხვა ატრიბუტების მნიშვნელობების წაკითხვა ანალოგიურად, მაგალითად, elem.id - ვკითხულობთ id ატრიბუტის მნიშვნელობას და elem.type - ტიპის ატრიბუტის მნიშვნელობას. იხილეთ მაგალითი:

ფუნქცია func() ( var elem = document.getElementById("ტესტი"); alert(elem.value); //აჩვენებს "!" Alert(elem.id); //აჩვენებს "ტესტი" გაფრთხილებას(elem.type ); // გამოჩნდება "ტექსტი" )

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

ფუნქცია func() ( var elem = document.getElementById ("ტესტი"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

HTML კოდი ასე გამოიყურება (მნიშვნელობის ატრიბუტი გახდება www):

ისე, ახლა ყველაზე რთულია - თქვენ არ შეგიძლიათ შეიყვანოთ elem ცვლადი, მაგრამ ააწყოთ ქულების ჯაჭვი ამ გზით:

ფუნქცია func() ( alert(document.getElementById("test").მნიშვნელობა); //აჩვენებს "!")

ანალოგიურად (ჯაჭვით) შეგიძლიათ გადაწეროთ ატრიბუტები:

ფუნქცია func() ( document.getElementById("ტესტი").value = "www"; }!}

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

ფუნქცია func() ( var elem = document.getElementById ("ტესტი"); elem.value = "www"; elem.type = "submit"; }!}

ახლა მე არ შემოვიყვან ახალ ცვლადს და ამიტომ ორჯერ უნდა დავურეკო getElementById:

ფუნქცია func() ( document.getElementById("ტესტი").value = "www"; document.getElementById("test").type = "submit"; }!}

ჩემი აზრით, ეს კოდი უფრო გართულდა, თუმცა მას ერთი ხაზი ნაკლები სჭირდება. გარდა ამისა, თუ მსურს id მნიშვნელობის შეცვლა ტესტიდან, მაგალითად, www, ბევრგან მომიწევს ამის გაკეთება, რაც არც თუ ისე მოსახერხებელია.

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

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

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

გამონაკლისი: კლასი და ატრიბუტები

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

ეს სიტყვა განსაკუთრებულია JavaScript-ში და ამიტომ უბრალოდ ვერ დავწერთ ელემ.კლასიკლასის ატრიბუტის მნიშვნელობის წასაკითხად. სამაგიეროდ უნდა დაწერო elem.className.

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

ფუნქცია func() ( var elem = document.getElementById("ტესტი"); alert(elem.className); )

სხვათა შორის, არის სხვა ატრიბუტები, რომლებსაც სხვაგვარად უწოდებენ, ვიდრე თვისებები. მაგალითად, for() ატრიბუტს აქვს თვისება სახელად htmlFor.

ამით მუშაობა

ახლა ჩვენ ვიმუშავებთ სპეციალურ ამ ობიექტთან, რომელიც მიუთითებს მიმდინარე ელემენტზე (ელემენტი, რომელშიც მოხდა მოვლენა). უფრო მეტიც, ეს მიუთითებს თითქოს ეს ელემენტი უკვე მიღებულია getElementById მეთოდით.

ვნახოთ, როგორ ვიმუშაოთ და რა არის ამ მიდგომის მოხერხებულობა.

მოდით დავალება გვქონდეს დავაწკაპუნოთ შეყვანაზე მისი მნიშვნელობის შინაარსის საჩვენებლად.

ამ დროისთვის შეგიძლიათ მხოლოდ ამ გადაწყვეტილების მიღება:

ფუნქცია func() ( var elem = document.getElementById("ტესტი"); alert(elem.value); )

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

ამ შემთხვევაში, ჩვენ მივიღებთ ასეთ რამეს:

ფუნქცია func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) ფუნქცია func2() (var elem = document.getElementById("test2"); alert(elem.value); ) ფუნქცია func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

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

თუ გვაქვს 10 შეყვანა, მოგვიწევს 10 ფუნქციის გაკეთება, რაც არ არის მოსახერხებელი.

მოდით გავამარტივოთ დავალება: ფუნქციას პარამეტრად გადავცემთ მიმდინარე ელემენტის ID-ს. და ფუნქციების დიდი რაოდენობის ნაცვლად, ყველაფერი დაიყვანება ერთ ფუნქციამდე:

ფუნქცია func(id) ( var elem = document.getElementById(id); alert(elem.value); )

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

მაშ ასე, მოდი საბოლოოდ გადავხედოთ პრობლემის გადაჭრის ვარიანტს ამის გამოყენებით.

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

ჩვენი ეს გადაეცემა ფუნქციის პარამეტრად და მთავრდება elem ცვლადში. ეს ელემენტი ისე იქცევა, თითქოს მიღებულია ამ გზით: var elem = document.getElementById(...), მაგრამ თქვენ არ გჭირდებათ მისი ამ გზით მიღება, იქ უკვე ყველაფერი მზად არის და შეგიძლიათ გამოიყენოთ. მაგალითად, elem.value მიუთითებს ჩვენი შეყვანის მნიშვნელობაზე და ა.შ.

ასე რომ, აქ არის ჩვენი პრობლემის უმარტივესი გამოსავალი:

ფუნქცია func(elem) ( alert(elem.value); )

CSS საფუძვლები

JavaScript-ში CSS თვისებებთან მუშაობა ხდება ელემენტისთვის სტილის ატრიბუტის მნიშვნელობის შეცვლით. მაგალითად, ფერის შესაცვლელად, თქვენ უნდა ააგოთ შემდეგი ჯაჭვი - ელემ.სტილი.ფერი- და მიანიჭეთ მას სასურველი ფერის მნიშვნელობა:

ფუნქცია func() ( var elem = document.getElementById("ტესტი"); elem.style.color = "წითელი"; )

თქვენ ასევე შეგიძლიათ არ შეიყვანოთ elem ცვლადი, არამედ შექმნათ ძალიან გრძელი ჯაჭვი.

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

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

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

ქვემოთ მოცემულია HTML დოკუმენტისა და DOM-ის კოდი, რომელიც შეიქმნება ბრაუზერის მიერ ამ კოდის საფუძველზე:

HTML DOM HTML DOM.

Სალამი ყველას.

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

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

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

ელემენტების შინაარსი ინახება ტექსტურ კვანძებში. ჩვენს დიაგრამაში ტექსტური კვანძები მონიშნულია ლურჯად.

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

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

კვანძებს შორის ურთიერთობა

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

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

არის მშობელი. კვანძისთვის, მშობელი კვანძია.

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

ისინი შთამომავლები არიან. კვანძისთვის ბავშვი არის .

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

DOM-ის ზედა კვანძს ფესვი ეწოდება. ჩვენს დიაგრამაში ეს არის root (რადგან დოკუმენტის ობიექტი არ არის 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 კოდი.

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

როგორ იქმნება ვებ გვერდი?

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

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

CSSOM, წარმოადგენს ელემენტებთან დაკავშირებულ სტილებს

DOM, ელემენტის წარმოდგენა

რისგან შედგება DOM?

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

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

ავიღოთ ეს HTML დოკუმენტი, როგორც მაგალითი:

ჩემი პირველი ვებ გვერდი გამარჯობა, მსოფლიო!

Როგორ ხარ?

ეს დოკუმენტი შეიძლება წარმოდგენილი იყოს კვანძების შემდეგი ხის სახით:

• html
  • თავი
    • სათაური
      • ჩემი პირველი ვებ გვერდი
  • სხეული
    • h1
      • Გამარჯობა მსოფლიო!
    • გვ
      • Როგორ ხარ?

რაც DOM არ არის

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

DOM არ არის ორიგინალური HTML-ის ასლი

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

1. როდესაც HTML შეიცავს მარკირების შეცდომებს

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

განვიხილოთ ეს HTML დოკუმენტი, როგორც მაგალითი:

Გამარჯობა მსოფლიო!

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

• html
  • თავი
  • სხეული
    • Გამარჯობა მსოფლიო!
  2. როდესაც DOM იცვლება Javascript კოდით

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

  ჩვენ შეგვიძლია, მაგალითად, შევქმნათ დამატებითი კვანძები DOM-ისთვის Javascript-ის გამოყენებით.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("მე ახალი ვარ!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  ეს კოდი შეცვლის DOM-ს, მაგრამ ცვლილებები არ გამოჩნდება HTML დოკუმენტში.

  DOM არ არის ის, რასაც ხედავთ ბრაუზერში (მაგ. რენდერის ხე)

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

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

  Გამარჯობა მსოფლიო!

  Როგორ ხარ?

  DOM შეიცავს ელემენტს

  • html
    • თავი
    • სხეული
      • h1
        • Გამარჯობა მსოფლიო!
      • გვ
        • Როგორ ხარ?

  თუმცა, რენდერის ხე და, შესაბამისად, ის, რაც ჩანს ხედვის პორტში, არ შედის ამ ელემენტში.

  • html
    • სხეული
      • h1
        • Გამარჯობა მსოფლიო!
  DOM არ არის ის, რაც ნაჩვენებია DevTools-ში

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

  ამის საუკეთესო მაგალითია CSS ფსევდოელემენტები. ::bere და ::after სელექტორების გამოყენებით შექმნილი ფსევდო ელემენტები არის CSSOM და რენდერის ხის ნაწილი, მაგრამ ტექნიკურად არ არის DOM-ის ნაწილი. ეს იმიტომ ხდება, რომ DOM იქმნება მხოლოდ ორიგინალური HTML დოკუმენტიდან, ელემენტზე გამოყენებული სტილის გარეშე.

  მიუხედავად იმისა, რომ ფსევდო ელემენტები არ არის DOM-ის ნაწილი, ისინი წარმოდგენილია ჩვენს devtools ელემენტის ინსპექტორში.

  
  Შემაჯამებელი

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

მუშაობა 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.