Sapevi che possiamo usare JavaScript per manipolare i contenuti sulla pagina web? Sembra interessante, vero? Comprendiamo cos'è il Document Object Model, ad es. DOM in JavaScript nel modo seguente:
- Cos'è DOM in JavaScript?
- Azioni del DOM in JavaScript
- Interrogare il DOM
- Ascolto di eventi
- Interagire con i moduli
- Creazione di elementi HTML
- Aggiunta di CSS
Cos'è DOM in JavaScript?
Il Document Object Model o DOM viene creato dal browser quando viene caricata una pagina web. In forma grafica, è come un albero di elementi chiamati anche nodi, che vengono utilizzati per rappresentare ogni singolo elemento della pagina.
Tutto il DOM della nostra pagina web si trova all'interno dell'oggetto documento. A livello di codice, questo modello ci consente di leggere o persino modificare il contenuto della nostra pagina tramite . Non è bello?
Azioni del DOM in JavaScript
Alcune delle azioni che possiamo eseguire con questo modello sono:
Cambia / Rimuovi elementi HTML nel DOM / sulla pagina.
Modifica e aggiungi stili CSS agli elementi
Leggere e modificare gli attributi (href, src, alt), ecc.
Crea nuovi elementi e inseriscili nella pagina DOM /.
chiamare per riferimento c ++
Associare listener di eventi agli elementi (clic, pressione di un tasto, invio)
Interrogazione del DOM in JavaScript
Afferrare un elemento HTML o impossessarsene per aggiungere / modificare o il contenuto è chiamato query.
ordina algoritmi c ++
Codice HTML:
Javascript e DOM h1 {font-size: 60px}Codice JavaScript:
var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // cambiando il colore di sfondo in azzurro body.style. backgroundColor = 'lightblue'Abbiamo cambiato il colore del testo del titolo da nero a rosso utilizzando JavaScript. Abbiamo ottenuto questo risultato utilizzando il .stile proprietà ha quindi modificato il valore di colore uguale a netto .
Ora cambiamo il colore di sfondo dell'elemento del corpo in azzurro .
Con questo, arriviamo alla fine di questo articolo DOM in JavaScript. Spero che tu abbia capito come funzionano i modelli di oggetti documento e come implementare lo stesso DOM in JavaScript.
Ora che conosci DOM in JavaScript, controlla il file di Edureka. Il corso di formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Hai domande per noi? Per favore menzionalo nella sezione commenti di 'DOM in JavaScript' e ti risponderemo.