重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在规范中定义了如下接口：
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
获取页面I属性D为test的元素：
- document.getElementById("test");
- //or
- document.querySelector("#test");
- document.querySelectorAll("#test")[0];
获取页面class属性为”red”的元素:
- document.getElementsByClassName('red')
- //or
- document.querySelector('.red')
- //or
- document.querySelectorAll('.red')
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：
<!DOCTYPE html>
<html>
<head>
<title>querySelector,querySelectorAll</title>
<meta charset="utf-8">
<script src="http://r.aicaicdn.com/js/public/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="test1">
<span>设计蜂巢1</span>
<span>设计蜂巢2</span>
<span>设计蜂巢3</span>
</div>
<p id="bar"></p>
</body>
</html> <script>
var d1 = document.getElementById('test1'),
obj1 = d1.querySelector('span'),
obj2 = d1.querySelectorAll('span');
obj3 = $("#test1").find('span');
console.log(obj1)//返回一个对象，如<span>设计蜂巢1</span>
console.log(obj2);//返回一个集合或数组，如[span, span, span]
console.log(obj2.length)//
console.log(obj3)//[span, span, span, prevObject: b.fn.b.init[1], context: document, selector: "#test1 span"]
</script>
重要选择器querySelector和querySelectorAll的更多相关文章
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javascript高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- HTML5中类jQuery选择器querySelector和querySelectorAll的使用
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...
随机推荐
- Spring MVC全局异常处理与拦截器校检
在使用Spring MVC进行开发时,总是要对系统异常和用户的异常行为进行处理,以提供给用户友好的提示,也可以提高系统的安全性. 拦截系统响应错误 首先是拦截系统响应错误,这个可以在web.xml中配 ...
- Android注解编程的第一步---模仿ButterKnife的ViewBinder机制
ButterKnife的使用极大方便了Android程序员的开发,实际上,我们可以自己模仿一下实现. 首先就是要了解Java注解的使用. 我们首先要声明一个@interface,也就是注解类: @Ta ...
- ActiveMQ学习（一）——MQ的基本概念
1) 队列管理器 队列管理器是MQ系统中最上层的一个概念,由它为我们提供基于队列的消息服务. 2) 消息 在MQ中,我们把应用程序交由MQ传输的数据定义为消息,我们可以定义消息的内容并对消息进行广义的 ...
- [Solution] 1分钟使用log4net
log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具 官网:http://logging.a ...
- Winform开发框架之字典管理模块的更新，附上最新2013年全国最新县及县以上行政区划代码sql脚本
在很多项目里面,字典管理是必备的项目模块,而这个又是比较通用的功能,因此可以单独做成一个通用字典管理,例如这个模块,可以通过集成的方式,使用在我的<Winform开发框架>.<WCF ...
- 用C#编程的建议
1．如果可能尽量使用接口来编程 .NET框架包括类和接口,在编写程序的时候,你可能知道正在用.NET的哪个类.然而,在这种情况下如果你用.NET支持的接口而不是它的类来编程时,代码会变得更 ...
- C#开发规范总结（个人建议）
.NET开发编程规范 章程序的版式 版式虽然不会影响程序的功能,但会影响可读性.程序的版式追求清晰.美观,是程序风格的重要构成因素. 可以把程序的版式比喻为"书法".好的" ...
- Jquery Validation 多按钮，多表单，分组验证
真正做到了 多按钮的验证. 在用户输入的时候就可以验证,而网上大部分多按钮验证都是必须要用户点击按钮后才可以验证. 研究了两天终于弄出来了,不知道两天是过长还是过段,现在分享给小伙伴们. 小伙伴们支持 ...
- csharp: Export DataSet into Excel and import all the Excel sheets to DataSet
/// <summary> /// Export DataSet into Excel /// </summary> /// <param name="send ...
- [PE结构分析] 11.资源表结构
资源表是一个树形结构,可以设置成2的31次方的层数,Windows 使用了3级: 类型->名称->语言 其中涉及到四个结构: Data Description Resource Direc ...