时间戳

首页 > 解决方案 > 我可以选择一个通过模式匹配 data-* 属性名称（不是属性值）？

javascript - 我可以选择一个通过模式匹配 data-* 属性名称（不是属性值）？

问题描述

我正在使用 javascript 在页面加载时处理 DOM 属性。

我有包含data-*属性的元素的标记：

<section>
<h2 data-fruit-apples="sdlfls">Heading</h2>
<p data-vegetables-carrots="sdjjasd">Paragraph</p>
<ul>
<li data-fruit-cherries="sdfada" data-fruit-bananas="adada">List Item</li>
<li>List Item</li>
</ul>
<p data-fruit-pears="rtfadds">Paragraph</p>
<p>Paragraph</p>
</section>

我想处理所有data-fruit-*属性。

但是我怎样才能选择所有data-*属性以开头的元素data-fruit呢？

我知道我可以使用^=模式匹配data-*属性值的开头。

有什么我可以用来模式匹配data-*属性名称的开头的吗？

我的尝试是这样的：

// Set up variables
const mySection = document.getElementsByTagName('section')[0];
let allDataElements = [];
let nonFruitDataElements = [];

// Build allDataElements
[... mySection.querySelectorAll('*')].forEach((element) => {

  if (Object.keys(element.dataset).length > 0) {

    allDataElements.push(...(Object.keys(element.dataset)));
  }

});

// Build nonFruitDataElements
allDataElements.forEach((element) => {

  if (element.substr(0, 5) !== 'fruit') {

    nonFruitDataElements.push(element);

  }

});

// Subtract nonFruitDataElements from allDataElements
fruitDataElements = allDataElements.filter(x => !nonFruitDataElements.includes(x));

// Log fruitDataElements
console.log(fruitDataElements);
<section>
<h2 data-fruit-apples="sdlfls">Heading</h2>
<p data-vegetables-carrots="sdjjasd">Paragraph</p>
<ul>
<li data-fruit-cherries="sdfada" data-fruit-bananas="adada">List Item</li>
<li>List Item</li>
</ul>
<p data-fruit-pears="rtfadds">Paragraph</p>
<p>Paragraph</p>
</section>

但这似乎真的很啰嗦。

标签： javascripthtmlcss

解决方案

获取所有元素，传播到一个数组，通过获取所有数据集键来过滤它们，并检查其中一些是否以您正在寻找的键开头。

注意：例如，dataKey需要是驼峰式字符串“fruitApples”。

const getElementsByDataAttr = dataKey =>
  [...document.querySelectorAll('*')]
  .filter(el => 
    Object.keys(el.dataset)
    .some(k => k.startsWith(dataKey))
  )
  
const result = getElementsByDataAttr('fruit')

console.log(result)
<section>
  <h2 data-fruit-apples="sdlfls">Heading</h2>
  <p data-vegetables-carrots="sdjjasd">Paragraph</p>
  <ul>
    <li data-fruit-cherries="sdfada" data-fruit-bananas="adada">List Item</li>
    <li>List Item</li>
  </ul>
  <p data-fruit-pears="rtfadds">Paragraph</p>
  <p>Paragraph</p>
</section>

推荐阅读