El DOM es la página convertida en objetos que JavaScript puede leer y cambiar.
querySelector(): Devuelve el primer elemento que coincide con un selector CSS (o null si no hay ninguno).
querySelectorAll(): Devuelve todos los elementos que coinciden con el selector, en una lista que se recorre con for…of o forEach.
textContent: El texto de un elemento, para leerlo o cambiarlo.
classList: Añade, quita, alterna o comprueba clases.
El DOM es la página convertida en objetos que JavaScript puede leer y cambiar: buscar elementos, cambiar su texto, sus clases o sus estilos, y crear o quitar elementos.
Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
Esencial. Devuelve el primer elemento que coincide con un selector CSS (o null si no hay ninguno).
Esencial. Devuelve todos los elementos que coinciden con el selector, en una lista que se recorre con for…of o forEach.
El elemento con ese id. Equivale a querySelector("#id").
Esencial. El texto de un elemento, para leerlo o cambiarlo. Es lo seguro cuando el texto viene de la persona usuaria.
El HTML de dentro de un elemento, para leerlo o sustituirlo. Interpreta etiquetas: no lo uses con texto escrito por la persona usuaria (riesgo de seguridad); para eso, textContent.
Esencial. Añade, quita, alterna o comprueba clases: add, remove, toggle, contains. La forma recomendada de cambiar el aspecto: el estilo va en el CSS.
Leen o cambian un atributo HTML (src, href, alt, aria-*…).
Esencial. Los atributos data-* de un elemento, como un objeto: data-categoria se lee en dataset.categoria.
Estilos en línea de un elemento (las propiedades con guion se escriben en camelCase: backgroundColor). Para variables CSS, style.setProperty("--x", valor). Mejor cambiar clases y dejar el estilo en el CSS.
Esencial. Crea un elemento nuevo, que no aparece hasta que se inserta con append (al final) o prepend (al principio).
Quita el elemento de la página.
El antecesor más cercano (o el propio elemento) que coincide con un selector. Muy útil con los eventos.
Esencial. Lo que hay escrito o elegido en un campo de formulario. Siempre es texto: conviértelo con Number() si es un número.
Muestra u oculta un elemento (es el atributo hidden de HTML).
El DOM es la página convertida en objetos que JavaScript puede leer y cambiar.
Código del tema: const intro = document.querySelector(".intro");
El DOM es la página convertida en objetos que JavaScript puede leer y cambiar: buscar elementos, cambiar su texto, sus clases o sus estilos, y crear o quitar elementos.
Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
Esencial. Devuelve el primer elemento que coincide con un selector CSS (o null si no hay ninguno).
Esencial. Devuelve todos los elementos que coinciden con el selector, en una lista que se recorre con for…of o forEach.
El elemento con ese id. Equivale a querySelector("#id").
Esencial. El texto de un elemento, para leerlo o cambiarlo. Es lo seguro cuando el texto viene de la persona usuaria.
El HTML de dentro de un elemento, para leerlo o sustituirlo. Interpreta etiquetas: no lo uses con texto escrito por la persona usuaria (riesgo de seguridad); para eso, textContent.
Esencial. Añade, quita, alterna o comprueba clases: add, remove, toggle, contains. La forma recomendada de cambiar el aspecto: el estilo va en el CSS.
Leen o cambian un atributo HTML (src, href, alt, aria-*…).
Esencial. Los atributos data-* de un elemento, como un objeto: data-categoria se lee en dataset.categoria.
Estilos en línea de un elemento (las propiedades con guion se escriben en camelCase: backgroundColor). Para variables CSS, style.setProperty("--x", valor). Mejor cambiar clases y dejar el estilo en el CSS.
Esencial. Crea un elemento nuevo, que no aparece hasta que se inserta con append (al final) o prepend (al principio).
Quita el elemento de la página.
El antecesor más cercano (o el propio elemento) que coincide con un selector. Muy útil con los eventos.
Esencial. Lo que hay escrito o elegido en un campo de formulario. Siempre es texto: conviértelo con Number() si es un número.