Javascript 相当于 Jquerys :first / :last

如何解决Javascript 相当于 Jquerys :first / :last

我正在努力从我的工作流程中删除 jQuery，而是使用 vanilla Javascript。在下文中，我正在努力寻找 :first 和 :last 的解决方案。我尝试了一些选项，包括 .firstChild / .lastChild - 我没有发现任何有效的方法。

在 jQuery 中，我有：

firstInput = $('form#enquiry-form input[type=text]:not("#first_name"):first'),lastInput = $('form#enquiry-form input[type=text]:not("#first_name"):last')

在原版 JS 中，我有：

firstInput =  document.querySelector('form#enquiry-form input[type="text"]:not(#first_name)').firstChild,lastInput = document.querySelector('form#enquiry-form input[type="text"]:not(#first_name)').lastChild

谁能指出我正确的方向？

解决方法

jQuery 的 :first 和 :last 为您提供第一个或最后一个匹配元素（与选择器匹配的元素）。

对于 :first，这就是 querySelector 给你的，所以只需：

firstInput =  document.querySelector('form#enquiry-form input[type="text"]:not(#first_name)');

除了获取列表并从中获取最后一个条目之外，没有与 :last 等效的 DOM：

const list = document.querySelectorAll('form#enquiry-form input[type="text"]:not(#first_name)');
lastInput = list.length ? list[list.length - 1] : null;

有一个 at proposal 正在通过 JavaScript 过程（它处于第 3 阶段，已经很远了）。人们可以希望它也能被 DOM 集合采用（虽然我还没有听说过，但请继续阅读）。如果发生这种情况，该代码将变得更简单：

// IF/WHEN `at` is adopted in DOM lists
lastInput = document.querySelectorAll('form#enquiry-form input[type="text"]:not(#first_name)').at(-1);

或者可能是 NodeList 和 HTMLCollection 接口开始通过 item 处理负索引（at 最初是 item，希望统一数组和 DOM 列表的这一方面，但不幸的是这是不可能的）。

目前尚不清楚 DOM 列表是否一定支持 at 或 item 的负索引。因此，您最好为它提供一个实用程序功能，您可以希望在某个时候更新该功能。