如何在 TypeScript 中使用 document.getElementById()

How to use document.getElementById() in TypeScript

document.getElementById()要在 TypeScript 中使用该方法：

使用类型断言正确键入所选元素。
使用类型保护来确保变量不存储null值。
访问任何特定于元素的属性。

这是index.html本文中示例的文件。

索引.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input id="message" type="text" name="message" value="Initial Value" />

    <div id="box">hello world</div>

    <button id="btn">Submit</button>

    <script src="./src/index.ts"></script>
  </body>
</html>

这是相关的 TypeScript 代码。

源代码/index.ts


const input = document.getElementById('message') as HTMLInputElement | null;

if (input != null) {
  console.log(input.value); // 👉️ "Initial Value"
}

// ---------------------------------

const box = document.getElementById('box') as HTMLDivElement | null;
console.log(box?.innerHTML); // 👉️ "hello world"

// ---------------------------------

const button = document.getElementById('btn') as HTMLButtonElement | null;

if (button != null) {
  console.log(button.innerText); // 👉️ "Submit"
}

document.getElementById
方法的返回类型为
HTMLElement | null。id如果DOM 中不存在具有提供的元素，则该方法返回一个null值。

如果我们必须访问变量上的任何特定于元素的属性，我们必须使用类型断言来正确键入它

当我们有关于 TypeScript 不知道的值类型的信息时，使用类型断言。

我们有效地告诉 TypeScriptinput变量存储一个HTMLInputElement或一个null值而不用担心它。

在第一个示例中，我们将input变量键入为
HTMLInputElement | null.

这些类型一致命名为HTML***Element. 一旦您开始输入
HTML..，您的 IDE 应该能够帮助您自动完成。

一些常用的类型有：HTMLInputElement、HTMLButtonElement、
HTMLAnchorElement、HTMLImageElement、HTMLTextAreaElement、
HTMLSelectElement等。

我们使用一个简单的if语句作为
类型保护
来确保变量在访问其属性之前input不存储值。null

源代码/index.ts


const input = document.getElementById('message') as HTMLInputElement | null;

// 👉️ input has type HTMLInputElement or null here

if (input != null) {
  // 👉️ input has type HTMLInputElement here
  console.log(input.value); // 👉️ "Initial Value"
}

TypeScript 知道input变量在块中的类型，并允许我们直接访问它的属性。 HTMLInputElementifvalue

null包含在类型断言中
始终是最佳实践，因为如果找不到提供的元素，该getElementById方法将返回
。nullid

如果引用等于或，您还可以使用
可选的链接 (?.)运算符来短路nullundefined

源代码/index.ts


const box = document.getElementById('box') as HTMLDivElement | null;

console.log(box?.innerHTML); // 👉️ "hello world"

undefined如果引用等于nullor ，则可选的链接运算符短路返回undefined。

换句话说，如果box变量存储一个null 值，我们将不会尝试访问该innerHTML属性并得到运行时错误。 null

如果您不对该document.getElementById方法使用类型断言，则变量的类型将为HTMLElement | null.

源代码/index.ts


// 👇️ const input: HTMLElement | null
const input = document.getElementById('message');

if (input != null) {
  // ⛔️ Can't access value here
  console.log(input.value); // 👉️ "Initial Value"
}

由于类型value上不存在该属性HTMLElement，因此不允许我们访问它。

当您不必访问任何特定于元素的属性时，这种方法就足够了。

–