JavaScript
Diseño web, JavaScript
8abril 18, 2025

Introducción a la API para manipular el DOM

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 atributo name.
  • 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 atributo href.
  • document.title: Obtiene o establece el título del documento.
  • document.URL: Devuelve la URL completa del documento

Comments

  1. Como podemos mostrar en una casilla text, el resultado de seleccionar un radio button, con un dato predeterminado en otro label

    Responder

  5. ¿Qué diferencia hay entre HTMLCollection y NodeList, y por qué es importante saber cuál devuelve cada método como getElementsByClassName o querySelectorAll?

    Responder

  6. 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

    Responder
Post a Comment