Sabíeu que podem utilitzar JavaScript per manipular el contingut de la pàgina web? Sembla interessant oi? Comprenguem què és el model d’objectes de documents. DOM en JavaScript de la manera següent:
- Què és DOM a JavaScript?
- Accions de DOM a JavaScript
- S'està consultant el DOM
- Escoltar esdeveniments
- Interacció amb formularis
- Creació d'elements HTML
- Addició de CSS
Què és DOM a JavaScript?
El navegador crea el Model d’objectes de documents o DOM quan es carrega una pàgina web. En forma gràfica, és com un arbre d'elements també anomenats nodes, que s'utilitzen per representar tots els elements de la pàgina.
Tot el DOM de la nostra pàgina web es troba dins de l'objecte document. Programàticament, aquest model ens permet llegir o fins i tot canviar el contingut de la nostra pàgina mitjançant . No és genial?
Accions de DOM a JavaScript
Algunes de les accions que podem realitzar amb aquest model són:
Canvieu / elimineu elements HTML al DOM / a la pàgina.
Canvieu i afegiu estils CSS als elements
Llegir i canviar atributs (href, src, alt), etc.
Creeu elements nous i inseriu-los al DOM / pàgina.
Adjunteu els oients d'esdeveniments a elements (feu clic, premeu la tecla, envieu)
Consulta del DOM a JavaScript
Agafar un element HTML o aconseguir-lo per afegir-lo / canviar-lo o contingut s’anomena consulta.
Codi HTML:
Javascript i el DOM h1 {font-size: 60px}Codi JavaScript:
var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // canviant el color de fons a blau clar body.style. backgroundColor = 'blau clar'Hem canviat el color del text del títol de negre a vermell mitjançant JavaScript. Ho hem aconseguit utilitzant el .estil La propietat va canviar el valor de color igualar a xarxa .
Ara canviem el color de fons de l’element del cos a blau clar .
Amb això, arribem al final d’aquest article DOM a JavaScript. Espero que tingueu una comprensió de com funcionen els models d'objectes de documents i com implementar el mateix DOM a JavaScript.
Ara que ja coneixeu DOM a JavaScript, consulteu el fitxer per Edureka. La formació en certificació per al desenvolupament web us ajudarà a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris de 'DOM a JavaScript' i us respondrem.
aplicació d’anàlisis de big data