ts document.querySelector
时间: 2025-01-04 17:28:16 浏览: 12
### TypeScript 中 `document.querySelector` 的用法
在 TypeScript 中使用 `document.querySelector` 可以通过指定更精确的返回类型来增强代码的安全性和可读性。默认情况下,`querySelector` 返回的是 `Element | null` 类型。
#### 基本语法
当调用 `document.querySelector` 并传入一个选择器字符串时,该方法会返回第一个匹配的选择器的元素[^2]。如果未找到任何匹配项,则返回 `null`。
对于特定类型的 HTML 元素,可以通过类型断言来指明预期的具体类型:
```typescript
// 获取具有 .sample 类的第一个元素并将其视为 HTMLElement
const elem1: HTMLElement | null = document.querySelector('.sample');
```
为了提高安全性,在访问可能不存在的节点之前应先检查其是否存在:
```typescript
if (elem1 !== null) {
console.log(elem1.textContent);
}
```
#### 针对具体标签的例子
针对具体的 HTML 标签如 `<body>` ,可以直接声明更为确切的结果类型:
```typescript
// 将 body 节点定义为 HTMLBodyElement 或者 null
const body: HTMLBodyElement | null = document.querySelector('body');
if (body !== null){
console.log(body.innerHTML);
}
```
上述例子展示了如何利用 TypeScript 提供更强力的类型系统特性去处理 DOM 查询操作,从而减少运行时错误的发生概率[^3]。
阅读全文