Elementi JavaScript HTML DOM
Questa pagina ti insegna come trovare e accedere agli elementi HTML in una pagina HTML.
Trovare elementi HTML
Spesso, con JavaScript, vuoi manipolare elementi HTML.
Per fare ciò, devi prima trovare gli elementi. Ci sono diversi modi per farlo:
- Trovare elementi HTML per id
- Trovare elementi HTML in base al nome del tag
- Trovare elementi HTML in base al nome della classe
- Trovare elementi HTML dai selettori CSS
- Trovare elementi HTML da raccolte di oggetti HTML
Trovare l'elemento HTML per ID
Il modo più semplice per trovare un elemento HTML nel DOM è utilizzare l'ID elemento.
Questo esempio trova l'elemento con id="intro"
:
Esempio
const element = document.getElementById("intro");
Se l'elemento viene trovato, il metodo restituirà l'elemento come oggetto (in elemento).
Se l'elemento non viene trovato, l'elemento conterrà null
.
Trovare elementi HTML in base al nome del tag
Questo esempio trova tutti <p>
gli elementi:
Esempio
const element = document.getElementsByTagName("p");
Questo esempio trova l'elemento con id="main"
e quindi trova tutti <p>
gli elementi all'interno "main"
:
Esempio
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Trovare elementi HTML in base al nome della classe
Se vuoi trovare tutti gli elementi HTML con lo stesso nome di classe, usa
getElementsByClassName()
.
Questo esempio restituisce un elenco di tutti gli elementi con class="intro"
.
Esempio
const x = document.getElementsByClassName("intro");
Trovare elementi HTML dai selettori CSS
Se vuoi trovare tutti gli elementi HTML che corrispondono a un selettore CSS specificato (id, nomi di classi, tipi, attributi, valori di attributi, ecc.), usa il querySelectorAll()
metodo.
Questo esempio restituisce un elenco di tutti <p>
gli elementi con class="intro"
.
Esempio
const x = document.querySelectorAll("p.intro");
Trovare elementi HTML da raccolte di oggetti HTML
Questo esempio trova l'elemento del modulo con id="frm1"
, nella raccolta di moduli e visualizza tutti i valori degli elementi:
Esempio
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Sono inoltre accessibili i seguenti oggetti HTML (e raccolte di oggetti):