首页 > 编程笔记 > JavaScript笔记 > JS DOM
阅读:55
JS中的CSS选择器
在 2008 年以前,浏览器中大部分 DOM 扩展都是专有的。此后,W3C 将一些已经成为事实标准的专有扩展标准化并写入规范中。Selectors API 就是由 W3C 发布的一个事实标准,为浏览器实现原生的 CSS 选择器。
Selectors API Level 1(http://www.w3.org/TR/selectors-api/)的核心是两个方法:querySelector() 和 querySelectorAll(),在兼容浏览器中可以通过文档节点或元素节点调用。目前已完全支持 Selectors API Level 1 的浏览器有 IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。
Selectors API Level 2(http://www.w3.org/TR/selectors-api2/)规范为元素增加了 matchesSelector() 方法,这个方法接收一个 CSS 选择符参数,如果调用的元素与该选择符匹配,则返回 true;否则返回 false。目前,浏览器对其的支持不是很完善。
querySelector() 和 querySelectorAll() 方法的参数必须是符合 CSS 选择符语法规则的字符串,其中 querySelector() 返回一个匹配元素,querySelectorAll() 返回一个匹配集合。
DOM API 模块也包含 getElementsByClassName() 方法,使用该方法可以获取指定类名的元素。例如:
getElementsByClassName() 方法只能接收字符串,且为类名,而不需要加点号前缀,如果没有匹配到任何元素则返回空数组。
CSS 选择器是一个便捷的确定元素的方法,这是因为大家对 CSS 已经很熟悉了。当需要联合查询时,使用 querySelectorAll() 更加便利。
Selectors API Level 1(http://www.w3.org/TR/selectors-api/)的核心是两个方法:querySelector() 和 querySelectorAll(),在兼容浏览器中可以通过文档节点或元素节点调用。目前已完全支持 Selectors API Level 1 的浏览器有 IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。
Selectors API Level 2(http://www.w3.org/TR/selectors-api2/)规范为元素增加了 matchesSelector() 方法,这个方法接收一个 CSS 选择符参数,如果调用的元素与该选择符匹配,则返回 true;否则返回 false。目前,浏览器对其的支持不是很完善。
querySelector() 和 querySelectorAll() 方法的参数必须是符合 CSS 选择符语法规则的字符串,其中 querySelector() 返回一个匹配元素,querySelectorAll() 返回一个匹配集合。
示例1
新建网页文档,输入下面的 HTML 结构代码。<div class="content"> <ul> <li class="red">财经</li> <li class="blue">娱乐</li> <li class="red">时尚</li> <li class="blue">互联网</li> </ul> </div>如果要获得第 1 个 li 元素,可以使用以下方法。
document.querySelector(".content ul li");如果要获得所有 li 元素,可以使用以下方法。
document.querySelectorAll(".content ul li");如果要获得所有 class 为 red 的 li 元素,可以使用以下方法。
document.querySelectorAll("li.red");
DOM API 模块也包含 getElementsByClassName() 方法,使用该方法可以获取指定类名的元素。例如:
document.getElementsByClassName("red");
getElementsByClassName() 方法只能接收字符串,且为类名,而不需要加点号前缀,如果没有匹配到任何元素则返回空数组。
CSS 选择器是一个便捷的确定元素的方法,这是因为大家对 CSS 已经很熟悉了。当需要联合查询时,使用 querySelectorAll() 更加便利。
示例2
在文档中一些 li 元素的 class 名称是 red,另一些 class 名称是 blue,可以用 querySelectorAll() 方法一次性获得这两类节点。var lis = document.querySelectorAll("li.red, li.blue");如果不使用 querySelectorAll() 方法,那么要获得同样的列表,需要选择所有的 li 元素,然后通过迭代操作过滤出那些不需要的项目列表。
var result = [], lis1 = document.getElementsByTagName('li'), classname=''; for (var i = 0; len = lis1.length; i < len; i ++) { classname = lis1[i].className; if (classname === 'red' || classname === 'blue') { result.push (lis1[i]); } }比较上面两种不同的用法,使用选择器 querySelectorAll() 方法比使用 getElementsByClassName() 方法的性能要快得多。因此,如果浏览器支持 document.querySelectorAll(),那么最好使用它。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频