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

Եթե գտնվում ես վեբ զտիչի հետևում, խնդրում ենք համոզվել, որ *.kastatic.org և *.kasandbox.org տիրույթները հանված են արգելափակումից։

Հիմնական նյութ

DOM-ի հասանելիության մեթոդներ. ամփոփում

Ինչ մեթոդներ կարող ենք օգտագործել

Ցուցադրվեց, թե ինչպես կարող ես օգտագործել հետևյալ մեթոդները քո կայքէջում տարր կամ տարրեր գտնելու համար։

Ինչ են դրանք վերադարձնում

Երկու մեթոդ կա, որոնք վերադարձնում են մեկ տարր օբյեկտ՝ getElementById և querySelector:
var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";
getElementsByClassName և getElementsByTagName մեթոդները վերադարձնում են HTMLCollection օբյեկտը, որը զանգվածի դեր է կատարում։ Այդ հավաքածուն "live" է, ինչը նշանակում է, որ հավաքածուն թարմացվում է, երբ հավելյալ տարրեր են ավելացվում փաստաթղթին թեգի կամ դասակարգման անվամբ։
var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
   console.log(teamMembers[i].innerHTML);
}
querySelectorAll() մեթոդը վերադարձնում է NodeList -ը, որը նաև զանգվածի դեր է կատարում։ Այդ ցուցակը "static" է, որը նշանակում է, որ ցուցակը չի թարմացվի, նույնիսկ եթե նոր համապատասխանող տարրեր ավելացվեն էջում։ Ամենայն հավանականությամբ, դու չես հանդիպի այս երկու վերադարձի տվյալների տեսակների տարբերություններին, երբ օգտագործում ես այս մեթոդները, սակայն օգտակար է տեղյակ լինելը։
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");
// Գտիր spans-ը այդ տարրի մեջ 
var mottoWords = salsMotto.getElementsByTagName("span");
// Դուրս եկ, որքան որ բացվել է
console.log(mottoWords.length);

DOM-ի տեղափոխումը

Տարրերին հասնելու մեկ այլ տարբերակը "traverse" 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]);
}
Այս հատկություները առկա չեն Text հանգույցներում՝ միայն Element հանգույցներում։ Համոզվելու համար, որ կարող ես տեղափոխել տարրը, կարող ես ստուգել նրա nodeType և nodeValue հատկությունները։ Ամենայն հավանականությամբ, կարիք չի լինի կամ ցանկություն չես ունենա օգտագործել DOM տեղափոխումը, սակայն այն կարող է հանդիսանալ ևս մեկ առկա տարբերակ։

Ուզո՞ւմ ես միանալ խոսակցությանը։

Առայժմ հրապարակումներ չկան։
Անգլերեն հասկանո՞ւմ ես: Սեղմիր այստեղ և ավելի շատ քննարկումներ կգտնես «Քան» ակադեմիայի անգլերեն կայքում: