Principais Web APIs para Desenvolvimento Web em JavaScript

As Web APIs do JavaScript são conjuntos de interfaces que permitem a manipulação do navegador e da página web, incluindo funcionalidades como manipulação do DOM, interação com o BOM, tratamento de eventos, requisições AJAX e armazenamento de dados.

Estrutura e Manipulação do DOM

O Document Object Model (DOM) representa a página HTML como uma estrutura de árvore hierárquica, onde cada nó corresponde a um elemento, atributo ou texto. Para selecionar elementos, é possível utilizar diferentes métodos:

• document.querySelector('.seletor'): Retorna o primeiro elemento que corresponde ao seletor CSS.
• document.querySelectorAll('div.classe'): Retorna todos os elementos que correspondem ao seletor, como uma lista.
• document.getElementById('idUnico'): Seleciona um elemento pelo seu atributo id, embora seu uso seja limitado em favor de seletores CSS.
• document.getElementsByTagName('p'): Obtém elementos pela tag HTML.
• document.getElementsByClassName('minhaClasse'): Seleciona elementos com base na classe.

Cada nó no DOM possui uma propriedade nodeType que indica seu tipo, como elemento (valor 1), texto (valor 3), comentário (valor 8) ou documento (valor 9). Para percorrer a árvore, utilize propriedades como parentNode para o nó pai, childNodes para os filhos, firstChild e lastChild para os primeiros e últimos filhos, e nextSibling ou previousSibling para nós adjacentes. Para operar apenas com elementos, use children, firstElementChild e métodos similares, considerando a compatibilidade com navegadores.

As operações no DOM incluem criação de nós com document.createElement('div') ou document.createTextNode('texto'), modificação do documento com appendChild() para adicionar filhos, insertBefore() para inserir antes de um nó, removeChild() para remover, e replaceChild() para substituir. Atributos podem ser gerenciados com getAttribute('class'), setAttribute('id', 'novoId'), removeAttribute('style') e element.attributes.

Modelo de Objetos do Navegador (BOM)

O Browser Object Model (BOM) fornece aceso às funcionalidades do navegador. A propriedade navigator.userAgent identifica o tipo de navegador. O objeto history permite navegação com history.back() e history.forward(). O objeto location oferece detalhes da URL atual:

// Propriedades do objeto location
location.href; // URL completa
location.protocol; // Protocolo (ex.: http:)
location.host; // Hostname e porta
location.pathname; // Caminho do recurso
location.search; // Query string
location.hash; // Fragmento da âncora

Além disso, métodos como location.reload() recarregam a página e location.replace() redirecionam sem histórico.

Tratamento de Eventos

Eventos representam ações do usuário ou do navegador, como cliques ou carregamento de páginas. O objeto Event contém informações como o alvo do evento (target), o tipo (type) e a capacidade de cancelar a ação padrão (cancelable). Métodos importantes incluem event.preventDefault() para evitar ações padrão e event.stopPropagation() para interromper a propagação.

O fluxo de eventos envolve captura (de cima para baixo) e borbulhamento (de baixo para cima). A delegação de eventos aproveita o borbulhamento, adicionando um único ouvinte a um elemento pai para gerenciar eventos de múltiplos filhos, melhorando o desempenho:

// Exemplo de delegação de eventos
document.getElementById('lista').addEventListener('click', function(evento) {
  if (evento.target.tagName === 'LI') {
    console.log('Item clicado:', evento.target.textContent);
  }
});

Requisições AJAX e Políticas de Segurança

AJAX permite comunicação assíncrona com o servidor. A classe XMLHttpRequest é usada para enviar requisições. O estado da requisição é monitorado via readyState, com valores de 0 (não inicializado) a 4 (concluído). A propriedade status indica o código de resposta HTTP.

// Exemplo de requisição POST com AJAX
const requisicao = new XMLHttpRequest();
requisicao.open('POST', '/api/dados', true);
requisicao.onreadystatechange = function() {
  if (requisicao.readyState === 4) {
    if (requisicao.status === 200) {
      const resposta = JSON.parse(requisicao.responseText);
      console.log('Dados recebidos:', resposta);
    } else {
      console.error('Erro na requisição, status:', requisicao.status);
    }
  }
};
const payload = { nome: 'exemplo', valor: 123 };
requisicao.send(JSON.stringify(payload));

A política de mesma origem restringe requisições entre protocolos, domínios ou portas diferentes. Para contornar isso, técnicas incluem JSONP (usando tags <script>), cabeçalhos CORS (Access-Control-Allow-Origin), postMessage para comunicação entre janelas, proxies HTTP ou WebSockets.

Armazenamento no Navegador

Dados podem ser armazenados localmente no navegador usando APIs específicas:

• localStorage: Armazena dados persistentemente, mesmo após o fechamento do navegador, até serem explicitamente removidos via código ou limpeza manual.
• sessionStorage: Mantém dados apenas durante a sessão atual do navegador, sendo limpos quando a aba ou janela é fechada.
• Cookies: Armazenam pequenas quantidades de dados (até 4KB) e são enviados automaticamente em requisições HTTP, permitindo persistência e compartilhamento entre portas.

// Exemplo de uso do localStorage
localStorage.setItem('chave', 'valor');
const valorArmazenado = localStorage.getItem('chave');
localStorage.removeItem('chave');