Curs Web Development
Curs HTML
Curs CSS
Curs Javascript
Curs PHP
Curs Phyton
Curs SQL
Curs SEO

Introducere în DOM

DOM (Document Object Model) este o reprezentare a structurii paginii HTML ca un arbore de noduri. Cu JavaScript, poți accesa și modifica aceste noduri pentru a crea interactivitate.

Exemplu simplu


document.body.style.backgroundColor = "lightblue";

Exemplu Live: Schimbă fundalul

  let schimbat = false;
  document.getElementById("btnFundal").addEventListener("click", function () {
    if (!schimbat) {
      document.body.style.backgroundColor = "#222222";
      document.body.style.color = "#ffffff";
      this.textContent = "Revin la alb";
      this.style.backgroundColor = "#ffffff";
      this.style.color = "#222222";
    } else {
      document.body.style.backgroundColor = "#ffffff";
      document.body.style.color = "#000000";
      this.textContent = "Schimbă fundalul";
      this.style.backgroundColor = "#222222";
      this.style.color = "#ffffff";
    }
    schimbat = !schimbat;
  });

Selectarea Elementelor

Poți selecta elemente din DOM folosind metode precum getElementById și querySelector.

getElementById


let titlu = document.getElementById("titlu");

querySelector


let paragraf = document.querySelector("p.intro");

Exemplu Live: Selectare și modificare

  document.getElementById("btnModifica").addEventListener("click", function () {
    document.getElementById("titlu").textContent = "Text modificat!";
  });

Salut, Ioan!

Modificarea Conținutului HTML și Text

Poți schimba textul sau HTML-ul unui element cu textContent sau innerHTML.

textContent vs innerHTML


element.textContent = "Salut!"; // doar text
element.innerHTML = "Salut!"; // include HTML

Exemplu Live: Modificare HTML

  document.getElementById("btnHTML").addEventListener("click", function () {
    document.getElementById("zonaText").innerHTML = "Text actualizat";
  });

Text inițial

Stilizarea Elementelor cu JavaScript

Poți modifica stilul unui element direct din JavaScript folosind element.style.

Exemplu


let titlu = document.getElementById("titlu");
titlu.style.color = "red";
titlu.style.fontSize = "24px";

Exemplu Live: Schimbă stilul

  document.getElementById("btnStil").addEventListener("click", function () {
    const titlu = document.getElementById("titluStil");
    titlu.style.color = "darkgreen";
    titlu.style.fontSize = "28px";
    titlu.style.fontWeight = "bold";
  });

Salut, Ioan!

Crearea și Eliminarea Elementelor

Poți crea elemente cu document.createElement și le poți elimina cu remove().

Exemplu


let nou = document.createElement("p");
nou.textContent = "Salut!";
document.body.appendChild(nou);

nou.remove(); // elimină elementul

Exemplu Live: Adaugă și elimină

  let paragraf;

  document.getElementById("btnAdauga").addEventListener("click", function () {
    paragraf = document.createElement("p");
    paragraf.textContent = "Paragraf nou!";
    paragraf.style.color = "blue";
    document.getElementById("containerParagraf").appendChild(paragraf);
  });

  document.getElementById("btnSterge").addEventListener("click", function () {
    if (paragraf) {
      paragraf.remove();
    }
  });

Ascultători de Evenimente și Tipuri de Evenimente

Poți reacționa la acțiuni ale utilizatorului (click, mouseover, keydown etc.) cu addEventListener.

Exemplu


element.addEventListener("click", function() {
  console.log("Ai dat click!");
});

Exemplu Live: Detectează click

  document.getElementById("btnClick").addEventListener("click", function () {
    document.getElementById("outputClick").textContent = "Ai dat click!";
  });

Delegarea Evenimentelor

În loc să adaugi ascultători pe fiecare element, poți asculta evenimentele pe un părinte și le gestionezi în funcție de event.target.

Exemplu


document.getElementById("lista").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    console.log("Ai apăsat pe: " + e.target.textContent);
  }
});

Exemplu Live: Delegare pe listă

  document.getElementById("listaDelegare").addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      document.getElementById("outputDelegare").textContent =
        "Ai apăsat pe: " + e.target.textContent;
    }
  });

Gestionarea Formularelor și Validare

Poți intercepta trimiterea formularului și valida datele înainte de procesare.

Exemplu


form.addEventListener("submit", function(e) {
  e.preventDefault();
  if (input.value === "") {
    alert("Completează câmpul!");
  }
});

Exemplu Live: Validare simplă

  document.getElementById("formValidare").addEventListener("submit", function (e) {
    e.preventDefault();
    const nume = document.getElementById("numeInput").value.trim();
    if (nume === "") {
      document.getElementById("outputForm").textContent = "⚠️ Completează câmpul!";
    } else {
      document.getElementById("outputForm").textContent = "Salut, " + nume + "!";
    }
  });

🧠 Quiz - DOM și Evenimente în PHP

ES6 and Beyond ➔

Top