`getElementsByClassName / getElementsByTagName` în JavaScript

Găsesc elementele după clasă, etichetă sau atributul name; rezultatul este o listă „vie”.

Sintaxă

document.getElementsByClassName(clase)
document.getElementsByTagName(eticheta)
document.getElementsByName(nume)

Ce face `getElementsByClassName / getElementsByTagName`

getElementsByClassName("a b") returnează elementele care au toate clasele date, getElementsByTagName("li") elementele cu eticheta dată ("*" pentru toate), iar document.getElementsByName câmpurile cu atributul name dat. Primele două există și pe elemente, pentru a căuta doar în interiorul lor.

Rezultatul (HTMLCollection sau NodeList) este viu: se actualizează singur când pagina se schimbă. Asta este diferit de querySelectorAll, care returnează o listă fixă. Colecția nu are forEach sau map; transform-o cu Array.from sau [...].

Parametri

Parametru	Descriere
`clase / eticheta / nume`	Numele claselor (separate prin spațiu), al etichetei sau valoarea atributului name.

Ce returnează

O colecție (posibil goală), actualizată automat.

Exemple

Exemplul 1: Liste vii

<ul id="lista"><li class="nou">Ana</li><li>Dan</li></ul>

<script>
  const elemente = document.getElementsByTagName("li");
  const noi = document.getElementsByClassName("nou");
  console.log(elemente.length, noi.length);

  document.getElementById("lista").insertAdjacentHTML("beforeend", '<li class="nou">Ioana</li>');
  console.log(elemente.length, noi.length);
  console.log([...noi].map((li) => li.textContent));
</script>

Rezultat în browser

2 1
3 2
[ 'Ana', 'Ioana' ]

Exemplul 2: Butoanele radio după name

<input type="radio" name="livrare" value="curier" checked>
<input type="radio" name="livrare" value="ridicare">

<script>
  const optiuni = document.getElementsByName("livrare");
  console.log(optiuni.length, [...optiuni].find((o) => o.checked).value);
</script>