Introducción a las APIs de JavaScript Manipulación del DOM y Solicitudes HTTP

Las APIs de JavaScript (Interfaz de Programación de Aplicaciones) son conjuntos de funciones y métodos que permiten a los desarrolladores interactuar con diferentes aspectos del entorno de ejecución de JavaScript, como el Document Object Model (DOM) y las solicitudes HTTP. En este artículo, exploraremos dos de las APIs más fundamentales de JavaScript: la API del DOM y la API de solicitudes HTTP, y cómo se utilizan para crear aplicaciones web dinámicas e interactivas.

Manipulación del DOM con JavaScript

El Document Object Model (DOM) es una representación en forma de árbol de la estructura de un documento HTML, que permite a los desarrolladores acceder y manipular los elementos HTML y sus atributos mediante JavaScript. La API del DOM proporciona métodos y propiedades que facilitan la manipulación del DOM desde el código JavaScript.

Selección de Elementos

// Selección de un elemento por su id
const elemento = document.getElementById("miElemento");

// Selección de múltiples elementos por su clase
const elementos = document.getElementsByClassName("miClase");

// Selección de elementos por su etiqueta
const elementos = document.getElementsByTagName("p");

Manipulación de Contenido

// Obtener el contenido de un elemento
const contenido = elemento.innerHTML;

// Cambiar el contenido de un elemento
elemento.innerHTML = "Nuevo contenido";

// Añadir un nuevo elemento al DOM
const nuevoElemento = document.createElement("div");
nuevoElemento.textContent = "Nuevo elemento";
document.body.appendChild(nuevoElemento);

Solicitudes HTTP con JavaScript

Las solicitudes HTTP son una parte fundamental de la comunicación entre el cliente y el servidor en el desarrollo web. JavaScript proporciona la API Fetch para realizar solicitudes HTTP de manera asincrónica y manejar las respuestas de manera eficiente.

Realizar una Solicitud GET

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Realizar una Solicitud POST

fetch('https://api.example.com/save', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));