Gli ultimi tutorial di sviluppo web
 

JavaScript HTML DOM Elementi

❮ Precedente Successivo Capitolo ❯

In questa pagina ti insegna come trovare e gli elementi di accesso HTML in una pagina HTML.

Alla ricerca di elementi HTML

Spesso, con JavaScript, si vuole manipolare elementi HTML.

Per fare ciò, è necessario trovare gli elementi prima. Ci sono un paio di modi per farlo:

  • Trovare elementi HTML di id
  • Trovare elementi HTML per nome tag
  • Trovare elementi HTML per class nome
  • Trovare gli elementi HTML di selettori CSS
  • Trovare gli elementi HTML di collezioni di oggetti HTML

Trovare elementi HTML da Id

Il modo più semplice per trovare un elemento HTML nel DOM, è quello di utilizzare l'elemento id .

Questo esempio consente di individuare l'elemento con id="intro" :

Esempio

var myElement = document.getElementById("intro");
Prova tu stesso "

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

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

Trovare elementi HTML per tag Nome

Questo esempio trova tutti <p> elementi:

Esempio

var x = document.getElementsByTagName("p");
Prova tu stesso "

Questo esempio consente di individuare l'elemento con id="main" , e poi trova tutti <p> elementi all'interno "main" :

Esempio

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

Trovare gli elementi HTML di Class Nome

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

Questo esempio restituisce un elenco di tutti gli elementi con class="intro" .

Esempio

var x = document.getElementsByClassName("intro");
Prova tu stesso "

Trovare gli elementi in base al nome della classe non funziona in Internet Explorer 8 e versioni precedenti.

Trovare gli elementi HTML di selettori CSS

Se si desidera trovare tutti gli elementi HTML che corrisponde a un selettore CSS specificato ( id , i nomi delle classi, tipi, attributi, valori di attributi, ecc), utilizzare la querySelectorAll() metodo.

Questo esempio restituisce un elenco di tutti <p> elementi con class="intro" .

Esempio

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

Il querySelectorAll() metodo non funziona in Internet Explorer 8 e versioni precedenti.

Trovare gli elementi HTML di HTML raccolte di oggetti

Questo esempio consente di individuare l'elemento form con id="frm1" , nella raccolta forme, 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 tu stesso "

I seguenti oggetti HTML (e raccolte di oggetti) sono accessibili anche:

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »


❮ Precedente Successivo Capitolo ❯