JS中的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() 返回一个匹配集合。
新建网页文档,输入下面的 HTML 结构代码。
div >如果要获得第 1 个 li 元素,可以使用以下方法。
document.querySelector( .content ul li如果要获得所有 li 元素,可以使用以下方法。
document.querySelectorAll( .content ul li如果要获得所有 class 为 red 的 li 元素,可以使用以下方法。
document.querySelectorAll( li.redDOM API 模块也包含 getElementsByClassName() 方法,使用该方法可以获取指定类名的元素。例如:
document.getElementsByClassName( redgetElementsByClassName() 方法只能接收字符串,且为类名,而不需要加点号前缀,如果没有匹配到任何元素则返回空数组。
CSS 选择器是一个便捷的确定元素的方法,这是因为大家对 CSS 已经很熟悉了。当需要联合查询时,使用 querySelectorAll() 更加便利。
在文档中一些 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(),那么最好使用它。
23240.html
CSShtmljavaJavaScript
相关文章
- yui compressor php,通过yuicompressor-2.4.7压缩css或js的php应用文件
- css+js 实现一行多个盒子块元素响应式布局
- 第2章 WEB02-CSS&JS篇-视频教程-第一部分
- 这些js原型及原型链面试题你能做对几道
- 【尚硅谷】JavaScript基础&实战丨JS入门到精通_01-06
- js中四舍五入的方法_JS取整
- JS对象转数组_js怎么把数组转成对象
- 如何在vue组件中引入外部的css和js文件[通俗易懂]
- 前端js手写面试题看这篇就够了
- JS如何返回异步调用的结果?
- Nginx access日志过滤css,jpg,js等日志记录
- Vue.js 中异常高效可用的 .sync 修饰符
- js基础笔记详解编程语言
- JS二维数组的定义和使用
- JS cloneNode()复制节点
- 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
- CSS规则层叠的应用css必须要注意的几点
- CSS教程之css选择器、属性、值
- 自己的js工具_Form封装
- JS+CSS实现的一种交互体验表单页面
- js实现css风格选择器(压缩后2KB)
- js读写(删除)Cookie实例详解
- js控制不同的时间段显示不同的css样式的实例代码
- JS批量操作CSS属性详细解析
- js中function()使用方法
- Asp.net后台添加CSS、JS、Meta标签的方法
- css结合js制作下拉菜单示例代码
- 实现js保留小数点后N位的代码
- node.js中的fs.fchown方法使用说明
- js中实现多态采用和继承类似的方法