Domina el DOM con JavaScript

Name: Domina el DOM con JavaScript
Rating: 4.2 (116 reviews)

Crea tus aplicaciones con JavaScript sin límites

Created byFrancisco Javier Arce Anguiano

Last updated 8/2025

Spanish

What you'll learn

El alumno revisará la historia, las bases y las herramientas para el estudio del DOM.
El alumno conocerá los arreglos y métodos del DOM original.
El alumno conocerá y aplicará los métodos del DOM para acceder a los nodos de su documento HTML.
El alumno conocerá las propiedades de los nodos y la forma de modificarlos.
El alumno aprenderá a crear, modificar y eliminar los nodos de un documento con las instrucciones DOM.
El alumno aprenderá a utilizar las propiedades DOM para navegar en el documento.
El alumno aprenderá los diferentes modelos de captura de eventos y su forma de aplicarlos.
El alumno aplicará los eventos del DOM desde JavaScript para realizar aplicaciones.
El alumno aprenderá a utilizar los eventos DOM de un formulario.

Course content

15 sections • 152 lectures • 15h 48m total length

Bienvenida al curso Domina el DOM con JavaScript5:25
JavaScript se ha convertido rápidamente en uno de los lenguajes más utilizados para el desarrollo de aplicaciones en Internet es incluso es utilizado para el desarrollo de aplicaciones para dispositivos móviles. Una área de suma importancia para el completo aprovechamiento de este lenguaje es el dominio de las instrucciones, propiedades y eventos que se encuentran al rededor del DOM o Document Object Model.

Este curso no es un curso básico de JavaScript. Usted debe tener conocimientos básicos del mismo, pues no se explicarán cosas esenciales como lo ciclos, las variables o estructuras condicionales, así como conocer las etiquetas y las reglas de estilo, sin necesidad de ser un experto.

El objetivo de este curso es aprender los métodos, propiedades y eventos relacionados con el DOM, y algunos ejemplos, como el desarrollo de un sencillo juego de cajita de números o una página en parallax.
Breve historia del DOM3:08
Historia Document Object Model

DOM Level 0: Netscape 2 y 3 (DOM heredado).
DOM Level 1: publicada en 1998.
DOM Level 2: publicada en 2000.
DOM Level 3: publicada en 2004.
DOM Level 4: se esperaba como recomendación oficial en 2016.

(las fechas son aproximadas)
Archivos del curso0:02
En esta lección encontrarás los archivos del curso.
¿Qué es el DOM?2:33
¿Qué es DOM?
El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
Las mismas reglas las podremos utilizar en documentos XML.
Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
El DOM determina la relación entre etiquetas, atributos y textos en una página.
Los navegadores interpretan y organizan el HTML como una estructura DOM.
¿Cómo podemos representar el DOM?4:24
El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
Las mismas reglas las podremos utilizar en documentos XML.
Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
El DOM determina la relación entre etiquetas, atributos y textos en una página.
Los navegadores interpretan y organizan el HTML como una estructura DOM.
Podemos representar una página en el modelo DOM como un árbol genealógico, por ejemplo:
A las etiquetas les llamaremos elementos o nodos.
Tenemos una etiqueta raíz o root <html>
Todo nodo tendrá un nodo “padre”.
Los nodos del mismo padre serán hermanos o “sibling”.
Los nodos que tienen un nodo padre se llaman hijos o “children”.

