时间戳

首页 > 解决方案 > 一般选择所有数据属性元素

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

问题描述

我正在尝试选择具有以data开头的属性的所有元素，data-id-就像我对以 page 开头的类一样

console.log(
 document.querySelectorAll("[class*=card]")
)
<div class="card-1">
<div class="card-2">

我想这样做，但对于数据属性

标签： javascripthtmldom

解决方案

您可以选择所有元素，然后检查每个元素是否具有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>

[编辑] 如果要根据“data-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>

推荐阅读