DOCUMENT OBJECT MODEL
10.11 Manejo de clases CSS
10.11.1 Uso de classList.add
10.11.2 Uso de classList.remove
Este es un párrafo resaltado.
10.11.3 Uso de classList.toggle
10.11.4 El método className
Ejemplo 1. Cambia la clase de un elemento.
Ejemplo 2. Alternar entre múltiples clases en función de ciertas condiciones. En este ejemplo, al hacer clic en el botón, se sustituye una clase con fondo azul, se reduce el ancho y cambia el fondo a rojo
10.12 Método window.onresize
Ejemplo 1. Modificación de un elemento del DOM
10.13 Manejo de Formularios
10.13.1 Acceso y manipulación de elementos de Formulario de Contacto
10.13.2 Muestra de Avanzada de Acceder y Manipular datos en un Formulario de Registro
Ejemplo 1. Acceder y Manipular datos de un Formulario de Registro
Ejemplo 2. Acceder, Manipular y validar en tiempo real datos de un Formulario de Registro
10.14 Eventos
10.14.1 Eventos que modifican en el DOM como click, submit, mouseover y otros.
Ejemplo 1. Eventos sobre los campos de un Formulario de Acceso al pasar el mouse por encima de los campos
Ejemplo 2. Botón que cambia de color y texto al hacer clic y a los 2 seg, desaparece el cambio
Ejemplo 3. Botón que cambia de color y texto una vez al hacer clic y permanece
10.14.1.1 Una ventana modal
Ejemplo 1. Eliminar el evento que abre la ventana modal
10.14.2 Propagación de eventos (capturing y bubbling)
10.14.2.1 Propagación de eventos capturing (fase de captura)
Ejemplo 1. Aplicado a una estructura del DOM simple
10.14.2.2 Propagación de eventos bubbling (fase de burbujeo)
Ejemplo 1. Agregar manejadores de eventos en la fase de burbujeo.
Ejemplo 2. Lista de tareas. Delegación de eventos con bubbling
10.14.3 Prevención del comportamiento predeterminado
La función preventDefault()
10.14.4 Detención de la propagación de eventos
La función stopPropagation())
Ejemplo 1. Detener la propagación de un evento.
Haz clic en el botón:
10.15 Traversing del DOM.
10.15.1 parentElement
Ejemplo 1. Método parentElement. Acceder al elemento padre
10.15.2 children
Ejemplo 1. Acceder a una colección de los elementos hijos
10.15.3 nextElementSibling
Ejemplo 1. Encontrar el siguiente hermano del elemento actual
10.15.4 previousElementSibling
Ejercicio 1 Devuelve el hermano anterior del elemento actual
10.16 Comparación de nodos (compareDocumentPosition, contains)
10.16.1 compareDocumentPosition
Ejemplo 1. Comparando la posición de dos elementos
Este es el primer párrafo.
Este es el segundo párrafo.
10.16.2 El método contains
Ejemplo 1. Verificar si un elemento está contenido dentro de otro
Este es el primer párrafo.
Este es el segundo párrafo.
10.17 Creación y Eliminación de Elementos del DOM
10.17.1 Clonación de Nodos
10.17.1.1 Creando Nuevos Elementos y Nodos de Texto.
Ejemplo 1. Creando un nuevo párrafo con texto
Ejemplo 2. Clonando una lista de elementos
Lista Original
Lista Clonada
Ejemplo 3. Insertando un elemento al inicio de una lista
Lista Antes
Lista Clonada
10.17.1.2 Insertar nodos (appendChild, insertBefore)
Ejemplo 1. Agregar un nodo como el último hijo de un nodo padre
Ejemplo 2. Insertar un nodo antes de un nodo hijo de un nodo padre
10.17.1.3 Insertar nodos (removeChild, replaceChild)
Ejemplo 1. Seleccionar el último elemento de una lista y eliminarlo
Lista Antes
Lista Despues
Ejemplo 2. Reemplaza un elemento por un nuevo elemento
Contenedor Antes
Elemento 1
Elemento_177 Antiguo
Elemento 3
Contenedor Despues
Elemento 1
Elemento_177 Antiguo
Elemento 3
Ejemplo 3. Insertar un elemento antes del último
Lista Antes
Lista Despues
Ejemplo 4. Reemplazar el contenido de un elemento
Contenedor Antes
Elemento 1
Elemento 2
Elemento 3
Contenedor Despues
Elemento 1
Elemento 2
Elemento 3