En HTML y XML TODO es un nodo.
Los tipos de nodos en DOM2:37
Herramienta para explorar el árbol DOM y sus nodos5:55
Con los navegadores modernos podemos inspeccionar una página web, así como ver el código fuente.
Desde la consola podemos añadir, modificar o borrar nodos dentro de la página.
Botón derecho para inspeccionar la página.
En las PCs puedes pulsar la tecla F12.
Cmd+Option+I en Mac
Ctrl+Mayúscula+I en PC
Para manejar el DOM necesitaremos el panel “Elementos” y “Consola”.
Cmd+Option+J en Mac
Ctrl+Mayúscula+J en PC
Con Escape puede abrir las dos ventanas en forma simultánea.
dir(document.body.childNodes)
$(“#main”) (selecciona como en CSS)
Los mensajes de la consola desde JavaScript5:34
console.log(document.querySelector(“#main”));
console.dir(document.querySelector(“#main”));
console.info(“Hola, cara de bola”);
console.warn(“Hola, cara de bola”);
console.error(“Hola, cara de bola”);
console.group(“Links”);
console.dir(document.querySelectorAll(“a”));
console.groupEnd();
Apuntes de la sección : Introducción al estudio del DOM0:02
Apuntes de la sección : Introducción al estudio del DOM

Seleccionar las etiquetas <embed>2:15
Document Object Model Heredado o Legado

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.url
document.title
document.cookie
document.write()
document.embed
Seleccionar las etiquetas <a> o anchors2:59
Document Object Model: document.anchors

Regresa un arreglo con todos los hipervínculos o “anchors” de las etiquetas <a>
document.anchors[0];
document.anchors[“name”];
Desactualizado en HTML5, aunque algunos navegadores lo pueden seguir soportando por compatibilidad.
Seleccionar la etiqueta <body>1:55
Document Object Model: document.body

Regresa la referencia del objeto <body>
Puedes sobrescribir los elemento dentro de <body>
document.documentElement
Regresa el elemento <html>
Es soportado por todos los navegadores
Seleccionar la etiqueta <html>3:08
Document Object Model: document.documentElement

Regresa el elemento <html>
Este elemento no se puede modificar
Si el documento no tiene la etiqueta <html> regresa un valor nulo.
Seleccionar las etiquetas <forms>3:40
Document Object Model: document.forms
Regresa las referencias de las etiquetas <form> en un arreglo.

Acepta:

document.form[0];
document.form[“name”];
documento.forma.elementoForma;
Seleccionar las etiquetas <img>3:12
Document Object Model: document.images

Regresa un arreglo con las referencias a las etiquetas <img>.
El orden del arreglo es como aparecen las imágenes en el documento HTML.
El arreglo no registra a las etiquetas <input> con atributo type=“image”.
Tiene la propiedad “length” y el método item()
Seleccionar los links de las etiquetas <a> o <area>2:32
Document Object Model: document.links

Se obtiene las direcciones de las etiquetas <a> y <area> de los atributos href.
Si las etiquetas no tienen el atributo href, no se obtiene nada.
Las referencias aparecen en el arreglo según aparezcan las etiquetas en el código fuente.
Posee la propiedad length y el método item().
Seleccionar la URL de la página1:20
Document Object Model: document.url

Regresa la dirección URL de la página.
Es similar a la propiedad location.href
Seleccionar el título de la página de la etiqueta <title>1:52
Document Object Model: document.title

Obtiene el contenido de la etiqueta <title>
También podemos modificar el título
Guardar, modificar, leer y borrar cookies6:39
Document Object Model: document.cookie

Permite grabar información en el disco duro del cliente.

La información se almacena como nombre=valor.

Los valores son persistentes.

Podemos crear, modificar y borrar las cookies con JS.

Podemos crear una cookie por medio de:

document.cookie = "usuario=Pedro Infante; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Podemos leer una cookie:

var x = document.cookie;

El formato sería una cadena similar a:

cookie1=valor; cookie2=valor; cookie3=valor;
El método write() para escribir en <body>2:59
Document Object Model: document.write()

El método write() escribe desde el código JavaScript al documento HTML.
Si el documento ha terminado de ser escrito y utiliza el método write(), el contenido de la página será borrado.
Puede aceptar varios parámetros, separados por comas.
Apuntes de la sección 2: El DOM legado o heredado0:02
Apuntes de la sección 2: El DOM legado o heredado

El método getElementById() para seleccionar por identificador7:16
DOM: Seleccionar por identificador

Acceder a los nodos por identificadores
Podemos seleccionar un elemento por su identificador, atributo “id”:
document.getElementById(“identificador”);
El identificador es sensible a mayúsculas y minúsculas.
Si no encuentra el identificador, regresa un valor nulo (null).
Los identificadores en HTML deben ser únicos.
Si existen más de uno, los navegadores sólo toman el primer elemento.
Podemos almacenar la referencia del elemento en una variable.
Todas las acciones sobre la variable, afectarán al elemento
El método getElementsByTagName() para seleccionar por tipo de etiqueta5:46
DOM: Seleccionar por tipo de etiqueta

Podemos seleccionar todos los elementos de una misma etiqueta con:
getElementsByTagName();
Genera un “nodeList” en el mismo orden en que aparecen las etiquetas en el código HTML.
El nodeList es similar a un arreglo, se indexa con un número entero e inicia en cero.
Podemos recorrer un nodeList con un ciclo y la propiedad “length”.
Con el comodín “*” podemos leer todos los elementos de la página.
El método getElementsByClassName() para seleccionar por nombre de clase4:18
DOM Seleccionar por clase

Seleccionar nodos por clase
Contamos con la instrucción:
getElementsByClassName();
La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta clase.
Esta instrucción no es soportada por el IE8-
El método getElementsByName() para seleccionar por el atributo "name"3:56
DOM: Seleccionar por nombre

Seleccionar nodos por nombre
Contamos con la instrucción: getElementsByName();
La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta nombre del atributo “name”.
Esta instrucción no es soportada por el IE8-
En HTML 5 el atributo “name” ha quedado obsoleto, por lo que no se recomienda el uso de esta sentencia.
Los métodos querySelect() y querySelectAll()6:00
DOM: Query Selector

Seleccionar elementos por los selectores de CSS
Contamos con las instrucciones:

querySelector();

querySelectorAll();

El primero reporta sólo un elemento y el segundo un arreglo o ‘nodeList’.
Podemos seleccionar por clase, identificador, atributo o pseudo clase (CSS).
Esta instrucción es soportada por el IE8+
Ambas utilizan los selectores de CSS.
Apuntes de la sección 3: Acceder a los nodos DOM0:02
Apuntes de la sección 3: Acceder a los nodos DOM

Las propiedades nodeType y nodeName de los nodos5:41
Las propiedades de los nodos

node.nodeType: tipo de nodo.
node.nodeName: nombre del nodo.
node.attributes: atributos del nodo.
node.nodeValue: valor del nodo.
Las propiedades nodeValue y textContent5:16
Los valores de los nodos: nodeValue

Regresa el valor del nodo.
Si el nodo es un elemento (etiqueta) el valor es nulo (null).
El valor se encuentra en los nodos de texto.
El valor que regresa, depende del tipo de nodo (nodeType)
Se puede utilizar la propiedad textContent.
Se puede utilizar la propiedad innerHTML.
La propiedad attribute para el manejo de los atributos3:22
DOM: Los atributos de los nodos

Recuperamos el valor del atributo: attributes;
Los atributos también son nodos.
Se pueden indexar, donde el primer índice es cero.
Las propiedades de los nodos son:
attr.isId: regresa verdadero si el atributo es el “id” (puede fallar en algunos navegadores).
attr.name: el nombre del atributo.
attr.value: valor del atributo.
attr.specified: si el atributo fue creado pero no asignado
Los métodos getAttribute() y setAttribute()2:35
DOM: Modificar los nodos

Recuperamos el valor del atributo:

elemento.getAttribute("align");

Modificamos el valor de un atributo:

elemento.setAttribute("align","left");
Los métodos hasAttribute() y removeAttribute()2:50
DOM: Trabajar con los atributos del nodo

Los métodos para modificar los nodos:

• getAttribute()

• setAttribute()

• removeAttribute()

• hasAttribute()

Estos métodos son compatibles en todos los navegadores.
La propiedad innerHTML para modificar el texto de un nodo2:33
DOM: Modificar, tomar y remover texto de un nodo

Por medio de la siguiente propiedad podemos modificar, recuperar su valor o remover texto con o sin etiquetas:

innerHTML

outerHTML

insertAdjacentHTML(insertionPoint, htmlText);

textContent

La única compatible con todos los navegadores es la primera.

Nombre de la regla en cascada y su valor:

elemento.style.estilo = valor
La propiedad classList3:21
DOM: classlist

Soportada por IE10+
nodo.classList.add(clases)
nodo.classList.remove(clases)
nodo.classList.toggle(clases)
nodo.classList.length
nodo.classList.cointains
Ejemplo de la propiedad classList4:48
En este video veremos un ejemplo del método classList().
La propiedad className en el DOM6:10
className obtiene y establece el valor del atributo class del elemento especificado.
Sintaxis
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
Apuntes a la sección 4: Modificar los nodos y sus propiedades0:02
Apuntes a la sección 4: Modificar los nodos y sus propiedades

Crear un nodo con createElement() y addChild()4:38
Crear elementos del DOM

1. Crear los elementos (createElement)

2. Poblar el elemento (innerHTML)

3. Añadir los elementos (addChild)

Ejemplo:

//Crea el nodo

document.createElement("li");

//Añade el nodo

miElemento.appendChild(nuevoElemento);

//Llena o puebla el nodo

nuevoElemento.innerHTML = "Texto";

//Inserta antes del nodo

parent.insertBefore(nuevoElemento, otroElemento);
Insertar un nodo antes de otro nodo5:50
DOM: Insertar “antes” un nodo

Insertar un nodo

El método “insertBefore()” inserta un elemento como un “primer hijo” (first child).

El método “insertChild()” inserta un elemento como “último hijo” (last child) y hay que indicar a partir del hijo.

elemento.insertBefore(insertar,nodoExistente);
Remover un nodo de un árbol DOM4:46
DOM: Eliminar un nodo

Un nodo no puede eliminarse así mismo.
Necesitamos eliminarlo desde su nodo padre.
parent.removeChild(elemento)
Clonar un nodo de una estructura DOM3:18
DOM: Clonar un nodo

Para duplicar un nodo utilizamos:
cloneNode(true|false);
Duplica todos los atributos y sus valores.
Necesitamos los métodos addChild() e insertBefore().
El parámetro es opcional: true clona todos los hijos (children) y falso sólo la etiqueta.
Crear un nodo de texto con createTextNode()2:41
DOM:Crear un nodo de texto

Crea un nodo de texto con contenido.
Hay que añadirlo a un nodo con appendChild() o insertBefore().
El método es:
createTextNode();
Reemplazar un nodo con replaceChild()3:14
DOM: Reemplazar un nodo

Por medio de este método, podemos reemplazar un nodo por otro:
nodoPadre.replaceChild(nodoNuevo, nodoViejo);
Puede ser un nodo que ya exista o uno nuevo.
Apuntes de la sección 5: Crear, modificar y eliminar nodos con JavaScript0:03
Apuntes de la sección 5: Crear, modificar y eliminar nodos con JavaScript

Las propiedades para navegar en la estructura DOM3:01
DOM: Navegar en el documento

Los métodos para moverse a través del árbol DOM son:

parentNode (hacia arriba)
previousSibling (izquierda)
nextSibling (derecha)
firstChild (abajo)
lastChild (abajo)
La propiedad parent5:24
DOM: Parent node

La propiedad parentNode regresa el nodo padre como un “Node object”.
En HTML, el documento tiene como padre a la etiqueta HTML. Sus nodos hijos son HEAD y BODY.
Esta propiedad es sólo lectura, no podemos modificarla.
La propiedad childNodes3:59
DOM: childNodes

Regresa la colección de los nodos hijos.
Los nodos aparecen según aparecen los nodos en el código fuente.
Se indexan como arreglos, iniciando en cero.
Los espacios en blanco, los tabuladores y los saltos de línea, se consideran como nodos de texto.
La propiedad “length” regresa el número de nodos del “nodeList”.
La propiedad childNodes[0] equivale a “firstChild”.
Es una colección sólo lectura, no podemos modificarla.
Los comentarios también son nodos
La propiedad children2:53
DOM: children

Regresa la colección de los nodos hijos.
Los nodos aparecen según aparecen los nodos en el código fuente.
Se indexan como arreglos, iniciando en cero.
Los espacios en blanco, los tabuladores y los saltos de línea, NO se consideran como nodos de texto.
La propiedad “length” regresa el número de nodos del “nodeList”.
Es una colección sólo lectura, no podemos modificarla.
Los comentarios NO se consideran como nodos.
IE6-8 regresan los comentarios también.
La versión IE9+ sólo regresan los nodos elementos.
Las propiedades firstChild y lastChild2:24
DOM: firstChild y lastChild

Las propiedades “firstChild” y “lastChild” regresan el primer y el último nodo de una “nodeList”.
Regresa un nodo ya sea elemento, texto o comentario.
Son propiedades de sólo lectura.
Las propiedades previousSibling y nextSibling2:35
DOM: previousSibling y nextSibling

Las propiedades “previousSibling (izquierda)” y “nextSibling (derecha)” nos proporcionan los nodos anterior y posterior del nodo seleccionado.
Regresa un nodo ya sea elemento, texto o comentario.
Son propiedades de sólo lectura.
Ejemplo práctico: juego de caja de números8:18
En este video realizaremos un sencillo juego de "caja de números" con JavaScript
Apuntes de la sección 6: Navegar en la estructura DOM0:02
Apuntes de la sección 6: Navegar en la estructura DOM

Los diferentes modelos de captura de eventos en DOM8:50
DOM: El registro de los eventos

Un evento es algo que no está programado y debemos estar atentos cuando suceda.
Para poder detectar un evento utilizamos un “listener” o “escucha” para “registrarlo”.
Podemos tener eventos de usuario como: pulsar una tecla, mover el apuntador del ratón, pulsar el ratón, enviar una forma.
Eventos de sistema sería: cuando se carga una página, la finalización de un video, se inicia la carga de un archivo, etc.
Tendremos diferentes formas de “registrar” los eventos:
En las etiquetas
Como DOM 0 o legacy
Como DOM 2
Los eventos en las etiquetas se deben de evitar:
<button onClick=”alerta()”>Alerta</button>
Los eventos de DOM 0 o “legado” se utiliza en todos los navegadores, pero tiene algunas limitaciones:
El manejo de los eventos en navegadores viejos, como IE6-83:49
DOM: Usar eventos en un navegador viejo

Los navegadores IE6-8 no tienen addEventListener(). Se utiliza:

attachEvent(evento, funcion);

No utiliza el parámetro para la propagación.

Si es crítico el manejo de navegadores viejos, puede considerar utilizar jQuery.
Las propiedades de un evento: el eventObject6:24
DOM: Las propiedades de los eventos

Las propiedades generan un objeto con toda la información del mismo: event object.
Esta información cambia un poco dependiendo del navegador.
El “event object” depende del evento.
Las principales propiedades son:
type: tipo de evento.
timeStamp: momento en que el evento sucedió.
currentTarget: Indica el elemento donde se generó el eventListener. No compatible con IE6-8.
target: Indica el objeto donde se originó el evento.
bubbles: si está activo en la fase de burbujas.
cancelable: puede ser cancelado con preventDefault(),
eventPhase: regresa la fase de propagación.
view: objeto de la ventana donde ocurrió el evento.
El modelo de propagación de eventos6:09
DOM: El modelo de propagación de eventos

El modelo de propagación de eventos tiene tres fases: captura, notificación y burbujeo.

IE8- no soportan este modelo.

FASE DE CAPTURA
FASE DE DESTINO
FASE DE BURBUJAS
Detener la propagación de un evento con stopPropagation()2:13
DOM: Detener la propagación de eventos

Podemos detener la propagación de eventos con: e.stopPropagation();
No es compatible con IE8-
Alternativamente para IE podemos usar: e.cancelBubble = true;
Detener el comportamiento por omisión de un evento3:03
DOM: Cancelar el comportamiento por omisión

Por medio del siguiente método podemos cancelar el comportamiento por omisión de un evento: evento.preventDefault()
No se puede cancelar todos los eventos.
Use la propiedad “cancelable” para saber si el evento es cancelable.
El método preventDefault() no detiene la propagación del evento, para ello utilice stopPropagation().
Eliminar un evento con removeEventListener()2:52
DOM: Eliminar un evento

Por medio del siguiente evento podemos eliminar un evento creado con addEventListener():
removeEventListener(evento,función,faseCaptura);
No es compatible con IE8-
Apuntes e la sección 7: El manejo de eventos en DOM0:02
Apuntes e la sección 7: El manejo de eventos en DOM

Los principales eventos del DOM1:43
Eventos de carga de página
onload
onunload (desactualizado)
Eventos del ratón DOM1:
onclick
onmousemove
onmouseover
onmouseout
onmousedown
onm
El evento de fin de la carga de la página: onload3:01
DOM: Eventos de la página

Eventos de carga de página

onload
onunload (desactualizado)
El evento onclick2:25
DOM: Los eventos del ratón

Eventos del ratón DOM1:

onclick
onmousemove
onmouseover
onmouseout
onmousedown
onmouseup
Los eventos onmouseover y onmouseout1:49
DOM: Los eventos del ratón

Eventos del ratón DOM1:

onclick
onmousemove
onmouseover
onmouseout
onmousedown
onmouseup
Los eventos onmousedown y onmouseup1:52
DOM: Los eventos del ratón

Eventos del ratón DOM1:

onclick
onmousemove
onmouseover
onmouseout
onmousedown
onmouseup
El evento onmousemove2:10
DOM: Los eventos del ratón

Eventos del ratón DOM1:

onclick
onmousemove
onmouseover
onmouseout
onmousedown
onmouseup
Los eventos del teclado2:09
DOM: Los eventos del teclado

Eventos del teclado

onkeydown
onkeyup
onkeypress
El evento onSelect()2:20
Los eventos de las cajas de entrada, onfocus y onblur2:14
DOM: Los eventos de las cajas de entrada

Eventos de las cajas de entrada

onblur
onfocus
Los eventos de la forma, onsubmit y onreset2:47
DOM: Los eventos de las formas

onreset
onsubmit
Los eventos de la ventana para hacer un parallax: onscroll5:35
DOM: Los eventos de la ventana

onscroll

Las propiedades pageXOffset y pageYOffset regresan los pixeles que el elemento fue “scrolleado” en forma horizontal y vertical, respectivamente.

Las propiedades pageXOffset y pageYOffset son equivalente a scrollX y scrollY.
Apuntes de la sección 8: Los eventos del DOM0:02
Apuntes de la sección 8: Los eventos del DOM

El objeto Form, sus propiedades y eventos4:33
DOM: El objeto form

Los objetos “form” los encuentras en el arreglo forms[] del objeto document.

Los formularios o formas aparecen en el orden en el que aparecen en el documento.

El objeto form tiene un arreglo elements[] con cada uno de los elementos de la forma.

El orden en que aparecen es cómo aparecen en el código.

Otras propiedades del objeto son: action, encoding, method y target que corresponden a los atributos de la etiqueta.

Los eventos relacionados a un formularios son:

onsubmit
onreset

En ambos, si regresamos un valor falso, no se ejecutan.
Los eventos de los elementos de un formulario5:29
DOM: Los elementos del formulario

Los elementos tradicionales de una forma son:

Botones <input type=”button”> o <button>

Cajas de verificación o checkboxes <input type=”checkbox”>

Archivos o files <input type=”file”>

Campos ocultos o hidden <input type=”hidden”>

Claves de acceso o password <input type=”password”>

Botones de radio <input type=”radio”>

El botón reset <input type=”reset”> o <button type=”reset”>

Los elementos tradicionales de una forma son:

El botón submit <input type=”submit”> o <button type=”submit”>

Lista sencilla o <select>

Lista múltiple o <select multiple>

Opciones de una lista u <option
Las propiedades de los elementos de una forma3:00
DOM: Propiedades de los elementos de un formulario

Los elementos de un formulario tienen cuatro parámetros:

type
form
name
value

Dentro del código de un controlador de evento, la palabra clave “this” hace referencia al elemento de documento que ha activado el evento.

Podemos hacer referencia a otro elemento con this.form.x
Los botones conmutados: checkbox y radio button6:25
DOM: Botones de conmutación

Los botones checkbox y radio tienen una propiedad “checked” booleano y “defaultChecked”, que determina si el objeto está seleccionado al iniciarse la página del formulario.

Al seleccionar uno de los botones, se activa el evento onclick()

Los navegadores modernos también activan el evento onchange()
Los eventos de las cajas de entrada5:15
DOM: Campos de texto

La propiedad “value” representa la cadena introducida por el usuario.

El controlador de evento onchange() se activa cuando el usuario introduce un nuevo texto o edita un texto existente.

El elemento “file” tiene un controlador de eventos onchange() pero la propiedad value es de sólo lectura.

Los campos de texto también reciben los eventos onkeyup(), onkeydown() y onkeypress().

Si regresamos un valor falso de estos eventos, la tecla pulsada no se regresa.

Otros eventos que son aceptados en las cajas de entrada son onfocus(), onblur y onselect()
Las listas con select y option6:11
DOM: Elementos select y option

Una lista <select> puede tener el atributo “multiple” para recibir más de una entrada, de lo contrario sólo recibe una.

Las opciones de ambas listas se crean con la etiqueta <option> y se representan en el objeto Option guardados en el arreglo options[] dentro del objeto Select.

El valor de la selección de la lista (propiedad value) no reside en el objeto Select, sino en cada uno de los objetos Option.

Al seleccionar o anula una selección, se lanza el evento onchange().

Cuando la lista es de un solo elemento, la propiedad seletedIndex indica el número o índice de la opción seleccionada.

Para listas múltiples hay que recorrer el arreglo options[] y verificar la propiedad value para cada una.

Cada elemento dentro de options[] contiene una propiedad “selected” y “text”.

La propiedad “value” es la que se envía al servidor, la propiedad “text” es la que el usuario ve en la pantalla (label).
Otros elementos como fielset, label o elementos ocultos3:31
Validar un formulario con DOM5:26
En este video utilizaremos lo visto en toda la sección para validar un formulario sencillo.
Apuntes de la sección 9: Manejo de los eventos y los elementos de un formulario0:03
Manejo de los eventos y los elementos de un formulario

Crear un menú responsivo, primera parte11:05
En los dispositivos pequeños es muy incómodo un menú horizontal.

Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
Crear un menú responsivo, segunda parte10:13
En los dispositivos pequeños es muy incómodo un menú horizontal.

Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
Crear un menú responsivo en la parte baja del viewport2:36
En los dispositivos pequeños es muy incómodo un menú horizontal.

Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
Crear un menú en un encabezado responsivo11:03
En los dispositivos pequeños es muy incómodo un menú horizontal.

Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
Crear una galería responsiva, primera parte11:59
En los dispositivos pequeños es muy incómodo un menú horizontal.

Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
Crear una galería responsiva, segunda parte9:49
En los dispositivos pequeños es muy incómodo un menú horizontal.

Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
Crear un slideShow de imágenes responsivas, primera parte10:02
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos las reglas de estilo.
Crear un slideShow de imágenes responsivas, segunda parte11:16
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos las etiquetas HTML.
Crear un slideShow de imágenes responsivas, tercera parte9:23
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos las reglas de estilo.
Crear un slideShow de imágenes responsivas, cuarta parte7:54
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos el código JS.
Crear una galería con SlideShow responsivos, primera parte HTML7:01
En los siguientes videos reuniremos la galería de fotos con nuestro deslizador de las mimas, haciéndola responsivas con mediaquerys.
Crear una galería con SlideShow responsivos, segunda parte CSS7:45
En los siguientes videos reuniremos la galería de fotos con nuestro deslizador de las mimas, haciéndola responsivas con mediaquerys.
Crear un acordeón con JavaScrpt, CSS3 y HTML510:46
Crear un menú tabular con instrucciones DOM11:33
Crear un menú tabular lateral con instrucciones DOM12:18
Menú de tabuladores con encabezado, primera parte11:22
Menú de tabuladores con encabezado, segunda parte9:41
Crear un menú responsivo deslizable12:15
Crear un menú que se oculte con el scroll8:27
En este video realizaremos un menú oculto con el scroll, según el ejemplo de la W3C.
Crear un menú con encabezado13:27
En este video crearemos un menú deslizable con encabezado, basado en los ejercicios de la W3C.
Crear un menú vertical con submenú, primera parte, etiquetas HTML5:07
En este video construiremos un menú vertical con un submenú. basado en un ejercicio de la W3C.
Crear un menú vertical con submenú, segunda parte, estilos en cascada9:59
En este video construiremos un menú vertical con un submenú. basado en un ejercicio de la W3C.
Crear un menú vertical con submenú, tercera parte, el código JavaScript7:50
En este video construiremos un menú vertical con un submenú. basado en un ejercicio de la W3C.
Ejemplo: Crear una calculadoras básica con JavaScript8:18
El String.fromCharCode() método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.
El método includes () determina si un arreglo contiene un elemento especificado.
Este método devuelve true si el arreglo contiene el elemento, y false si no lo está.
Nota: el método includes () distingue entre mayúsculas y minúsculas.
Calculadora, filtrar sólo números11:05
El String.fromCharCode() método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.
El método includes () determina si un arreglo contiene un elemento especificado.
Este método devuelve true si el arreglo contiene el elemento, y false si no lo está.
Nota: el método includes () distingue entre mayúsculas y minúsculas.
Calculadora, controlar botones8:07
El String.fromCharCode() método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.
El método includes () determina si un arreglo contiene un elemento especificado.
Este método devuelve true si el arreglo contiene el elemento, y false si no lo está.
Nota: el método includes () distingue entre mayúsculas y minúsculas.
Calculadora, realizar las funciones básicas8:20
El String.fromCharCode() método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.
El método includes () determina si un arreglo contiene un elemento especificado.
Este método devuelve true si el arreglo contiene el elemento, y false si no lo está.
Nota: el método includes () distingue entre mayúsculas y minúsculas.
Calculadora, operaciones y control de signos11:53
El String.fromCharCode() método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.
El método includes () determina si un arreglo contiene un elemento especificado.
Este método devuelve true si el arreglo contiene el elemento, y false si no lo está.
Nota: el método includes () distingue entre mayúsculas y minúsculas.
Crear un reloj de cuenta atrás con JS, primera parte6:36
Crear un reloj de cuenta atrás con JS, segunda parte9:38
Crear un juego de memoria: HTML y CSS8:29
Crear la tabla
Crear los estilos en cascada
Crear un juego de memoria: las variables y los manejadores de eventos6:49
Crear el archivo JS
Crear las variables
Crear los eventos
Crear un juego de memoria: iniciar el juego7:46
Cambiar el tablero
Barajar las cartas
Actualizar los datos
Crear un juego de memoria: voltear las cartas9:13
¿Se seleccionó la segunda carta?
¿Las cartas son iguales?
acierto
¿Las cartas son diferentes?
regresar
¿Se seleccionó la primer carta?
Voltear primera carta
Crear un juego de memoria: concluir el juego10:25
Necesitamos escribir las rutinas para:
Voltear las cartas que no coinciden
Limpiar variables
Comprobar el juego
Añadir renglones a una tabla dinámicamente8:28
Por medio de las funciones del DOM podemos añadir renglones en forma dinámica a una tabla con JavaScript.
createElement() y appendChild()
Añadir renglones a una tabla dinámicamente desde un formulario9:06
Por medio de las funciones del DOM podemos añadir renglones en forma dinámica a una tabla con JavaScript.
createElement() y appendChild()
Podemos añadirlos desde un formulario HTML.
Añadir y calcular los totales de una tabla dinámica14:09
Por medio de las funciones del DOM podemos añadir renglones en forma dinámica a una tabla con JavaScript.
createElement() y appendChild()
Podemos añadirlos desde un formulario HTML.
Eliminar un renglón de la tabla9:35
Podemos añadir un botón para seleccionar un registro para ser borrado.
Necesitamos identificarlo para borrarlo.
Nuevamente desplegamos la tabla.

Requirements

Tener conocimientos generales de HTML y CSS.
Tener conocimientos generales de JavaScript.

Description

JavaScript se ha convertido rápidamente en uno de los lenguajes más utilizados para el desarrollo de aplicaciones en Internet es incluso es utilizado para el desarrollo de aplicaciones para dispositivos móviles. Una área de suma importancia para el completo aprovechamiento de este lenguaje es el dominio de las instrucciones, propiedades y eventos que se encuentran al rededor del DOM o Document Object Model.

Este curso no es un curso básico de JavaScript. Usted debe tener conocimientos básicos del mismo, pues no se explicarán cosas esenciales como lo ciclos, las variables o estructuras condicionales, así como conocer las etiquetas y las reglas de estilo, sin necesidad de ser un experto.

El objetivo de este curso es aprender los métodos, propiedades y eventos relacionados con el DOM, y algunos ejemplos, como el desarrollo de un sencillo juego de cajita de números o una página en parallax.

Para poder sacarle mayor provecho a este curso, usted debe tener algún editor de código como Aptana, SublimeText o Brackets, pero puede seguirnos con cualquier otro.. Los objetivos generales son:

El alumno revisará la historia, las bases y las herramientas para el estudio del DOM.
El alumno conocerá los arreglos y métodos del DOM original.
El alumno conocerá y aplicará los métodos del DOM para acceder a los nodos de su documento HTML.
El alumno conocerá las propiedades de los nodos y la forma de modificarlos.
El alumno aprenderá a crear, modificar y eliminar los nodos de un documento con las instrucciones DOM.
El alumno aprenderá a utilizar las propiedades DOM para navegar en el documento.
El alumno aprenderá los diferentes modelos de captura de eventos y su forma de aplicarlos.
El alumno aplicará los eventos del DOM desde JavaScript para realizar aplicaciones.
El alumno aprenderá a utilizar los eventos DOM de un formulario.

Cuenta con lo apuntes en formato PDF y los ejercicios del curso al final del mismo.

Who this course is for:

Desarrolladores web con conocimientos generales de JavaScript

Domina el DOM con JavaScript

What you'll learn

Explore related topics

Course content

Introducción al estudio del DOM9 lectures • 30min

El DOM 0, legado o heredado12 lectures • 33min

Acceder a los nodos DOM6 lectures • 27min

Modificar los nodos y sus propiedades10 lectures • 37min

Crear, modificar y eliminar nodos con JavaScript7 lectures • 25min

Navegar en la estructura DOM8 lectures • 29min

El manejo de eventos en DOM8 lectures • 33min

Los eventos del DOM12 lectures • 28min

Manejo de los eventos y los elementos de un formulario9 lectures • 40min

Ejemplos del uso del DOM con JavaScript39 lectures • 6hr 11min

Requirements

Description

Who this course is for: