Scribd
Cargar
23 vistas9 páginas

Resumen de Curso JavaScript y El DOM

Cargado por

Maryorie Eilin Palacios Quijada
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
23 vistas9 páginas

Resumen de Curso JavaScript y El DOM

Cargado por

Maryorie Eilin Palacios Quijada
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Resumen de curso JavaScript y el DOM

¿Qué es el DOM?

Estructura de objetos HTML en un documento web

Cuando comenzamos en el mundo del desarrollo web, normalmente comenzamos por aprender a
escribir etiquetado o marcado HTML y además, añadir estilos CSS para darle color, forma y algo de
interacción. Sin embargo, a medida que avanzamos, nos damos cuenta que en cierta forma
podemos estar bastante limitados.

Si únicamente utilizamos HTML/CSS, sólo podremos crear páginas «estáticas» (sin demasiada
personalización por parte del usuario), pero si añadimos Javascript, podremos crear páginas
«dinámicas». Cuando hablamos de páginas dinámicas, nos referimos a que podemos dotar de la
potencia y flexibilidad que nos da un lenguaje de programación para crear documentos y páginas
mucho más ricas, que brinden una experiencia más completa y con el que se puedan automatizar
un gran abanico de tareas y acciones.

¿Qué es el DOM?

Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del
documento HTML. Una página HTML está formada por múltiples etiquetas HTML, anidadas una
dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol
DOM (o simplemente DOM).

En Javascript, cuando nos referimos al DOM nos referimos a esta estructura, que podemos
modificar de forma dinámica desde Javascript, añadiendo nuevas etiquetas, modificando o
eliminando otras, cambiando sus atributos HTML, añadiendo clases, cambiando el contenido de
texto, etc...

Al estar "amparado" por un lenguaje de programación, todas estas tareas se pueden automatizar,
incluso indicando que se realicen cuando el usuario haga acciones determinadas, como por
ejemplo: pulsar un botón, mover el ratón, hacer click en una parte del documento, escribir un
texto, etc...

El objeto document

En Javascript, la forma de acceder al DOM es a través de un objeto llamado document, que


representa el árbol DOM de la página o pestaña del navegador donde nos encontramos. En su
interior pueden existir varios tipos de elementos, pero principalmente serán o : no es más que la
representación genérica de una etiqueta: HTMLElement.
clase 2 modulo 1

En esta primera pantalla se muestra como se accede a la consola para trabajar en jabascrip y como
se trabaja con el window.

Paos> más herramientas >>herramientas del desarrollador y nos situamos en la pestaña


de consola. Otra forma de acceder a la consola es: click derecho inspeccionar>> consola

si nosotros escribimos Windows en la consola vamos a poder visualizar dicho objeto


podemos expandir y vamos a visualizar sus atributos, si inspeccionamos minuciosamente
vamos a encontrar nuestra función alert, si nosotros escribimos windows.alert Hola mundo
vamos a tener el mismo resultado el objeto Windows nos permitirá realizar acciones sobre
la ventana.
lo que nos interesa de este objeto es un atributo que tiene por nombre documento Este
atributo no es más que otro objeto nos interesa este objeto debido a que con él vamos a
poder realizar acciones sobre nuestra página web vamos a poder editar nodos vamos a
poder crear nodos eliminar…
clase 2 modulo 1 el dom
DOM ( modelo de objeto documentado), es una representación de nuestra página web la
cual el javascript puede utilizar y manipular. El DOM es creado a partir de las etiquetas
que nosotros hayamos colocado dentro de nuestro archivo html veamos su
representación

la representación del DOM en este maquetado sería mediante un árbol donde


observamos que cada nodo es un elemento un elemento no es más que la representación
de una etiqueta html con atributos y métodos un elemento puede tener un padre
hermanos e inclusive hijos. Mediante esta representación jerárquica que nosotros
podemos modificar, agregar nuevos o eliminar

Podamos modificar el don estaremos trabajando con el objeto global documento del cual
como mencionamos anteriormente representa el html y el contenido de la página una vez
que nosotros tenemos claro que cada elemento le corresponde una posición en el árbol
podemos pasar a lo siguiente.
Clase 4 modulo 1 formas de trabajar con JavaScript
Creación de proyecto y carpeta

Ejecución de hola mundo.

Vamos a colocar Hola mundo en el navegador Google Chrome


Modulo 2 obtener elementos clase 1

En este bloque del curso vamos a aprender las diferentes formas en las cuales nosotros
podemos obtener elementos de nuestro doc como sabemos un elemento no es más que
una etiqueta la cual posee atributos y métodos.
Utilizaremos la librería dom para establecer un diseño a la página web. Pasemos al tema
principal obtener elementos mediante una ID-

Clase 2 obtener elementos a partir de clases

Únicamente necesitamos colocar las clases como argumentos


Clase 3 Obtener elementos mediante etiquetas

Clase 4 obtener elementos mediante CSS

Clase 4 elementos hijos


Clase 7 elementos hermanos

También podría gustarte