Обобщение: техники на модификация на DOM

Промяна на съществуващ елемент

Разгледахме различни начини, по които можеш да променяш аспекти на съществуващ елемент:

Промяна на атрибути

Можеш да промениш атрибута на елемент, като промениш свойството със същото име. Например за да промениш свойството src на елемента <img>:

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";

Не забравяй да използваш "camelCase" нотация за имена на CSS свойства от няколко думи, тъй като тирето не е валидно в имената на свойствата в JS:

headingEl.style.backgroundColor = "salmon";

Промяна на имената на класове

За да добавиш клас към елемент, можеш да зададеш свойството className:

mainEl.className = "warning";

Това ще замени всички съществуващи класове, така че трябва да направиш следното, ако искаш просто го добавиш към списъка на класовете:

mainEl.className += " warning";

В по-новите браузъри можеш да използваш функционалността classList:

mainEl.classList.add("warning");

Промяна на вътрешния HTML / текст

За да заместиш напълно съдържанието на един елемент с произволен стринг с HTML, използвай свойството innerHTML:

mainEl.innerHTML = "котките са <strong>страшно сладки</strong>";

Ако не се налага да подаваш HTML тагове, по-добре е вместо това да използваш textContent:

mainEl.textContent = "котките са страшно сладки";

Като цяло, трябва да внимаваш, когато използваш някое от тези две свойства, защото те ще премахнат слушателите за събития (за които ще учим в следващия урок).

Създаване на елементи от нулата

Има цял набор от функции, които можеш да използваш за създаване на изцяло нови елементи и за добавянето им към страницата.

За да създадеш нов елемент, използвай метода със съвсем подходящото име createElement:

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

За да го добавиш към страницата, извикай appendChild върху целевия родителски елемент:

document.body.appendChild(imgEl);

По същия начин можеш да използваш и insertBefore, replaceChild, removeChild и insertAdjacentHTML.

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.