Javascript: 通过 ID 获取数组对象

在开发 Web 应用程序时，经常需要从文档对象模型（DOM）中检索一组相关的元素。如果这些元素有一个共同的类名或标签名，我们可以使用类名或标签名选择器来获取它们。但是，有时候我们需要通过特定的 ID 获取元素，特别是当我们只需要操作一个单独的元素时。

下面是如何使用 JavaScript 通过 ID 获取数组对象的代码示例：

const elements = document.querySelectorAll("#my-id");

在这里，我们使用 document.querySelectorAll() 方法来检索所有具有指定 ID 的元素。该方法返回一个 Nodelist 对象，该对象类似于数组，包含符合条件的所有元素。

要访问返回的元素数组，请使用以下代码：

const elementArray = Array.from(elements);

我们可以将 Nodelist 转换为标准 JavaScript 数组，以便更轻松地迭代和操作元素。

现在，我们已经可以通过 ID 获取元素数组，我们可以执行任何其他适当的操作。例如，我们可以迭代元素数组，并向它们添加事件监听器：

const elements = document.querySelectorAll("#my-id");
const elementArray = Array.from(elements);

elementArray.forEach(element => {
  element.addEventListener("click", handleClick);
});

function handleClick(event) {
  // handle the click event
}

在这里，我们迭代元素数组，并为每个元素添加单击事件监听器。我们使用箭头函数声明函数并在其中注入事件对象。然后，我们可以在处理函数中处理单击事件并执行其他操作。

在许多情况下，我们只需要获取一个元素（而不是一组）。在这种情况下，我们可以使用 document.querySelector() 方法：

const element = document.querySelector("#my-id");

这个方法只返回与给定选择器匹配的第一个元素（如果有）。请注意，这个方法返回的是单个元素（而不是数组）。

使用上述示例，我们可以轻松地通过 ID 获取元素数组或单个元素。这样，我们就可以使用 JavaScript 操作 DOM 元素，从而创建更强大和交互性更强的 Web 应用程序。