Javascript 分组数据属性的querySelectorAll

假设我有以下标记

<div data-namespace-title="foo"></div>
<div data-namespace-description="bar"></div>
<div data-namespace-button="foo"></div>

我是否可以使用

查询选择器all

选择它们

---

我已经尝试了

document.querySelectorAll（[data namespace-*]）

，但是这不起作用。当然，没有简单的方法可以做到这一点，因为浏览器没有在属性名称/键（仅在其值上）上实现通配符选择器。您可以做的是简单地遍历元素集（在本例中，它们的公共分母是

div

），然后过滤掉它们

您可以通过调用

.attributes

来访问每个DOM节点的属性列表，然后将其转换为数组，并检查每个属性的

名称是否有一个或多个与regex模式
/^data namespace-.*/gi
匹配：


var els=document.querySelectorAll（“div”）；
var filteredEls=Array.prototype.slice.call（els）.filter（函数（el）{
var attributes=Array.prototype.slice.call（el.attributes）；
//确定属性是否与“数据命名空间-*”匹配
//一旦遇到第一个匹配的属性，我们就可以打破循环
对于（变量i=0；i
标题
描述
按钮
dummy
没有简单的方法可以做到这一点，因为浏览器没有在属性名称/键（仅在其值上）上实现通配符选择器。您可以做的是简单地遍历元素集（在本例中，它们的公共分母是
div
），然后过滤掉它们

您可以通过调用
.attributes
来访问每个DOM节点的属性列表，然后将其转换为数组，并检查每个属性的
名称是否有一个或多个与regex模式
/^data namespace-.*/gi
匹配：


var els=document.querySelectorAll（“div”）；
var filteredEls=Array.prototype.slice.call（els）.filter（函数（el）{
var attributes=Array.prototype.slice.call（el.attributes）；
//确定属性是否与“数据命名空间-*”匹配
//一旦遇到第一个匹配的属性，我们就可以打破循环
对于（变量i=0；i
标题
描述
按钮
dummy
这种东西没有内置的选择器，但是您仍然可以很容易地完成它，方法是选择所有元素，然后过滤那些具有以
数据名称空间开始的属性的元素：


console.log(
[…document.querySelectorAll（'*'）]
.filter（（{attributes}）=>
[…属性].some（（{name}）=>name.startsWith（'data-namespace'））
)
);
这样的事情没有内置的选择器，但是您仍然可以很容易地完成它，方法是选择所有元素，然后过滤那些具有以
数据名称空间开始的属性的元素：


console.log(
[…document.querySelectorAll（'*'）]
.filter（（{attributes}）=>
[…属性].some（（{name}）=>name.startsWith（'data-namespace'））
)
);
不确定您是否愿意更改属性的格式，但是如果您想使用
querySelectorAll


Array.from（document.querySelectorAll（'[data namespace]'））.forEach（el=>{
console.log（el.getAttribute（'data-value'））
})
不确定您是否愿意更改属性的格式，但是如果您想使用
querySelectorAll


Array.from（document.querySelectorAll（'[data namespace]'））.forEach（el=>{
console.log（el.getAttribute（'data-value'））
})

标记的副本特别要求jQuery。此问题专门询问
querySelectorAll
。标记的重复项专门询问jQuery。这个问题特别要求
querySelectorAll
。