Elementi HTML DOM JavaScript

Questo capitolo spiega come trovare e accedere agli elementi HTML di una pagina HTML.

Trova gli elementi HTML

Di solito, tramite JavaScript, è necessario manipolare gli elementi HTML.

Per raggiungere questo scopo, è necessario prima trovare questi elementi. Ci sono diversi modi per completare questa attività:

  • Trova gli elementi HTML tramite id
  • Trova gli elementi HTML tramite nome del tag
  • Trova gli elementi HTML tramite nome della classe
  • Trova gli elementi HTML tramite selettore CSS
  • Trova gli elementi HTML tramite collection di oggetti HTML

Trova gli elementi HTML tramite id

Il metodo più semplice per trovare elementi HTML nel DOM è utilizzare l'id dell'elemento.

In questo esempio, viene cercato l'elemento con id="intro":

Esempio

var myElement = document.getElementById("intro");

Prova da solo

Se viene trovato l'elemento, questo metodo restituirà l'elemento come oggetto (in myElement).

Se non viene trovato l'elemento, myElement conterrà null.

Trova gli elementi HTML tramite nome del tag

In questo esempio, vengono cercati tutti gli elementi <p> Elemento:

Esempio

var x = document.getElementsByTagName("p");

Prova da solo

In questo esempio, viene cercato l'elemento con id="main" e poi vengono cercati tutti gli elementi <p> Elemento:

Esempio

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Prova da solo

Trova gli elementi HTML tramite nome della classe

Se si desidera trovare tutti gli elementi HTML con lo stesso nome della classe, utilizzare getElementsByClassName().

In questo esempio, viene restituita la lista degli elementi che contengono class="intro":

Esempio

var x = document.getElementsByClassName("intro");

Prova da solo

Non applicabile a Internet Explorer 8 e versioni precedenti.

Trova gli elementi HTML tramite selettore CSS

Se si desidera trovare tutti gli elementi HTML che corrispondono a un selettore CSS specifico (id, nome della classe, tipo, attributo, valore dell'attributo, ecc.), utilizzare querySelectorAll() metodi.

In questo esempio, vengono restituiti tutti gli elementi con class="intro" <p> Elenco degli elementi:

Esempio

var x = document.querySelectorAll("p.intro");

Prova da solo

querySelectorAll() Non applicabile a Internet Explorer 8 e versioni precedenti.

Ricerca di oggetti HTML tramite selettore di oggetto HTML

Questo esempio cerca l'elemento form con id="frm1" nella collection forms e visualizza tutti i valori degli elementi:

Esempio

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Prova da solo

Le seguenti oggetti HTML (e collection di oggetti) sono anche accessibili: