HTMLElement/Event Tipos do DOM
Última atualização: 2026-10-22
HTMLElement/Event Tipos do DOM
Todos os tipos do DOM vêm da lib DOM nativa do TypeScript: os elementos formam uma cadeia de herança (EventTarget → Node → Element → HTMLElement → HTMLInputElement ...), e os objetos de evento carregam target. Tipos precisos vêm do estreitamento: instanceof transforma HTMLElement em uma subclasse concreta antes de você poder acessar .value; o mesmo vale para e.target dentro dos manipuladores de eventos.
| Grupo | Configuração e Prática |
|---|---|
| Tipo | Sintaxe |
| Modo strict | Não necessário |
ℹ️ Info O editor transpila TypeScript para JavaScript e o executa (sem verificação de tipos); veja a Saída de cada exemplo para o resultado da verificação.
📝 Sintaxe
// estreitamento de elementos: instanceof reduz para uma subclasse concreta
function setText(el: HTMLElement, text: string) {
if (el instanceof HTMLInputElement) {
el.value = text; // .value só existe após o estreitamento
} else {
el.textContent = text; // elementos comuns usam textContent
}
}
// estreitamento de eventos: e.target é EventTarget | null
function onClick(e: Event) {
const t = e.target;
if (t instanceof HTMLInputElement) {
console.log(t.value); // disponível apenas após o estreitamento
}
}⚙️ Parâmetros
| HTMLElement | A base comum de todos os elementos HTML: apenas membros genéricos como .textContent/.style; querySelector retorna Element por padrão, estreitado por etiqueta via seu parâmetro genérico |
|---|---|
| HTMLInputElement | Uma subclasse concreta para inputs com extras como .value/.name/.checked — o caso clássico de membros disponíveis apenas após o estreitamento |
| Event.target | O elemento que o evento realmente atingiu, tipado EventTarget | null (pode ser window, document, ...); quase sempre precisa de estreitamento por instanceof antes do uso |
Retorno：O estreitamento não tem valor de retorno — ele apenas faz o compilador "ver" a referência como um tipo mais preciso dentro daquele ramo, com custo zero em tempo de execução.
▶ Exemplo
Edite o código abaixo e clique em Testar para ver o resultado transpilado:
Saída：
input.value = "dev@example.com"
textContent = "Welcome"
input "email" = "dev@example.com"
clicked <HTMLElement>
(Saída de execução após a transpilação; classes stub substituem o DOM real — o mesmo código com instanceof funciona contra elementos reais no navegador, onde o código DOM realmente roda)💡 Observações
ℹ️ Info Vale memorizar a cadeia de hierarquia: EventTarget → Node → Element → HTMLElement → etiquetas concretas (HTMLInputElement/HTMLDivElement...). Quanto mais alto na cadeia, menos membros; quanto mais específico o estreitamento, mais membros disponíveis.
💡 Dica querySelector aceita um atalho genérico: document.querySelector<HTMLInputElement>('#email') retorna HTMLInputElement | null, dispensando instanceof; mas nada é validado em tempo de execução — só é seguro se o elemento realmente for um input.
⚠️ Atenção Não confunda e.target com e.currentTarget: target é o elemento realmente atingido (possivelmente não aquele ao qual você vinculou o listener, e possivelmente null), enquanto currentTarget é o elemento vinculado. Para valores de formulários, prefira e.currentTarget (com assinaturas de callback precisas para tipos de evento específicos).
🏷️ Configuração e Prática Relacionadas
💡 Casos relacionados
Mais casos em breve.
📚 Tutoriais relacionados
❓ Perguntas frequentes
P Por que o tipo de retorno de document.querySelector é anulável?
R Porque o seletor pode não corresponder a nenhum elemento — strictNullChecks obriga você a tratar esse null (um if de guarda ou encadeamento opcional). Este é o ponto em que o modo estrito é mais famosamente irritante e mais famosamente salvador.
P Como ler o value de um input sem erro de tipo?
R Obtenha primeiro um HTMLInputElement: seja com querySelector<HTMLInputElement>("#id"), seja estreitando um Element com instanceof HTMLInputElement. Um HTMLElement simples não tem .value — esse membro vive na subclasse.
P Como obter um tipo de evento preciso nos callbacks de addEventListener?
R A lib DOM faz sobrecarga dos nomes de eventos comuns: em el.addEventListener("input", (e) => ...), o e é automaticamente o subtipo de Event correspondente; combinando com genéricos de etiqueta (querySelector<HTMLInputElement>), target estreita ainda mais. Apenas nomes sem sobrecarga precisam de asserção manual.
