Как выбрать элементы по `tabindex`

Question

Я хотел бы создать массив, выбрав элементы по tabindex Возможно ли это? если так, то как правильно поступить? Я понял, что нам нужно пройти l oop через все элементы и найти реквизит, объявленный с tabindex, но ищущий правильный путь.

<div class="focusguard" id="focusguard-1" tabindex="0"></div>
<div>
  <input class="user-input" type="text" autofocus tabindex="1">
</div>
<div>
  <ul>
    <li class="first-item" tabindex="2">
      <span>Item 1</span>
    </li>
    <li tabindex="3">Item 2</li>
    <li tabindex="4">Item 3</li>
    <li tabindex="5">Item 4</li>
    <li tabindex="6">Item 5</li>
    <li tabindex="7">Item 6</li>
    <li tabindex="8">Item 7</li>
    <li tabindex="9">Item 8</li>
    <li tabindex="10">Item 9</li>
    <li class="last-item" tabindex="11">Item 10</li>
  </ul>
</div>

Как я могу создать новый массив с помощью tabindex -

Answer 1

Вы можете использовать querySelectorAll , чтобы получить все элементы с табличным индексом:

const elmntsWithTabindex = document.querySelectorAll('[tabindex]')

Это даст вам NodeList , который на самом деле не является массивом но при необходимости может быть преобразован в массив:

const arrayOfElmnts = Array.from(elmntsWithTabindex)

Однако вам не нужно преобразовывать его в массив, поскольку NodeLists уже поставляются с некоторыми полезными методами, такими как forEach () :

elmntsWithTabindex.forEach( elmnt => {
  // Do something with that one element
})