DOCUMENT OBJECT MODEL
10.1 - Introducción al DOM. Aprendiendo a seleccionar, modificar y manipular elementos del DOM
Soy el primer elemento con class="intem"
10.1.1 Selectores con clase='lista'
Sustituir el contenido del selector con id=titulo
Modificar el texto de un elemento. Sustituir por..
Cambiar el atributo de un elemento. Sustituir una imagen por otra
10.2.4.1 Vaciar todo el contenido dentro de la div
Primer párrafo
Segundo párrafo
Tercer párrafo
Cuarto párrafo
10.2.4.2 Vaciar parcialmente el contenido dentro de la div. Remueve el tercer párrafo
Primer párrafo
Segundo párrafo
Tercer párrafo
Cuarto párrafo
10.6 Métodos de selección
Ejemplo getElementsByTagName
10.6.1 - Cambiando el color del texto del contenido
Este es el 1er párrafo dentro
etiquetas |pre|
Este párrafo con etiquetas |pre|
está dentro de una división.
Este es el 3er párrafo dentro
etiquetas |pre|.
10.7 Métodos modernos de selección
10.7.1 Métodos querySelector y querySelectorAll
10.7.2 Ventajas de querySelector y querySelectorAll
Ejemplo 1. Comparando ambos métodos
Este es un párrafo con clase highlight
Otro párrafo sin la clase highlight.
Este es un span con clase highlight.10.8 Modificación de Contenido.
Ejemplo 1. Utilizando la propiedad textContent
Texto original
Ejemplo 2. Aplicación de la propiedad innerText
Texto original
Ejemplo 3. Aplicación de la propiedad innerHTML
Texto original
10.9 Crear y agregar nuevos elementos (createElement, appendChild, insertBefore)
10.9.1 y 10.9.2 Uso de createElement y de appendChild
Este es el primer parrafo dentro de la div con el id="miContenedor"
10.9.3 Uso de insertBefore
Primer Texto dentro de etiqueta p
Texto de referencia
10.9.4 Uso combinado de createElement, appendChild e insertBefore.
Este es el párrafo original para realizar el ej. 10.9.4
10.10 Manipulación de Atributos. Métodos getAttribute, setAttribute, removeAttribute.
10.10.1 Uso de getAttribute
Ejemplo 1. Obtener el valor del atributo "href" de un enlace
Visitar un_ejemplo.comEjemplo 2. Obtener el valor de un atributo personalizado.
Ejemplo 3. Validación de un formulario y obtención de datos
10.10.2 Uso de setAttribute
Ejemplo 1. Cambiar el valor de un atributo existente. Redirige la página
Visitar ejemplo2.comEjemplo 2. Añadir un atributo personalizado
Ejemplo 3. Cambiar una clase CSS
Este es un párrafo con la clase sencilla
Ejemplo 4. Crear un elemento asignarle atributos
10.10.3 Uso de removeAtribute
Ejemplo 1. Remover Atributos de Estilo (style)
Este es un párrafo en rojo que se eliminara su Estilo (style)
Ejemplo 2. Desactivar Funcionalidad de Enlaces
Este enlace no irá a ninguna parteEjemplo 3. Desactivar Funcionalidad de un botón
Al recargar la pagina puede reiniciar el proceso y repetir la prueba
Ejemplo 4. Habilitar atributos en un campo de formulario previamente deshabilitado.
Ejemplo 5. Quitar atributos. Limpiar datos personalizados de un elemento
Ejemplo 6. Quitar Atributos de Accesibilidad (aria-attributes)