¿Sabías que podemos usar JavaScript para manipular el contenido de la página web? Parece interesante ¿verdad? Entendamos qué es el modelo de objetos de documento, es decir DOM en JavaScript de la siguiente manera:
- ¿Qué es DOM en JavaScript?
- Acciones de DOM en JavaScript
- Consultando el DOM
- Escuchar eventos
- Interactuar con formularios
- Crear elementos HTML
- Añadiendo CSS
¿Qué es DOM en JavaScript?
El navegador crea el modelo de objetos de documento o DOM cuando se carga una página web. En forma gráfica, es como un árbol de elementos también llamados nodos, que se utilizan para representar cada elemento en la página.
función de sobrecarga c ++
Todo el DOM de nuestra página web se encuentra dentro del objeto del documento. Programáticamente, este modelo nos permite leer o incluso cambiar el contenido de nuestra página a través de . ¿No es genial?
Acciones de DOM en JavaScript
Algunas de las acciones que podemos realizar con este modelo son:
Cambiar / eliminar elementos HTML en el DOM / en la página.
Cambiar y agregar estilos CSS a elementos
Leer y cambiar atributos (href, src, alt), etc.
Cree nuevos elementos e insértelos en el DOM / página.
Adjuntar oyentes de eventos a elementos (hacer clic, pulsar tecla, enviar)
Consultando el DOM en JavaScript
Tomar un elemento HTML o tomarlo para agregar / cambiar o contenido se denomina consulta.
Código HTML:
Javascript y DOM h1 {font-size: 60px}Código JavaScript:
var title = document.getElementById ('title') // cgangin color a rojo title.style.color = 'red' var body = document.getElementById ('body') // cambiando el color de fondo a celeste body.style. backgroundColor = 'azul claro'ejemplo de marco de prueba de selenium webdriver
Cambiamos el color del texto del título de negro a rojo usando JavaScript. Logramos esto usando el .estilo propiedad luego cambió el valor de color igualar a red .
Ahora cambiemos el color de fondo del elemento del cuerpo a azul claro .
Con esto, llegamos al final de este artículo DOM en JavaScript. Espero que comprenda cómo funcionan los modelos de objetos de documento y cómo implementar el mismo DOM en JavaScript.
Ahora que conoce DOM en JavaScript, consulte el por Edureka. La capacitación para la certificación en desarrollo web lo ayudará a aprender a crear sitios web impresionantes utilizando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y a implementarlo en Amazon Simple Storage Service (S3).
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de “DOM en JavaScript” y nos comunicaremos con usted.