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

Jeżeli jesteś za filtrem sieci web, prosimy, upewnij się, że domeny *.kastatic.org i *.kasandbox.org są odblokowane.

Główna zawartość

Podsumowanie: Techniki modyfikacji DOM

Modyfikacja istniejącego elementu

Pokazaliśmy wiele metod modyfikacji różnych aspektów istniejącego elementu:

Zmiana atrybutów

Możesz zmienić atrybut elementu ustawiając właściwości o tej samej nazwie. Na przykład zmiana źródła *src* <img>:
imgEl.src = "http://www.dogs.com/dog.gif";
Ponadto, możesz użyć metody setAttribute:
imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");
Jeśli chcesz usunąć atrybut powinieneś użyć removeAttribute - na przykład, żeby usunąć atrybut disabled z przycisku, skutecznie pozwalając na korzystanie z niego:
imgEl.removeAttribute("disabled");

Modyfikacja styli

Możesz zmienić styl w taki sam sposób jak atrybuty. Korzystając z właściwości style elementu i ustawieniu odpowiedniej własności. Na przykład, aby zmienić kolor:
headingEl.style.color = "hotpink";
Pamiętaj o konwencji pisania "camelCase" dla wielowyrazowych właściwości CSS. Łączniki nie są prawidłowe dla właściwości w JavaScript.
headingEl.style.backgroundColor = "salmon";

Modyfikacja nazw klas

Aby dodać klasę do elementu, możesz użyć właściwości className:
mainEl.className = "warning";
Powyższy zapis nadpisze wszystkie klasy. Jeśli chcesz dodać klasę powinieneś użyć przykładu poniżej:
mainEl.className += " warning";
W nowszych przeglądarkach, możesz użyć funkcjonalności classList:
mainEl.classList.add("warning");

Modyfikacja tekstu / wewnętrznego HTML

Aby całkowicie zastąpić zawartość elementu nowym ciągiem znaków HTML użyj innerHTML:
mainEl.innerHTML = "koty są <strong>najsłodsze</strong>";
Jeśli nie potrzebujesz tagów HTML, możesz użyć textContent:
mainEl.textContent = "koty są najsłodsze";
Powinieneś rozważnie korzystać z tych własności, ponieważ usuwają one detektory zdarzeń (o których powiemy sobie więcej w następnym przewodniku)

Tworzenie elementów od postaw

Istnieje cały szereg funkcji, których możesz użyć do stworzenia nowych elementów i dodania ich do strony.
Aby stworzyć nowy element użyj trafnie nazwanej funkcji createElement:
var imgEl = document.createElement("img");
Aby dodać go do strony, należy wywołać metodę appendChild na elemencie:
document.body.appendChild(imgEl);
Similarly, you can also use insertBefore, replaceChild, removeChild, and insertAdjacentHTML.

Chcesz dołączyć do dyskusji?

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.