以 document.querySelector 选择第一个或最后一个元素 - JavaScript

在 JavaScript 中，我们可以使用 document.querySelector() 方法来选择 HTML 文档中的元素。该方法将返回文档中第一个匹配给定选择器的元素。

为了选择文档中的最后一个匹配元素，我们可以使用 document.querySelectorAll() 方法，然后从所返回的元素列表中取得最后一个元素。

下面是一个示例代码片段：

// 选择文档中第一个 class 名为 "example" 的元素
let firstEl = document.querySelector('.example');

// 选择文档中最后一个 class 名为 "example" 的元素
let elements = document.querySelectorAll('.example');
let lastEl = elements[elements.length - 1];

在此示例中，我们首先使用 document.querySelector() 方法选择文档中第一个具有 example 类的元素。然后，我们使用 document.querySelectorAll() 方法选择文档中所有具有 example 类的元素，并从列表中获取最后一个元素。

尽管上面的示例使用类选择器，但是您可以使用任何有效的 CSS 选择器来选择元素。如果文档中没有与选择器匹配的元素，则 document.querySelector() 方法将返回 null。因此，确保您的选择器正确以避免潜在的 null 返回。

使用 document.querySelector() 和 document.querySelectorAll() 可以轻松地在 JavaScript 中选择元素，从而使您能够向 HTML 文档中添加交互性和动态功能。