查找具有与模式匹配的属性的元素

Question

如何查找具有与模式匹配的属性的所有元素data-foo-bar-*,例如

<div data-foo-bar-id="" />

使用document.querySelectorAllwith foo-bar-*pattern会出错:

未捕获的SyntaxError:无法在'Document'上执行'querySelectorAll':'[data-foo-bar-*]'不是有效的选择器.

Answer 1

也许迭代所有 DOM 元素并查找这个特定属性可能不是最好的方法，但这是我的尝试：

function querySelectorPattern(regex, element) {
  var elements = document.getElementsByTagName(element),
    found,
    regexp = new RegExp(regex);
  for (var i = 0; i < elements.length; i++) {
    var attributes = elements[i].attributes;
    for (var k = 0; k < attributes.length; k++) {
      if(regexp.test(attributes[k].nodeName)) {
        console.log(elements[i]);
      }
    }
  }
}

还有一个快速演示： https: //jsfiddle.net/1rsngvy8/