შეჯამება: DOM მოდიფიკაციის ტექნიკები

არსებულ ელემენტში ცვლილებების შეტანა

ჩვენ განვიხილეთ არსებულ ელემენტში ცვლილებების შეტანის მრავალი ასპექტი:

ატრიბუტებში ცვლილებების შეტანა

ელემენტზე ატრიბუტის განსასაზღვრად თქვენ უნდა შექმნათ იგივე სახელის მქონე თვისება. მაგალითად, <img>-ის src-ის შესაცვლელად უნდა დაწეროთ შემდეგი კოდი:

imgEl.src = "http://www.dogs.com/dog.gif";

ამასთან ერთად თქვენ ასევე შეგიძლიათ, გამოიყენოთ setAttribute მეთოდი ასე:

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

ატრიბუტის წასაშლელად თქვენ უნდა გამოიყენოთ removeAttribute, მაგალითად, ღილაკის disabled ატრიბუტის წასაშლელად და ღილაკის გასააქტიურებლად უნდა დაწეროთ შემდეგი კოდი:

imgEl.removeAttribute("disabled");

სტილებში ცვლილებების შეტანა

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

headingEl.style.color = "hotpink";

არ დაგავიწდეთ CSS-ის თვისებების რამდენიმესიტყვიან სახელებში ყოველი სიტყვის დიდი ასოთი გამოყოფა (ამ პრაქტიკას ინგლისურად camelCase ჰქვია), რადგან დეფისი არ არის JS-ის თვისების ვალიდური სახელი:

headingEl.style.backgroundColor = "salmon";

კლასების სახელებში ცვლილებების შეტანა

ელემენტზე კლასის დასამატებლად თქვენ შეგიძლიათ, განსაზღვროთ className თვისება:

mainEl.className = "გაფრთხილება";

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

mainEl.className += " გაფრთხილება";

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

mainEl.classList.add("გაფრთხილება");

შიდა HTML / ტექსტში ცვლილებების შეტანა

იმისათვის, რომ სრულად ჩაანაცვლოთ ელემენტის შიგთავსი რაიმე HTML სტრინგით, გამოიყენეთ innerHTML:

mainEl.innerHTML = "კატები ყველაზე <strong>საყვარლები</strong> არიან";

თუ არ გჭირდებათ არაფრის გადაცემა HTML ტეგებში, თქვენ უნდა გამოიყენოთ textContent:

mainEl.textContent = "კატები ყველაზე საყვარლები არიან";

ზოგადად, ამ 2 თვისებიდან ნებისმიერის გამოყენებისას უნდა იყოთ ფრთხილად, რადგან ისინი ასევე წაშლიან მოვლენათა მსმენელებს (რასაც გასწავლით შემდეგ ტუტორიალში).

ელემენტების ნულიდან შექმნა

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

ახალი ელემენტის შესაქმნელად გამოიყენეთ ბრძანება სახელად createElement:

var imgEl = document.createElement("img");

გვერდზე მის დასამატებლად გამოიძახეთ appendChild სამიზნე მშობელ ელემენტზე:

document.body.appendChild(imgEl);

ჩამოთვლილი ფუნქციონალის მსგავსად თქვენ ასევე შეგიძლიათ, გამოიყენოთ insertBefore, replaceChild, removeChild და insertAdjacentHTML.

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

შესვლა

დავალაგოთ:

პოსტები ჯერ არ არის.

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