HTMLDivElement 是什么？常见的DOM类型【前端TS】

不要因为害怕失败，而放弃你原本可以做到的事情。

HTMLDivElement 是什么？

• 它是 TypeScript 内置的 DOM 类型（TS 的 lib.dom.d.ts 里定义的）。
• 对应的就是 HTML 里的 <div> 元素。
• 浏览器在运行时会把 <div> 解析成一个 DOM 对象，在 TS 类型里就是 HTMLDivElement。

换句话说：

const div = document.createElement("div");
// TS 会自动推断 div: HTMLDivElement

常见的 DOM 类型：

TS 给所有 HTML 标签都提供了对应的类型：

• <div> → HTMLDivElement
• <span> → HTMLSpanElement
• <input> → HTMLInputElement
• <form> → HTMLFormElement
• <canvas> → HTMLCanvasElement
• <video> → HTMLVideoElement
• 通用的元素（比如没法确定标签类型） → HTMLElement
• 更顶层 → Element

## 具体关系
Element → HTMLElement → HTMLDivElement（具体元素）

在 Vue3 + TS 里常用场景：

例子 1：模板里的 ref

<template>
  <div ref="box"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const box = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (box.value) {
    box.value.style.background = "red"; // TS 会识别出 style 属性
  }
});
</script>

ref<HTMLDivElement | null> 就告诉 TS：box.value 是一个 <div> 元素。

例子 2：获取 input

<template>
  <input ref="inputRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const inputRef = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputRef.value?.focus(); // TS 知道 input 有 focus()
});
</script>

如果写成 ref<HTMLElement | null>，就没有 focus() 方法提示，因为 HTMLElement 不一定有这个方法。

例子 3：事件对象里的类型

const handleInput = (e: Event) => {
  const target = e.target as HTMLInputElement;
  console.log(target.value);
};