HTML5中类jQuery选择器querySelector和querySelectorAll的使用
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+
1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回null
eg:var body = document.querySelector('body');
var myDiv = document.querySelector('#myDiv');
var selected = document.querySelector('.selected');
var img = document.body.querySelector('img .button');
2.querySelectorAll()方法返回的一个NodeList的实例。
eg: var ems = document.getElementById('myDiv').querySelectorAll('em');
var strongs = document.querySelectorAll('p strong');
3.matchesSelector(),Eelement类型新增的方法。接收css 选择符,如果调用元素与该选择符匹配,返回true,否则返回false
目前除IE6-IE8,Firefox/Chrome/Safari/Opera/IE 的最新版本均已实现,但方法都带上了各自的前缀.
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}else{
}
}
HTML5中类jQuery选择器querySelector和querySelectorAll的使用的更多相关文章
- HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);
基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 高级选择器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 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
随机推荐
- Java代码启动/关闭进程
ProcessBuilder builder = new ProcessBuilder(命令,参数,参数...); Process process = builder.start(); br = ne ...
- Web开发-Servlet&HTTP&Request
<!doctype html>02 - JavaEE - Servlet&HTTP&Request figure:first-child { margin-top: -20 ...
- LaTeX的安装
1 下载与安装 下载地址. 选择清华TUNA开源镜像, 选择Full版本, 点击下载,按照提示安装,没有坑,就没有截图. 2 简单使用流程 1) 首先下载对应的LaTeX模板(从会议或者期刊网站上下载 ...
- apache tomcat 一个网站多域名的实现方法
因此处是进行多域名设置,所以 Apache 与 tomcat的结合没有详述,此处只是设置多域名的方法 windows下 C:\WINDOWS\system32\drivers\etc 文件夹内 hos ...
- 「题解」:windy数
问题: windy数 时间限制: 1 Sec 内存限制: 512 MB 题面 题目描述 Windy 定义了一种 Windy 数:不含前导零且相邻两个数字之差至少为 的正整数被称为 Windy 数. ...
- 「题解」:[组合数学]:Perm 排列计数
题干: Description称一个1,2,…,N的排列P1,P2…,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,…N的排列中有多少是Magic的,答 ...
- Python-函数基础(2)
目录 可变长参数 形参 实参 函数对象 函数嵌套 名称空间与作用域 名称空间 内置名称空间 局部名称空间 全局名称空间 执行顺序 搜索顺序 作用域 全局作用域 局部作用域 global nonloca ...
- 如何做一个标记为安全的ACTIVEX控件
1.添加辅助函数控件的基本结构中含有xxApp,xxCtrl,xxPropPage三个类.找到xxApp的头文件,添加三个辅助函数.// Helper functionto create a comp ...
- 修改cmd命令默认路径
未修改之前: 修改方法: 1.win+r打开运行对话框,输入 regedit 打开注册表编辑器 2.在注册表中找到:HKEY_CURRENT_USER\Software\Microsoft\Comma ...
- 深入浅出Mybatis系列(二)---配置简介(mybatis源码篇)[转]
上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们 ...