En JavaScript, el objeto document representa la pagina web proporciona métodos para interactuar con los elemento HTML en la página web. la API ofrece al programador métodos para encontrar y modificar los elementos del documento html
1. Encontrando Elementos HTML
JavaScript proporciona varios métodos para encontrar (o seleccionar) elementos HTML:
document.getElementById(id): Selecciona un único elemento por su atributo id único. Esta es la forma más común y rápida de seleccionar un elemento.
const myElement = document.getElementById("myDiv");document.getElementsByTagName(tagName): Selecciona todos los elementos con el nombre de etiqueta especificado (por ejemplo, “p”, “h1”, “div”). Devuelve una HTMLCollection (un objeto similar a un array).
const paragraphs = document.getElementsByTagName("p");document.getElementsByClassName(className): Selecciona todos los elementos con el nombre de clase CSS especificado. Devuelve una HTMLCollection.
const redElements = document.getElementsByClassName("red");document.querySelector(selector): Selecciona el primer elemento que coincide con un selector CSS (por ejemplo, “#myId”, “.myClass”, “p”). Devuelve un único elemento.
document.querySelectorAll(selector): Selecciona todos los elementos que coinciden con un selector CSS. Devuelve una NodeList (otro objeto similar a un array).
2. Modificación de Elementos HTML
Una vez que has seleccionado un elemento, puedes modificar sus propiedades a continuación algunos ejemplos :
element.innerHTML: Obtiene o establece el contenido HTML dentro de un elemento. Esto puede incluir otras etiquetas HTML.
myElement.innerHTML = "<h1>¡Hola!</h1>";element.attribute: Obtiene o establece el valor de un atributo de un elemento (por ejemplo, href, src, value).
Utiliza getAttribute() y setAttribute() para atributos no estándar o para mayor consistencia.
const link = document.getElementById("myLink");
link.href = "https://www.example.com";element.style.property: Obtiene o establece el estilo CSS en línea de un elemento. Los nombres de las propiedades están en camelCase (por ejemplo, backgroundColor, fontSize).
myElement.style.backgroundColor = "lightblue";element.setAttribute(attribute, value): Establece el valor de un atributo. Útil para establecer atributos que no tienen una propiedad directa (o para mayor consistencia).
myElement.setAttribute("data-my-attribute", "myValue");3. Añadiendo y Eliminando Elementos
El DOM proporciona métodos para añadir y eliminar dinámicamente elementos HTML:
document.createElement(tagName): Crea un nuevo elemento HTML del tipo especificado. Este elemento aún no está adjunto al documento.
const newParagraph = document.createElement("p");document.removeChild(element): Elimina un elemento hijo de un elemento padre.
const parent = document.getElementById("myDiv");
parent.removeChild(newParagraph);document.appendChild(element): Añade un elemento hijo a un elemento padre (al final).
const parent = document.getElementById("myDiv");
parent.appendChild(newParagraph);document.insertBefore(newElement, existingElement): Inserta un nuevo elemento antes de un elemento hijo existente.
document.replaceChild(newElement, oldElement): Reemplaza un elemento hijo antiguo con uno nuevo.
document.write(text): Escribe HTML directamente en el documento. Evita usar esto después de la carga inicial de la página, ya que puede sobrescribir toda la página.
4. Añadiendo Manejadores de Eventos
element.onclick = function(){code}: Adjunta un manejador de eventos a un elemento.
5. Propiedades del objecto Documento
El objeto document también tiene propiedades que te dan acceso a diferentes partes de la estructura HTML:
document.anchors: Devuelve una colección de todos los elementos<a>con un atributoname.document.body: Devuelve el elemento<body>.document.documentElement: Devuelve el elemento<html>.document.forms: Devuelve una colección de todos los elementos<form>.document.head: Devuelve el elemento<head>.document.images: Devuelve una colección de todos los elementos<img>.document.links: Devuelve una colección de todos los elementos<a>con un atributohref.document.title: Obtiene o establece el título del documento.document.URL: Devuelve la URL completa del documento
Como podemos mostrar en una casilla text, el resultado de seleccionar un radio button, con un dato predeterminado en otro label
cual seria la manejara mas efectiva de realizar scripts
que lenguajes recomenadria para reemplazar php, ya sea por su sintaxis o por su practicidad
como puedo hacer un Randow en JS
¿Qué diferencia hay entre HTMLCollection y NodeList, y por qué es importante saber cuál devuelve cada método como getElementsByClassName o querySelectorAll?
Como puedo cambiar entre los diferentes tipos de datos de los inputs tyoe text o number o radio, como podemos saber que tipo de dato se esta usando en ese momento ya que javascript tiene tipado dinamico
Cómo funciona el Bootstrap
¿Qué ventajas ofrece trabajar con el DOM directamente frente a usar frameworks como jQuery?
Cómo me puedo guiar, para organizar de forma más clara los códigos, [script y HTML]
Cómo me puedo guiar, para organizar los códigos script y HTML de forma más estructurada,?
Como se usa php con base de datos ?
En un sitio web se puede hacer lo mismo que en un programa para empresa? (o un emprendimiento) el tema del inventario – caja etc, para llevar un control de ventas.
Normalmente se hace un programa, no se puede hacer en un sitio web?
“¿Qué hace el método createElement()en JavaScript?”
cómo puedo hacer para organizar de forma más estructurada los códigos script y HTML?