使用 TypeScript 按类名选择元素

作者

使用 TypeScript 按类名选择元素

Select elements by Class name using TypeScript

在 TypeScript 中按类名选择元素：

  1. 使用document.getElementsByClassName()方法。
  2. 正确键入所选元素，例如 as
    HTMLCollectionOf<HTMLElement>。
  3. 可选择将类数组对象转换为数组以访问特定于数组的方法。

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

索引.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

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

这是相关的 TypeScript 代码。

源代码/index.ts
const boxes = document.getElementsByClassName(
  'box',
) as HTMLCollectionOf<HTMLElement>;

// ✅ Get first element with class
if (boxes.length > 0) {
  const first = boxes[0];
  console.log(first.innerText); // 👉️ "Box 1"
}

// ✅ Convert to array
const arr = Array.from(boxes);

// ✅ Iterate over array
arr.forEach(box => {
  console.log(box.innerHTML);
});

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

// ✅ Get first element with class using querySelector
const first = document.querySelector('.box') as HTMLElement | null;

if (first != null) {
  console.log(first.innerText);
}

document.getElementsByClassName
方法的返回类型为
HTMLCollectionOf<Element>。

该Element接口没有许多您可能需要使用的属性，例如styleor innerText，因此我们使用类型断言将元素集合类型化为HTMLCollectionOf<HTMLElement>。


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

我们有效地告诉 TypeScript 集合中的每个元素都是类型的HTMLElement，不用担心。

我们也可以更具体并使用HTMLDivElement类型。

源代码/index.ts
const boxes = document.getElementsByClassName(
  'box',
  // 👇️ collection of DIV elements
) as HTMLCollectionOf<HTMLDivElement>;

if (boxes.length > 0) {
  const first = boxes[0];
  console.log(first.innerText); // 👉️ "Box 1"
}

const arr = Array.from(boxes);

arr.forEach(box => {
  console.log(box.innerHTML);
});

boxes现在我们将变量键入为div元素的集合。

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

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

请注意，该document.getElementsByClassName方法不返回数组，它返回具有提供的类名的所有子元素的类数组对象。

如果您需要访问集合中特定于数组的方法，则必须先将其转换为数组。

源代码/index.ts
const boxes = document.getElementsByClassName(
  'box',
) as HTMLCollectionOf<HTMLElement>;

if (boxes.length > 0) {
  const first = boxes[0];
  console.log(first.innerText); // 👉️ "Box 1"
}

// 👇️ convert to array
const arr = Array.from(boxes);

// 👇️ access array-specific methods
arr.forEach(box => {
  console.log(box.innerHTML);
});

我们使用
Array.from
方法将类数组对象转换为数组，因此我们可以使用
forEach
方法对其进行迭代。

每次迭代的box变量类型是，因为我们对该方法使用了类型断言。 HTMLElement getElementsByClassName

请注意，如果您必须访问特定于元素的属性，例如value
输入元素上的属性，则必须将集合键入为该特定元素类型的集合，例如HTMLCollectionOf<HTMLInputElement>.

如果您需要获取具有特定类的第一个元素，请使用该
document.querySelector方法。

源代码/index.ts
// ✅ Get first element with class using querySelector
const first = document.querySelector('.box') as HTMLElement | null;

if (first != null) {
  console.log(first.innerText);
}

querySelector
方法的返回类型为
Element | null。如果 DOM 中不存在具有提供的选择器的元素，则该方法返回一个null值。

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

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

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

如果您必须访问特定于元素的属性，请将变量键入为特定类型。

源代码/index.ts
const firstInput = document.querySelector(
  '.message',
) as HTMLInputElement | null;

if (firstInput != null) {
  console.log(firstInput.value);
}

message我们选择了 DOM 中第一个带有类的元素。我们需要访问value元素的属性，而HTMLElement接口没有value属性，因此我们将元素键入为
HTMLInputElement.

–

发表评论