Как выбрать атрибут данных из JavaScript

Question

Как выбрать атрибут без значения?

Можно ли избежать использования data-number="value" для установки или получения атрибута в JavaScript?

const numberButtons = document.querySelectorAll('[data-number]')
console.log(numberButtons.length)

<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>

Я хочу получить NodeList.Таким образом, numberButtons возвращает пустое значение NodeList.

Answer 1

Как выбрать атрибут без значения?

Используемый метод работает:

document.querySelectorAll('[data-number]')

Можно ли избежать использования данных?число = "значение" для установки или получения атрибута в JavaScript?

Да.Чтобы получить доступ к значению атрибута data- из узла, используйте dataset.

Я хочу получить NodeList.Таким образом, numberButtons возвращает пустой NodeList.

Это вернет ваш NodeList:

console.log(numberButtons)

---

Чтобы раскрыть, как читаются атрибуты data-:

const numberButtons = document.querySelectorAll('[data-number]')
console.log(numberButtons.length)
console.log(
  [...numberButtons].map(i => i.dataset.number)
)

<button data-number="1">1</button>
<button data-number="2">2</button>
<button data-number="3">3</button>

Обратите внимание, что dataset содержит объект, где любые атрибуты совпадают с camelCased версией того, что вы назвали атрибутом, поэтомуdata-number становится dataset.number, а data-super-number становится dataset.superNumber.

Еще одна вещь, которую нужно иметь в виду, это когда ваш код выполняется, чтобы избежать выполнения JavaScript до создания DOM, убедитесь, чтообернуть ваш код в DOMContentLoaded слушатель, вот так:

document.addEventListener('DOMContentLoaded', () => {
    const numberButtons = document.querySelectorAll('[data-number]')
    console.log(numberButtons.length)
    console.log(
      [...numberButtons].map(i => i.dataset.number)
    )
})