ძირითადი მასალა
კურსი: კომპიუტერული პროგრამირება > თემა 6
გაკვეთილი 3: DOM წვდომის მეთოდები- ელემენტების პოვნა ID-ის საშუალებით
- გამოწვევა: ID-ის შემცვლელი
- რამდენიმე DOM ელემენტის პოვნა ტეგის ან კლასის სახელის საშუალებით
- გამოწვევა: უნიკალური სახელის ტეგები
- ელემენტების პოვნა CSS სელექტორის საშუალებით
- გამოწვევა: მოთხოვნის განმანახლებელი
- შეჯამება: DOM წვდომის მეთოდები
© 2024 Khan Academyგამოყენების პირობებიკონფიდენციალურობის პოლიტიკაშენიშვნა ქუქი-ჩანაწერებზე
შეჯამება: DOM წვდომის მეთოდები
რომელი მეთოდების გამოყენება შეგვიძლია?
ჩვენ გაჩვენეთ, თუ როგორ უნდა გამოიყენოთ შემდეგი მეთოდები თქვენს ვებგვერდზე ელემენტის ან ელემენტების საპოვნელად:
რას აბრუნებენ ისინი?
არსებობს ორი მეთოდი, რომლებიც აბრუნებებენ ერთადერთ
Element
ობიექტს, getElementById
და querySelector
:var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "მათემატიკა მაგარია";
მეთოდები
getElementsByClassName
და getElementsByTagName
აბრუნებენ HTMLCollection
ობიექტს, რომელსაც ახასიათებს მასივის მსგავსი ქცევა. ეს კოლექცია „ცოცხალია", რაც იმას ნიშნავს, რომ კოლექცია განახლდება თუ დოკუმენტში დავამატებთ ამ ტეგის ან კლასის სახელის მქონე ახალ ელემენტებს.var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}
მეთოდი
querySelectorAll()
აბრუნებს NodeList-ს, რომელსაც ასევე ახასიათებს მასივის მსგავსი ქცევა. ეს სია „სტატიკურია", რაც იმას ნიშნავს, რომ ის არ განახლდება მაშინაც კი, როცა გვერდზე დავამატებთ მოთხოვნების დამაკმაყოფილებელ ახალ ელემენტებს. დიდი ალბათობით, მოცემული მეთოდების გამოყენებისას თქვენ ვერ ნახავთ სხვაობას ამ ორ დაბრუნებულ მონაცემთა ტიპს შორის, თუმცა კარგია, თუ გემახსოვრებათ ეს ფაქტი.var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}
წვდომის მიღება ქვე-მოთხოვნების საშუალებით
როდესაც იპოვით ელემენტს, თქვენ შეგიძლიათ, გააკეთოთ ქვემოთხოვნები უკვე ნაჩვენები მეთოდების გამოყენებით. მაგალითად:
// იპოვეთ ელემენტი ამ ID-ით
var salsMotto = document.getElementById("salsMotto");
// იპოვეთ span-ები ამ ელემენტის შიგნით:
var mottoWords = salsMotto.getElementsByTagName("span");
// გამოიტანეთ დათვლილი რაოდენობა
console.log(mottoWords.length);
DOM-ზე გადავლა
ელემენტებზე წვდომის მიღების კიდევ ერთი გზაა DOM ხის „გადავლა". ყოველ ელემენტს აქვს თვისებები, რომლებიც მიუთითებენ მასთან დაკავშირებულ ელემენტებზე:
firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount
მაგალითად:
var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
console.log(salsMotto.childNodes[i]);
}
ამ თვისებების გამოყენება შეუძლებელია
ტექსტურ
კვანძებზე. მათ ვიყენებთ მხოლოდ ელემენტ
კვანძებთან მუშაობისას. იმისათვის, რომ დარწმუნდეთ, რომ შეგიძლიათ ელემენტზე გადავლა, თქვენ უნდა შეამოწმოთ მისი nodeType
/nodeValue
თვისებები. დიდი ალბათობით თქვენ არ დაგჭირდებათ ან არ მოგინდებათ DOM გადავლის გამოყენება, თუმცა ეს კიდევ ერთი გზაა, რომელზეც მიგიწვდებათ ხელი.გსურთ, შეუერთდეთ დისკუსიას?
პოსტები ჯერ არ არის.