querySelector，获取属性以给定字符串开头的元素 [英] querySelector, get elements whose attribute begins with given string

问题描述

我正在寻找一种方法来查找包含以给定字符串开头的属性的所有元素。例如：

document.querySelectorAll（'[ng - *]'）将使用Angular指令返回所有元素（ ng-click ， ng-show ， ng-hide ...）。

但通配符似乎不起作用。

任何想法？我可以实现自己的，但它不会那么有效。

解决方案

没有CSS选择器可以让你做通配符一个属性的名称，就在这个值上，这显然不是你想要的。

不幸的是，你必须做手动执行。

如果您知道要处理的列表将很小，您可以使用一个天真的版本query-then-filter来实现;如果你认为它可能会更大，那么DOM walker解决方案（见下文）可能会更好。

初始的查询过滤器（ES2015语法）：

  //最好如果你可以在querySelectorAll中使用*一些*选择器，而不只是* //将列表保留为minimumlet elements = [... document.querySelectorAll（*）]。filter（element => [... element.attributes] .some（attr => attr.nodeName .startsWith（ng-）））; console.log（elements）;  

 < div>< / div>< divng-bar>< / div>< div>< / div>< divng-foo>< / div>< div>< / div>  

ES5版本： >

  var elements = Array.prototype.filter.call（document.querySelectorAll（*），//最好，如果你可以使用* something *这里//将列表保持为最小的函数（element）{return Array.prototype.some.call （element.attributes，function（attr）{return attr.nodeName.startsWith（ng-）; }）; }）; console.log（elements）;  

  div>< / div>< divng-bar>< / div>< div>< / div>< divng-foo>< / div>< div>< / div> / code> 

---

Walker解决方案数据-asp =truedata-babel =truedata-hide =falsedata-console =truedata-babel = false>

  function domFind（element，predicate，results = []） {if（！element.children）{throw new Error（Starting node must be a element or document）; } if（predicate（element））{results.push（element）; } if（element.children&& element.children.length）{[... element.children] .forEach（child => {domFind（child，predicate，results）;}）; } return elements;} let elements = domFind（document，element => {return element.attributes&&... [... element.attributes] .some（attr => attr.nodeName.startsWith（ng- ））;}）; console.log（elements）;  

 < div>< / div>< divng-bar>< / div>< div>< / div>< div> < DIV> < divng-foo>< / div> < / DIV> < divng-baz>< / div>< / div>< div>< / div>  

p>



ES5：

 函数domFind（element，predicate，results）{if（！results）{results = []; } if（！element.children）{throw new Error（Starting node must be a element or document）; } if（predicate（element））{results.push（element）; } if（element.children&& element.children.length）{Array.prototype.forEach.call（element.children，function（child）{domFind（child，predicate，results）;}）; } return elements;} var elements = domFind（document，function（element）{return element.attributes&&& Array.prototype.some.call（element.attributes，function（attr）{return attr.nodeName.startsWith（ ng-）;}）;}）; console.log（elements）;  

 < div>< / div>< divng-bar>< / div>< div>< / div>< div> < DIV> < divng-foo>< / div> < / DIV> < divng-baz>< / div>< / div>< div>< / div>  

p>

---

对于上述所有内容，请注意 String＃startsWith 可能需要ES2015之前的垫片。

I'm looking for a way to find all elements that contain an attribute that begins witha a given string. For example:

document.querySelectorAll('[ng-*]') would return all elements with Angular directives (ng-click, ng-show, ng-hide...).

But the wildcard does not seem to work.

Any ideas? I could implement my own, but it wouldn't be as effective.

解决方案

There's no CSS selector that lets you do wildcards on the name of an attribute, just on the value, which obviously isn't want you want.

Unfortunately, you'll have to do the work manually.

If you know the list you'll be processing will be small, you can do it with a naive version query-then-filter; if you think it may be larger, a DOM walker solution (see below) would probably be better.

The naive query-then-filter (ES2015 syntax):

// Best if you can use *some* selector in the querySelectorAll rather than just *
// to keep the list to a minimum
let elements =
  [...document.querySelectorAll("*")].filter(
    element => [...element.attributes].some(
      attr => attr.nodeName.startsWith("ng-")
    )
  );
console.log(elements);

<div></div>
<div ng-bar></div>
<div></div>
<div ng-foo></div>
<div></div>

ES5 version:

var elements = Array.prototype.filter.call(
  document.querySelectorAll("*"), // Best if you can use *something* here
                                  // to keep the list to a minimum
  function(element) {
    return Array.prototype.some.call(
      element.attributes,
      function(attr) {
        return attr.nodeName.startsWith("ng-");
      }
    );
  }
);
console.log(elements);

<div></div>
<div ng-bar></div>
<div></div>
<div ng-foo></div>
<div></div>

---

Walker solution (ES2015+):

function domFind(element, predicate, results = []) {
  if (!element.children) {
    throw new Error("Starting node must be an element or document");
  }
  if (predicate(element)) {
    results.push(element);
  }
  if (element.children && element.children.length) {
    [...element.children].forEach(child => {
      domFind(child, predicate, results);
    });
  }
  return results;
}
let elements = domFind(document, element => {
  return element.attributes && [...element.attributes].some(attr => attr.nodeName.startsWith("ng-"));
});
console.log(elements);

<div></div>
<div ng-bar></div>
<div></div>
<div>
  <div>
    <div ng-foo></div>
  </div>
  <div ng-baz></div>
</div>
<div></div>

ES5:

function domFind(element, predicate, results) {
  if (!results) {
    results = [];
  }
  if (!element.children) {
    throw new Error("Starting node must be an element or document");
  }
  if (predicate(element)) {
    results.push(element);
  }
  if (element.children && element.children.length) {
    Array.prototype.forEach.call(element.children, function(child) {
      domFind(child, predicate, results);
    });
  }
  return results;
}
var elements = domFind(document, function(element) {
  return element.attributes && Array.prototype.some.call(element.attributes, function(attr) {
    return attr.nodeName.startsWith("ng-");
  });
});
console.log(elements);

<div></div>
<div ng-bar></div>
<div></div>
<div>
  <div>
    <div ng-foo></div>
  </div>
  <div ng-baz></div>
</div>
<div></div>

---

For all of the above, note that String#startsWith may need a shim prior to ES2015.

这篇关于querySelector，获取属性以给定字符串开头的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！