5 APIs simples e práticas em html5

Autor：Eve Cole Data da Última Atualização：2025-08-08 14:48:02

Comentário: Quando você fala sobre "html5" na multidão, você pode se sentir como um dançarino ou unicórnio exótico chegando ao meio da casa com um claro significado de "Eu sou legal, eu sei"

Isso não pode ser dito que somos vãos. A API HTML básica não se desenvolveu nos últimos anos, de modo que, quando um pequeno recurso novo aparecer, como o espaço reservado, ela nos dará uma aparência nova. Embora muitos recursos HTML5 sejam implementados em novos navegadores, a maioria dos programadores ainda não conhece ou nunca ouviu falar de algumas APIs pequenas e muito úteis. Neste artigo, apresentarei algumas dessas APIs e receberei a todos para descobrir mais APIs HTML5 mais desconhecidas!

Element.ClassList

A API de classe fornece uma função básica de controlar o CSS que implementamos ao longo dos anos usando a biblioteca de ferramentas JavaScript:

// Adicione uma classe CSS

myElement.classList.add ("newclass");

// Exclua uma classe CSS

myElement.classList.remove ("existingclass");

// Verifique se você tem uma classe CSS

myElement.classList.Contains ("OneClass");

// reverte a existência ou não de uma classe CSS

myElement.classList.toggle ("outra classe");

O principal valor desta API recém -emergente é: simples e prática.

API de contexto

Esta nova API de contexto de Menu é muito útil: ela não substitui o menu original do clique com o botão direito do mouse, mas adiciona seu menu personalizado do clique com o botão direito do mouse ao menu do clique com o botão direito do mouse no navegador:

<Seção contextMenu = "MyMenu">

<!-Adicionar menu->

</menu>

</seção>

Deve -se notar que é melhor usar o JavaScript para criar esses códigos de menu dinamicamente, porque o evento de menu acabará por ligar para o JavaScript para executar tarefas. Se o usuário proibir o JavaScript, o menu do clique com o botão direito não será gerado e ele não verá o menu ao mesmo tempo.

Element.DataSet

Usando a API do conjunto de dados, os programadores podem obter facilmente ou definir dados-* Propriedades personalizadas:

/* O código a seguir é um exemplo

// obtenha elementos

var elemento = document.getElementById ("mydiv");

// obtenha id

var id = element.dataset.id;

// Leia o valor de "Data-my-Custom-Key"

var customKey = element.dataset.mycustomkey;

// modificar para outros valores

element.dataset.mycustomkey = "algum outro valor";

// vire para fora:

// <div data-name = "mydiv" data-id = "myid" data-my-custom-key = "algum outro valor"> </div>

Escusado será dizer que é tão simples e prático quanto a lista de classe

Window.PostMessage API

Até o IE8 apoia a API de pós -maquiagem por muitos anos. A função da API de pós -Message é que ela permite que você passe os dados de informações entre duas janelas do navegador ou iframes:

// De uma janela ou iframe no domínio A, envie uma mensagem para uma janela ou ifame no domínio B.

var iframewindow = document.getElementById ("iframe"). ContentWindow;

iframewindow.postMessage ("Saudações da primeira janela!"); </p> <p> // Receba mensagens em uma janela ou iframe em um segundo domínio diferente

window.addeventListener ("message", function (event) {

// Teste a legalidade do domínio

if (event.origin == "http://www.vevb.com") {

// Informações de log de saída

console.log (event.data);

// Mensagem de feedback

event.source.postMessage ("Como você está bem!");

}

]);

O corpo da mensagem pode ser apenas uma string, mas você pode usar json.stringify e json.parse para converter mensagens em órgãos de dados mais significativos!

atributo de foco automático

O atributo de foco automático pode fazer com que os elementos de entrada, entrada ou textarea se tornem automaticamente o foco da página quando a página é carregada:

Em lugares como páginas de pesquisa do Google com padrões fixos, a propriedade AutoFocus é o recurso ideal.

O navegador suporta cada API um pouco diferente, portanto, verifique o suporte a esses recursos antes de usá -los. Reserve algum tempo para ler a descrição detalhada de cada API, e acredito que você encontrará mais.