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

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

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

DOM-ի փոփոխության ձևերը. ամփոփում

Գոյություն ունեցող տարրի փոփոխում

Քննարկել ենք զանազան տարբերակներ, որոնցով կարող ես փոփոխել գոյություն ունեցող տարրի ասպեկտները։

Հատկանիշների փոփոխում

Կարող ես հատկորոշիչ ստեղծել տարրի վրա՝ հատկացնելով նույն անունը: Օրինակ՝ <img>src-ը փոխելու համար։
imgEl.src = "http://www.dogs.com/dog.gif";
Բացի այդ, կարող ես նաև օգտագործել հատկություններ մեթոդը, օրինակ, այսպես՝
imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");
Եթե ուզում ես հեռացնել որևէ հատկորոշիչ, դա պետք է կատարես հետևյալ կերպ. հեռացնել հատկությունը՝ removeAttribute, օրինակ՝ disabled հատկորոշիչը կոճակից հեռացնելու համար միացնելով այն։
imgEl.removeAttribute("disabled");

Ոճերի փոփոխում

Կարող ես փոխել ոճերը, ինչպես որ փոխում ես հատկորոշիչները՝ մուտք գործելով տարրի style հատկությունը և սահմանելով համապատասխան հատկությունը։ Օրինակ՝ գույնը փոխելու համար՝
headingEl.style.color = "hotpink";
Չմոռանաս "camelCase" կատարել մի քանի բառից բաղկացած CSS հատկության անունները, քանի որ միացման գծերը վավեր JavaScript հատկության անուններ չեն համարվում։
headingEl.style.backgroundColor = "salmon";

Խմբի անունների փոփոխում

Տարրին խումբ ավելացնելու համար կարող ես սահմանել դասակարգման անվանում՝ className հատկությունը՝
mainEl.className = "warning";
Դա կանտեսի առկա խմբերը, այդ իսկ պատճառով փոխարենը պետք է կատարես սա, եթե պարզապես ուզում ես ավելացում կատարել խմբերի ցուցակներին։
mainEl.className += " warning";
Ավելի նոր բրաուզերներ-ում սրա փոխարեն կարող ես օգտագործել դասակարգման ցուցակ՝ classList ֆունկցիոնալությունը։
mainEl.classList.add("warning");

Ներքին HTML/տեքստի փոփոխում

Տարրի բովանդակությունները կամայական HTML տողով ամբողջապես փոխարինելու համար օգտագործիր ներքին HTML՝ innerHTML։
mainEl.innerHTML = "cats are the <strong>cutest</strong>";
Եթե կարիք չկա անցնել HTML թեգերը, պետք է փոխարենը օգտագործես textContent-ը։
mainEl.textContent = "cats are the cutest";
Հիմնականում պետք է ուշադիր լինես, երբ օգտագործում ես այս երկու հատկություններից որևէ մեկը, որովհետև դրանք կհեռացնեն նաև պատահույթ լսողներին (որը մենք կսովորենք հաջորդ հոդվածում)։

Տարրերի ստեղծումը սկզբից

Մի ամբողջ շարք ֆունկցիաներ կան, որոնք կարող ես օգտագործել ամբողջապես նոր տարրեր ստեղծելու և էջում ավելացնելու համար։
Նոր տարր ստեղծելու համար օգտագործիր createElement տարրը։
var imgEl = document.createElement("img");
Այն էջին կցելու համար կանչիր appendChild թիրախավորված ծնող տարրի վրա։
document.body.appendChild(imgEl);
Նույն կերպ կարող ես նաև օգտագործել insertBefore, replaceChild, removeChild և insertAdjacentHTML:

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

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