Latest web development tutorials
×

JavaScript corso

JavaScript corso JavaScript breve introduzione JavaScript uso JavaScript esportazione JavaScript grammatica JavaScript dichiarazioni JavaScript nota JavaScript variabile JavaScript Tipi di dati JavaScript Oggetti JavaScript funzione JavaScript portata JavaScript evento JavaScript stringa JavaScript operatori JavaScript confrontare JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript tipo di conversione JavaScript Espressioni regolari JavaScript errore JavaScript Debugging JavaScript alzata variabile JavaScript Modalità Strict JavaScript Uso improprio JavaScript Forms Authentication JavaScript Parole chiave riservate JavaScript JSON JavaScript void JavaScript Codice Specifica

JS funzione

JavaScript definizione di funzione JavaScript Argomenti funzione JavaScript richiamo della funzione JavaScript chiusure

JS HTML DOM

DOM breve introduzione DOM HTML DOM CSS DOM evento DOM EventListener DOM elemento

JS Tutorial avanzato

JavaScript Oggetti JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Oggetti

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript pop JavaScript evento programmato JavaScript Cookies

JS magazzino

JavaScript magazzino JavaScript prova jQuery JavaScript prova Prototype

JS Esempi

JavaScript Esempi JavaScript istanza di oggetto JavaScript istanza di oggetto Browser JavaScript HTML DOM Esempi JavaScript sommario

JS Manuale di riferimento

JavaScript Oggetti HTML DOM Oggetti

JavaScript HTML DOM

Attraverso il DOM HTML, l'accesso a tutti gli elementi del documento HTML JavaScript.

HTML DOM (Document Object Model)

Quando la pagina viene caricata, il browser creerà il modello a oggetti documento di una pagina (Document Object Model).

il modello HTML DOM è strutturato come un albero di oggetti:

albero HTML DOM

albero DOM HTML

modello a oggetti programmabili, JavaScript acquisito la capacità sufficiente a creare HTML dinamico.

  • JavaScript può cambiare pagina per tutti gli elementi HTML
  • JavaScript può cambiare pagina HTML tutte le proprietà
  • JavaScript può cambiare pagina tutti gli stili CSS
  • JavaScript può reagire a tutti pagina degli eventi

Trovare elementi HTML

In genere, JavaScript, è necessario manipolare gli elementi HTML.

Per fare questa cosa, è necessario prima trovare l'elemento. Ci sono tre modi per farlo:

  • Trova elementi HTML per ID
  • Trova elementi HTML per nome tag
  • Trova elementi HTML di nome della classe

Trovare elementi HTML per ID

Trovare elementi HTML nel DOM Il modo più semplice è quello di utilizzare id dell'elemento.

Questo esempio trova id = elemento "intro":

Esempi

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

Prova »

Se trova l'elemento, il metodo sarà la forma dell'oggetto (x in) le restituisce.

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

Trovare elementi HTML per nome tag

Questo esempio trova id = elementi "principali", e quindi cercare id = elemento "principale" in tutti gli elementi <p>:

Esempi

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

Prova »

Trova elementi HTML di nome della classe

In questo caso pergetElementsByClassName funzione per trovare la class = elemento "intro":

Esempi

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

Prova »

HTML DOM Tutorial

In questo tutorial pagine seguenti, imparerete:

  • Come cambiare il contenuto dell'elemento HTML (innerHTML)
  • Come cambiare lo stile di elementi HTML (CSS)
  • Come evento HTML DOM di una reazione
  • Come faccio ad aggiungere o rimuovere elementi HTML