选择符API的推出显著提升了JavaScript代码的查询效率。如今,主流浏览器如IE8及以上版本、Chrome等均支持该API。以下将介绍选择器的几个核心方法及其基本应用。
1、 querySelector() 是选择器API的核心方法之一,可传入一个CSS选择符进行查找,若页面中存在匹配元素则返回该元素,否则返回null。
2、 例如获取文档中的head元素。
3、 可通过元素ID进行查询选择,例如查找ID为hehe的元素,在ID前加上符号即可,所示。
4、 选取包含.select类的元素,所示。
5、 querySelectAll() 方法返回一个 NodeList 实例作为结果,例如:
6、 该方法是在API 2.0中新增的,用于判断元素是否与指定的选择器匹配,返回值为布尔类型,匹配时返回true,否则返回false。需要注意的是,不同浏览器对该方法的实现存在前缀差异:IE浏览器使用msMatchesSelector(),火狐浏览器使用mozMatchesSelector(),而谷歌浏览器则采用webkitMatchesSelector()。由于现代浏览器已逐步统一标准,现多使用无前缀的matches()方法。下文将以谷歌浏览器的开发者工具为例进行演示操作,展示其具体用法和效果。
