`getAttribute / setAttribute / removeAttribute` în JavaScript

Pagina web (DOM) Toate browserele (toggleAttribute: din 2019)

Citește, setează, șterge și verifică atributele HTML ale unui element.

Sintaxă

element.getAttribute(nume)
element.setAttribute(nume, valoare)
element.removeAttribute(nume)
element.hasAttribute(nume)
element.toggleAttribute(nume, forta)
element.getAttributeNames()

Ce face `getAttribute / setAttribute / removeAttribute`

getAttribute returnează valoarea atributului ca text (sau null dacă lipsește), setAttribute o setează, removeAttribute o șterge, hasAttribute verifică existența, iar getAttributeNames returnează numele tuturor atributelor.

toggleAttribute(nume) adaugă atributul dacă lipsește și îl scoate dacă există; cu al doilea parametru forțezi o stare. Este potrivit pentru atributele booleene (hidden, disabled, open). Atenție: atributul este valoarea din HTML; proprietatea (input.value) este valoarea curentă, care poate fi diferită.

Parametri

Parametru	Descriere
`nume`	Numele atributului.
`valoare`	Pentru setAttribute: valoarea, transformată în text.
`forta`	Opțional, pentru toggleAttribute: `true` adaugă, `false` scoate.

Ce returnează

getAttribute: text sau null. hasAttribute și toggleAttribute: true/false. getAttributeNames: un tablou.

Exemple

Exemplul 1: Operațiile pe atribute

<a id="link" href="/contact/" title="Scrie-ne">Contact</a>

<script>
  const link = document.getElementById("link");
  console.log(link.getAttribute("href"), link.href);
  link.setAttribute("target", "_blank");
  link.removeAttribute("title");
  console.log(link.hasAttribute("title"), link.getAttributeNames());
  console.log(link.toggleAttribute("hidden"), link.toggleAttribute("hidden"));
  console.log(link.getAttribute("data-lipsa"));
</script>

Rezultat în browser

/contact/ https://www.exemplu.ro/contact/
false [ 'id', 'href', 'target' ]
true false
null

Exemplul 2: Atributul față de proprietate

Exemplul presupune că utilizatorul nu a modificat câmpul înainte.

<input id="cantitate" value="1">

<script>
  const input = document.getElementById("cantitate");
  input.value = "5";
  console.log(input.getAttribute("value"), input.value);
</script>