这是一个小问题,但是我查资料的过程比想象的漫长,所以把问题写出来,希望可以帮到需要的人。寻找解决办法的可以直接看解决办法,最后的解决过程是一些额外的东西。
问题描述
在 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 的优势就出来了。