重要选择器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 ...
随机推荐
- keepalived程序包
keepalived自带两个程序包 1. keepalived守护进程 [root@lvs /root]# keepalived –-helpkeepalived Version 0.6.1 (06/ ...
- 如何在java中使用sikuli进行自动化测试
很早之前写过一篇介绍sikuli的文章.本文简单介绍如何在java中使用sikuli进自动化测试. 图形脚本语言sikuli sikuli IDE可以完成常见的单击.右击.移动到.拖动等鼠标操作,ja ...
- 分享一套精美的现代 UI PSD 工具包【免费下载】
艾库特·耶尔马兹,是土耳其伊斯坦布尔的一位高级艺术总监,他向大家分享了一套美丽的现代 UI 工具包,你可以免费下载.所以,你可以使用这个优秀的素材设计视觉互动和有吸引力的用户界面. 此 UI 套件提供 ...
- iOS-沙盒路径总结、文件管理NSFileManager总结
// // ViewController.m // 沙盒操作 // // Created by mncong on 15/11/26. // Copyright © 2015年 mancong ...
- MVC WebApi跨域ajax接受post数据笔记
后端api代码示例: [HttpPost] public string callbackUrl([FromBody]SZRCallBackModel cbm) { try { if (cbm == n ...
- C#调用NPOI组件读取excel表格数据转为datatable写入word表格中并向word中插入图片/文字/书签 获得书签列表
调用word的com组件将400条数据导入word表格中耗时10分钟简直不能忍受,使用NPOI组件耗时4秒钟.但是NPOI中替换书签内容的功能不知道是不支持还是没找到. 辅助类 Excel表格数据与D ...
- 用Perl编写Apache模块续 - SVNAuth
目标:以整合各类项目管理系统中的用户体系及权限体系为目标,实现SVN的集成式动态鉴权 支持平台:usvn.禅道等 - 开发中,本文仅对前期的探索工作做点整理 开发环境: Windows.XAMPP 1 ...
- [PE结构分析] 8.输入表结构和输入地址表（IAT）
在 PE文件头的 IMAGE_OPTIONAL_HEADER 结构中的 DataDirectory(数据目录表) 的第二个成员就是指向输入表的.每个被链接进来的 DLL文件都分别对应一个 IMAGE_ ...
- HDU 2256 Problem of Precision 数论矩阵快速幂
题目要求求出(√2+√3)2n的整数部分再mod 1024. (√2+√3)2n=(5+2√6)n 如果直接计算,用double存值,当n很大的时候,精度损失会变大,无法得到想要的结果. 我们发现(5 ...
- php生成静态文件
1,通用生成方法 //获取文件内容 $content=file_get_contents("http://www.google.com/" ); $id=110; $filenam ...