重要选择器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 ...
随机推荐
- Node.app – 用于 iOS App 开发的 Node.js 解释器
Node.app 是用于 iOS 开发的 Node.js 解释器,它允许最大的代码重用和快速创新,占用资源很少,为您的移动应用程序提供 Node.js 兼容的 JavaScript API.你的客户甚 ...
- 如何拿到国内IT巨头的Offer
感觉写的很真实,分享一下.原文链接:http://jingyan.baidu.com/article/72ee561aa16d23e16138df3d.html 不久前,byvoid面阿里星计划的面试 ...
- java高级---->Java动态代理的原理
Java动态代理机制的出现,使得 Java 开发人员不用手工编写代理类,只要简单地指定一组接口及委托类对象,便能动态地获得代理类.代理类会负责将所有的方法调用分派到委托对象上反射执行,在分派执行的过程 ...
- IT人的自我导向型学习：学习的1个理念和2个心态
本文更新版本已挪至 http://www.zhoujingen.cn/blog/2484.html ----------------------------- 写这一个系列之前,我定位是与高效学习有 ...
- Eclipse启动报错：A java runtime Environment(JRE) or java Development……的解决办法
第一种: 解决方法: 系统变量里设置下面: 变量名:JAVA_HOME 变量值:D:\Java\jdk1.8.0_31 变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib; 变量名 ...
- 搜索 --- 数独求解 POJ 2676 Sudoku
Sudoku Problem's Link: http://poj.org/problem?id=2676 Mean: 略 analyse: 记录所有空位置,判断当前空位置是否可以填某个数,然后直 ...
- AEAI ESB V3.5.4开源发布，应用集成平台
AEAI ESB 应用集成平台为数通畅联的核心产品,本着分享传递的理念,数通畅联将ESB管理控制台项目开源,目的在于满足客户与伙伴的OEM需求,以及为广大IT爱好者的集成工具提供多一种选择,多一种便利 ...
- 2016年5月11日摘自知乎的一些Redis大概了解
1. 知乎日报的基础数据和统计信息是用 Redis 存储的,这使得请求的平均响应时间能在 10ms 以下.其他数据仍然需要存放在另外的地方,其实完全用 Redis 也是可行的,主要的考量是内存占用.就 ...
- html5菜单折纸效果
类似猎豹浏览器安装时的用户须知效果. html文件代码,保存为html文件打开: <!DOCTYPE html> <html> <head> <meta ht ...
- jQquery.validate自定义规则的使用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...