Document Object Model (DOM)
Aprende el Document Object Model (DOM) y mucho más en nuestro Curso:
El Document Object Model (DOM), nos permiten seleccionar, definir, manipular y cambiar propiedades o elementos en un documento HTML / HTML5.
Unas de las principales cosas que se deben de comprender son:
-> Elementos por Id
-> Cambiar Estilos CSS
-> Cambiar Clases
-> Definir Contenido
-> Reemplazar Alert
-> Mostrar y Ocultar
-> Y otros componentes y atributos de los mismos.
Los Elementos Id, los podemos utilizar para seleccionar un elemento y así manipular del mismo. La forma en como podemos seleccionar un elemento por id es de la siguiente:
document.getElementById(' nombre del Id del elemento ');
Un ejemplo seria seleccionar un elemento por Id, como a continuación se muestra la manipulación del un elemento <section> ... </section> con identificador llamado 'caja', en una función llamada Seleccion.
<!-- Este es un Comentario --> <!DOCTYPE html> <html> <head> <title> Titulo del Documento </title> <head> <script> function Seleccion(){ document.getElementById('caja'); } </script> <body> <section id="caja"> ..contenido del section.. </section> </body> </html>
Para cambiar Estilos CSS, seria utilizar lo anterior pero agregando el estilo y su nuevo valor del mismo, por ejemplo vamos a cambiar el color del fondo del <section> por uno color rojo, y para que la función se active la ejecutaremos en un evento onload.
<!-- Este es un Comentario --> <!DOCTYPE html> <html> <head> <title> Titulo del Documento </title> <head> <script> function Seleccion(){ document.getElementById('caja').style.backgorund = 'red'; } </script> <body onload="Seleccion();"> <section id="caja"> ..contenido del section.. </section> </body> </html>
Suscribirse a:
Enviar comentarios
(
Atom
)
No hay comentarios :
Publicar un comentario