一般性地选择所有数据属性元素

Question

我正在尝试选择所有具有以data-id-开头的data-id-属性的元素，就像使用以页面开头的类一样。

​

console.log(
 document.querySelectorAll("[class*=card]")
)

<div class="card-1">
<div class="card-2">

​

我想这样做，但数据属性除外。

Answer 1

最好的方法是指定data-id="{ID}"，然后您可以这样做

​

const elements = document.querySelectorAll("[data-id]");

console.log(elements)

<div data-id="1"></div>
<div data-id="2"></div>

​

选择data-id-1、data-id-2等将更加棘手，而且在较大的站点上大大增加了的资源消耗，因为您必须迭代每个元素，然后迭代它的所有吸引力，以找到您感兴趣的元素。

​

const filter = Array.prototype.filter;
const elements = document.querySelectorAll("*");

const filtered = filter.call(elements, element => {
    let ret = false;
    Array.from(element.attributes).forEach(key => {
        ret = !!key.localName.match(/data-id-\d+/gm);
    })
    return ret;
});

console.log(filtered);

<div data-id-1></div>
<div data-id-2></div>

​

如果您确信只有attr、data-id-1和data-id-2的元素，则可以将其简化为：

​

const elements = document.querySelectorAll("[data-id-1], [data-id-2]");

console.log(elements)

<div data-id-1></div>
<div data-id-2></div>

​

Answer 2

您可以选择所有元素，然后检查每个元素是否有一个dataset。

​

function getAllElementsWithData() {
  let allNodes = document.querySelectorAll('*');
  let allElements = Array.from(allNodes);

  let dataElements = allElements.filter((element) => {
    let hasDataset = Object.keys(element.dataset).length;
    return hasDataset;
  });

  return dataElements;
}

// ------- 

let dataElements = getAllElementsWithData();

console.log('Number of elements with data attribute:', dataElements.length)

for (const element of dataElements) {
  console.log(element.dataset);
}

<div class="card-1">
<div class="card-2">
<div data-id="1"></div>
<div data-greeting="hello"></div>
<div data-user="world"></div>

​

如果您想要根据“数据-id-*”进行选择，请编辑。

我使该方法更加动态，因此您可以添加一个参数，它接受数据属性应该使用的内容，或者您可以跳过该参数，只需获得所有具有数据属性的元素。

​

function getAllElementsWithData(startsWith) {
  let allNodes = document.querySelectorAll('*');
  let allElements = Array.from(allNodes);

  let dataElements = allElements.filter((element) => {

    for (const dataIdKey in element.dataset) {
      if (!startsWith || dataIdKey.startsWith(startsWith)) {
        return true
      }
    }

    return false;
  });

  return dataElements;
}

// ------- 

let dataElements = getAllElementsWithData('id');

console.log('Number of data elements:', dataElements.length)

for (const element of dataElements) {
  console.log(element.dataset);
}

<div class="card-1">
<div class="card-2">
<div data-id-something="1"></div>
<div data-id-something-else="2"></div>
<div data-greeting="hello"></div>
<div data-user="world"></div>

​

Answer 3

无法使用querySelectorAll选择带有data-*属性的所有元素，但是如果您知道数据属性的显式名称，比如" data -id"，您可以这样选择它：

document.querySelectorAll("[data-id]");

<div data-id="1"></div>
<div data-id="2"></div>
<div data-id="3"></div>