Ottenere un elemento DOM in JavaScript

Ora impareremo come ottenere gli elementi DOM della pagina, per poi poter eseguire con essi alcune manipolazioni.

Supponiamo di avere un pulsante:

<input id="button" type="submit">

Otteniamo un riferimento a questo pulsante in una variabile. Per fare ciò, dovresti utilizzare il metodo querySelector del speciale oggetto document. Questo metodo accetta come parametro un selettore CSS e restituisce un riferimento all'elemento trovato tramite questo selettore.

Il nostro pulsante ha un attributo id con valore button. Ciò significa che possiamo trovare questo pulsante con il selettore #button. Quindi, troviamo il nostro pulsante e salviamo il riferimento ad esso in una variabile:

let button = document.querySelector('#button');
console.log(button);

Sono dati 3 paragrafi:

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

Salva il riferimento a ciascun paragrafo in una variabile separata e visualizza il contenuto di ciascuna di queste variabili nella console.