原生 JavaScript 如何实现通过自定义属性定位/筛选节点
这是一个小问题，但是我查资料的过程比想象的漫长，所以把问题写出来，希望可以帮到需要的人。寻找解决办法的可以直接看解决办法，最后的解决过程是一些额外的东西。
问题描述
在 jQuery 中有这样的用法：var $ele = $("*[data_name=aa]");
目的是匹配所有节点（* 的作用）中 data 属性为 aa 的节点（[data=aa]的作用）。
例如这样的标签：<div data_name="aa"></div>
那么如果要用原生的 JavaScript 实现该怎么办呢？
解决办法
下面是我目前在 StackOverflow 上看到的解决办法，可能不完全，欢迎补充。
1. querySelectorAll
var ele = document.querySelectorAll('[data_name="aa"]')
此时返回的是一个 NodeList 对象（我觉得它类似数组，在 console 里输出时是这样） ，也就是说当页面中存在多个 data_name 的属性值为 aa 时，都能匹配返回。
参考 Wojtek Kruszewski 的答案
MDN文档
2. 自己写方法
function selector(attribute, value) {
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++) {
if (all[i].getAttribute(attribute) == value) {
return all[i];
}
} }
参考 tazo todua 的答案
这个方法的返回值是一个 data_name 的属性值为 aa的节点。在 Chrome 中运行 alert 此返回值时，得到的是[object HTMLDivElement]。
但注意这种方法有个缺陷，就是只能返回第一个节点，因为成功匹配第一个节点的时候，就结束并返回节点了。若要实现 querySelectorAll 的效果，则还需要对它进行改进。
解决过程
由于我对 jQuery 并不熟悉，可能因此导致我搜索的时候花的时间比较长。所以写一下我的搜索过程，可能会有启发。
我先后搜索的关键词是这样变化的，一开始根本不知道该用什么词去描述这个问题，到最后才定位准确。
关键词变化路径
- 原生 JavaScript 定位 属性 标签
- 原生 JavaScript 根据 属性
- JavaScript 根据 属性 标签
- JavaScript 根据 属性 节点
- JavaScript 根据 自定义 属性 节点
- JavaScript 自定义 属性 节点
- jquery 选择器 属性 自定义
- jquery 选择器 属性 自定义 源码
- jquery selector 属性 自定义 源码
在这里我企图去查看 jQuery 的源码来看它是怎么实现的（未遂），查到 jQuery 的选择器是使用 Sizzle 引擎这一层就又转换关键词了。
- JavaScript 自定义 属性 筛选 DOM
- JavaScript 自定义 属性 筛选 节点
- JavaScript 自定义 属性 查找 节点
- jQuery 选择器 原生 JavaScript
- jQuery 选择器 原生 JavaScript 自定义 属性
- 选择器 原生 JavaScript 自定义 属性
在这里我知道了 jQuery 里用属性筛选元素的用法叫做“属性过滤选择器”，于是：
- 原生 JavaScript 属性过滤选择器
- 源码 属性过滤选择器
- 属性过滤选择器 原生
- 属性过滤 选择器 原生 JavaScript
最后不得已试了试英文……一招定位到了 StackOverflow 。
- find element pure javascript attribute
最后记录一下上面这一些不靠谱的关键词得到的一些不错的东西：
http://youmightnotneedjquery.com/ —— 列举了一些可以用原生 JavaScript 替代 jQuery 的代码
sizzle.js 源码
Sizzle 文档
jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——词法解析
总结
根据我这次的搜索过程，下次遇到问题的时候首选英文搜索是比较靠谱的办法，这样做的好处有：
- StackOverflow 是以问题为驱动的，所以采用描述性的词也容易定位。
- 专业词汇的问题，有时对一些词汇存在盲点，往往不知道自己的问题如何表述，这时 StackOverflow 的优势就出来了。
