写写原生JavaScript系列(1)-使用CSS选择器选择元素

PS:基础决定一个人是否能够在技术路线上走的更远,不积跬步,无以至千里,越来越多的公司看中员工技术基础。那么我们在享受jQuery极大便利的时候,也需要记得返璞归真看看原生的JavaScript 能给我带来些什么,有些时候是有好处的例如移动端可以减少额外的库的加载。偶然发现 plainjs.com 的一系列文章,感觉非常不错,跟着学习的同时搬运到博客,不足之处还望指正。

querySelectorAll() 是一个原生javascript (需要注意兼容性)提供的一个类似jquery选择器的方法。

querySelectorAll() 方法根据你传入的选择字符串返回一组匹配的DOM元素列表。
如果你使用过JQuery操作过DOM元素,你可能对下面的写法不会感到意外:

var matches = document.querySelectorAll('div.foo');

for (i=0; i<matches.length; i++)
    console.log(matches[i].innerHTML);

在这个例子中,我获取到一组以class 为"foo"的div标签构成的DOM元素列表,如果恰好没有匹配到任何元素,就会返回一个空的元素列表。这个方法支持CSS 写法的选择器,类似于jquery $(...)写法。但是需要注意就是在跨浏览器上不是很好,因此只有现代浏览器完美支持,IE8只有CSS2.1的选择器被支持,并且IE8在HTML5的标签处理上有些坑。放几个列子:

// 选择所有的DIV元素以及带有info的a标签
var matches = document.querySelectorAll("div, a.info");

// 选择所有的input单行输入框
var matches = document.querySelectorAll("input[type='text']");

所以你看到了这个方法的好处了吧,因为可以不必依赖jQuery选择器,所以更快,并且没有额外的库引进来。另外,也可以用下面这种更快的获取到元素列表中第一个元素:

var match = document.querySelector('div.foo');

// 下面写法和上面写法效果一致
var match = document.querySelectorAll('div.foo')[0];

定义一个减少敲代码的方法吧

querySelectorAll()和 querySelector() 确实很好,但是呢需要多打几个字,我们来定义一个 helper方法

// 根据传入的当前执行环境,然后执行querySelectorAll查找
function $(selector, context) {
    return (context || document).querySelectorAll(selector);
}

// 根据传入的当前执行环境,查询第一个匹配到的元素
function $1(selector, context) {
    return (context || document).querySelector(selector);
}
// 使用之

// 找出所有的"foo"类 下面的 "bar"类
var matches = $('.foo .bar');

// 传入执行环境的例子
var container = $1('.foo');
// 先找到了".foo" 再继续查找
var matches = $('.bar', container);

这样简单的几下,就可以用$("..")但是不用引入jQuery查询出你想要的元素,并且就像你自己使用jQuery 一样,你还可以传入一个现成的DOM元素。但是jQuery 文档提供了完整的选择器API,这里需要注意的就是,jQuery 拓展了一系列选择器语法,但是不在CSS规范中,因此我们用querySelectorAll()也无法实现,但是如果不是很多特别的环境下,还是够用了。

版权声明

文章著作权归原作者所有,转载请注明出处。

翻译by

少个分号 http://www.printf.cn

原文地址

https://plainjs.com/javascript/selecting/select-dom-elements-by-css-selectors-4/