重要选择器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 ...
随机推荐
- linux shell 流程控制（条件if,循环【for,while】,选择【case】语句实例 --转载
http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html nux shell有一套自己的流程控制语句,其中包括条件语句(if),循环 ...
- iOS-UIView-设置背景图片4种方式
一 . 设置UIView的背景图片 1.将图片作为UIView的背景色,该方法过于占内存,不建议使用. //1.imageNamed方式 self.view.backgroundColor = ...
- 前端翻译：Promises/A+规范
原文地址:https://promisesaplus.com/ 本篇为原文翻译+个人理解,若有谬误请各位指正,谢谢. 尊重原创,转载请注明来自:http://www.cnblogs.com/fsjoh ...
- 使用Spark分析拉勾网招聘信息(二): 获取数据
要获取什么样的数据? 我们要获取的数据,是指那些公开的,可以轻易地获取地数据.如果你有完整的数据集,肯定是极好的,但一般都很难通过还算正当的方式轻易获取.单就本系列文章要研究的实时招聘信息来讲,能获取 ...
- sprint 1 总结
1.之前已经总结了一下了.. 提前完成了任务,明天还要继续测试一下,看有没有BUG.这次搭建,遇到好多问题,服务器经常不稳定崩毁,毕竟免费...不能完美..途中经常小细节没注意,导致错误连连,卡了好几 ...
- WampServer 给电脑搭建apache服务器和php环境
WampServer 给电脑搭建apache服务器和php环境 前端不仅要做页面展示层,还负责着数据交互的部分,不要等到后端人员做好工作了前端才开始对接,那样太被动了. 前端在完成静态页面的编码后,就 ...
- 概率论 --- Uva 11181 Probability|Given
Uva 11181 Probability|Given Problem's Link: http://acm.hust.edu.cn/vjudge/problem/viewProblem.acti ...
- VC包含目录、附加依赖项、库目录及具体设置
包含目录:#include <headerfile.h>中headerfile.h的搜索目录.如果有XXX.h找不到,设置这个目录可以解决. 附加依赖项:C++的库会把函数.类的声明放在* ...
- P6 EPPM R16.1安装与配置指南(一)
标题 http://www.cnblogs.com/endv/p/5634620.html 安装与配置指南安装与配置指南(数据库)说明哪些How to set up the P6专业数据库和服务器.a ...
- 【.NET框架】Dapper ORM 用法—Net下无敌的ORM
假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上Dapper这款ROM.点击下载 Dapper的优势: 1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编 ...