If you're seeing this message, it means we're having trouble loading external resources on our website.

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

შეჯამება: 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 გადავლის გამოყენება, თუმცა ეს კიდევ ერთი გზაა, რომელზეც მიგიწვდებათ ხელი.

გსურთ, შეუერთდეთ დისკუსიას?

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