Tutto quello che devi sapere su DOM in JavaScript

Questo articolo ti fornirà una conoscenza dettagliata e completa del Document Object Model ie. DOM in JavaScript.

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?

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.