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

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

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

Могу ли я избежать использования data-number="value" параметра to или получить атрибут в 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 .

1. Я добавил консоль. журнал длины NodeList и он правильно выводит 3 для меня в Chrome.

2. Фрагмент кода отображается 3, я использую Opera.

3. Это правильный способ, и для этого используется стандартный код. Я не могу себе представить, что какой-либо клиент, созданный за последние 6 лет, не обработал бы это правильно.

Ответ №1:

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

Метод, который вы используете, работает:

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

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

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

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

Это вернет ваш список узлов:

 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)
    )
})