DOM: wybieranie elementów — JavaScript

DOM pozwala JavaScriptowi odczytywać i zmieniać HTML.

Jak to działa?

document.querySelector() szuka pierwszego elementu pasującego do selektora CSS. .textContent ustawia zawartość tekstową bez interpretowania HTML.

Przykład zakłada, że strona ma element o identyfikatorze message.

Przykład 1 — poznaj zapis

// HTML: <p id="message">Start</p>
const element = document.querySelector("#message");

if (element) {
  element.textContent = "Gotowe!";
}

Tekst elementu zmieni się ze „Start” na „Gotowe!”.

Przeczytaj kod linijka po linijce

const element = document.querySelector("#message");Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
if (element) {Sprawdzamy warunek lub wybieramy jedną z możliwości.
element.textContent = "Gotowe!";Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Na stronie zamiast „Start” pojawia się „Gotowe!”.

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

// HTML: <h2 class="title">Stare</h2>
document.querySelector(".title").textContent = "Nowe";

Wynik drugiego przykładupo uruchomieniu przykładu

Nagłówek na stronie zmienia się z „Stare” na „Nowe”.

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj do HTML przycisk i zmień jego tekst przez JavaScript.