如何从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]')

我可以避免使用data-number =“value”来设置或获取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。

要记住的另一件事是当代码执行时，为了避免在构造DOM之前执行JavaScript，请确保将代码包装在DOMContentLoaded侦听器中，如下所示：

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