Question

所以这是一个有趣的，很可能无法有效地完成。但我有兴趣找到一种有效的方法来查询文档中具有任何属性的特定值集的所有html元素。所以，例如，而不是：

document.querySelectorAll('[attrName]');

我正在寻找以下伪代码的等价物：

document.querySelectorAll('[*=specificValue]');

所以基本上结果是所有具有任何属性的元素，其值与“specificValue”匹配。我知道有很多方法可以做到这一点，例如：

var all = document.querySelectorAll('*');
var matches = [];
var attrs;
for (var i = 0; i < all.length; i += 1) {
  attrs = Array.prototype.slice.call(all[i].attributes);
  for (var j = 0; j < attrs.length; j += 1) {
    if (attrs[j].value === 'specificValue') {
      matches.push(all[i]);
      break;
    }
  }
}

但是，我真的喜欢避免分析像这样的每一个html元素。有什么想法吗？

编辑：

感谢目前为止提供的所有帮助。在太多人给出替代建议之前，我应该解释一下这是什么。基本上，这是一个实验。我的想法是，我可能能够像Ember.js中那样创建实时的对象到数据绑定，但不必编译模板，您可以使用常规的html属性并在值本身中使用语法标记应该创建一个绑定。例如：<a href="{{linkLocation}}"></a>。我认为如果能够有效地选择相关元素，这可能会很有趣。显然我知道循环必须在某个地方发生。但是，如果浏览器正在运行本机迭代，我宁愿使用我自己的JavaScript循环。我只是不确定是否有一些我不知道的“秘密”选择器语法，或者是否有人能想到任何其他很酷的技巧。

Answer 1

此时我不会过分关注性能，而是关注代码效率。如果您不想使用任何jQuery，只使用vanilla JS，那么我只需将您的属性值存储在类名中。例如，如果您有以下HTML元素：

<div class="something" yo="1"></div>

我将整个属性和值放在类名称中，如

<div class="something yo1"></div>

然后你可以简单地使用已经内置的方法来选择具有上面指定的类名的每个元素。

var elems = document.getElementsByClassName("yo1");  //make sure to cache these selected elems in a variable. 

console.log(elems);

如果你想使用jQuery，事情会变得更容易，因为你只需按属性选择器选择元素，它就适用于所有浏览器。

http://api.jquery.com/attribute-equals-selector/

Answer 2

如果您不搜索它，则无法找到它。所以，基本上你需要遍历所有元素。

但是，您可以使用一些简单的逻辑来至少帮助您提高性能。

定义上下文

例如，你可能有一个非常长的HTML但在那里，你可能有一个DIV，只有在div的内部你可能有你的元素值“specificValue”。在这种情况下，您知道您要查找的内容仅位于此div中，并且只在其中搜索。

你仍然需要浏览所有元素，但这次不是在整个HTML中，而是在你期望值的DIV中。

因此，总结一下你是使用jQuery还是普通的javascript，你仍然需要经历所有的元素。解决方案是通过定义上下文并仅在其中搜索来缩小可搜索的“区域”..

E.g。

<html>
  <head>
    <title>some title</title>
  </head>
  <body>
  .
  .
  <div class="searchable">
   -- your elements that may have the value you will search
  </div>
  .
  .
  .
  <div class="searchable">
  -- your elements that may have the value again.
  </div>
  </body>
</html>

请注意 - 您必须再次遍历所有元素才能找到类名为“searchable”的div。使用jQuery $('.searchable')也可以做到这一点。但是你也可以为它定义一个上下文，并说$('.searchable', 'body')来缩小搜索范围..

如何按属性值而不是属性名查询元素

2 个答案: