支持的浏览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的使用的更多相关文章

  1. HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

    基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...

  2. HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  3. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  4. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  5. 重要选择器querySelector和querySelectorAll

    他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...

  6. 高级选择器querySelector和querySelectorAll

    Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...

  7. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  8. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  9. javascript高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

随机推荐

  1. Java代码启动/关闭进程

    ProcessBuilder builder = new ProcessBuilder(命令,参数,参数...); Process process = builder.start(); br = ne ...

  2. Web开发-Servlet&HTTP&Request

    <!doctype html>02 - JavaEE - Servlet&HTTP&Request figure:first-child { margin-top: -20 ...

  3. LaTeX的安装

    1 下载与安装 下载地址. 选择清华TUNA开源镜像, 选择Full版本, 点击下载,按照提示安装,没有坑,就没有截图. 2 简单使用流程 1) 首先下载对应的LaTeX模板(从会议或者期刊网站上下载 ...

  4. apache tomcat 一个网站多域名的实现方法

    因此处是进行多域名设置,所以 Apache 与 tomcat的结合没有详述,此处只是设置多域名的方法 windows下 C:\WINDOWS\system32\drivers\etc 文件夹内 hos ...

  5. 「题解」:windy数

    问题: windy数 时间限制: 1 Sec  内存限制: 512 MB 题面 题目描述 Windy 定义了一种 Windy 数:不含前导零且相邻两个数字之差至少为 的正整数被称为 Windy 数. ...

  6. 「题解」:[组合数学]:Perm 排列计数

    题干: Description称一个1,2,…,N的排列P1,P2…,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,…N的排列中有多少是Magic的,答 ...

  7. Python-函数基础(2)

    目录 可变长参数 形参 实参 函数对象 函数嵌套 名称空间与作用域 名称空间 内置名称空间 局部名称空间 全局名称空间 执行顺序 搜索顺序 作用域 全局作用域 局部作用域 global nonloca ...

  8. 如何做一个标记为安全的ACTIVEX控件

    1.添加辅助函数控件的基本结构中含有xxApp,xxCtrl,xxPropPage三个类.找到xxApp的头文件,添加三个辅助函数.// Helper functionto create a comp ...

  9. 修改cmd命令默认路径

    未修改之前: 修改方法: 1.win+r打开运行对话框,输入 regedit 打开注册表编辑器 2.在注册表中找到:HKEY_CURRENT_USER\Software\Microsoft\Comma ...

  10. 深入浅出Mybatis系列(二)---配置简介(mybatis源码篇)[转]

    上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们 ...