querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在规范中定义了如下接口:

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。

获取页面I属性D为test的元素:

  1. document.getElementById("test");
  2. //or
  3. document.querySelector("#test");
  4. document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

  1. document.getElementsByClassName('red')
  2. //or
  3. document.querySelector('.red')
  4. //or
  5. document.querySelectorAll('.red')

Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别:

  1. <divid="test1"><ahref="http://www.hujuntao.com/">设计蜂巢</a></div>
  2. <pid="bar">111</p>
  3. <script>
  4. var d1 = document.getElementById('test1'),
  5. obj1 = d1.querySelector('div a'),
  6. obj2 = d1.querySelectorAll('div a');
  7. obj3 = $(d1).find('div a');
  8. console.log(obj1)//<a href="http://www.hujuntao.com/">设计蜂巢</a>
  9. console.log(obj2.length)//1
  10. console.log(obj3)//null
  11. </script>

querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身

文章分享自:http://www.cnblogs.com/daxian2012/archive/2012/10/18/2729359.html

js高级选择器querySelector和querySelectorAll的更多相关文章

  1. 高级选择器querySelector和querySelectorAll

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

  2. javascript高级选择器querySelector和querySelectorAll

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

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

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

  4. 重要选择器querySelector和querySelectorAll

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

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

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

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

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

  7. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  8. 原生DOM选择器querySelector和querySelectorAll

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

  9. HTML5中类jQuery选择器querySelector和querySelectorAll的使用

    支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...

随机推荐

  1. 一起学习KenDo

    这几年用Telerik做WEB,积累了一些感觉.因为打算涉足移动APP开发,打算接下来学习KenDo.

  2. 规则引擎集成接口(九)Java类对象

    Java类对象 右键点击“对象库” —“添加java类对象”,如下图: 弹出窗体,在文本框中输入类的全名“com.flagleader.test.Test”,选择该类型后确定,如下: 显示如下,勾选上 ...

  3. openlayers3 画扇形

    参考了http://www.cnblogs.com/lingxue3769/archive/2011/11/01/2231409.html同学的博客 和 百度知道https://zhidao.baid ...

  4. Ambari 不能配置 Kafka 监听host的问题

    问题:Ambari下Kafka多IP监听配置 环境:Ambari 1.7.0 , Hadoop 2.2 Kafka 0.8.1.2.2.0.0 现象: Ambari 中是不能配置Kafka的host. ...

  5. cordova + ionic 使用中碰到的一些问题

    cordova + ionic 使用中碰到的一些问题     No Content-Security-Policy meta tag found. Please add one when using ...

  6. 关于处理小数点位数的几个oracle函数

    1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select trunc(1.2345, 2) from ...

  7. Maven依赖版本冲突的分析及解决小结

    1:前言 做软件开发这几年遇到了许多的问题,也总结了一些问题的解决之道,之后慢慢的再遇到的都是一些重复性的问题了,当然,还有一些自己没有完全弄明白的问题.如果做的事情是重复的,遇到重复性问题的概率也就 ...

  8. hbase连接操作

    hbase连接操作 package com.test; import java.io.IOException; import org.apache.hadoop.conf.Configuration; ...

  9. gdb 调试

    一.gdb 调试-源代码关联 在调试程序的过程中,可以自由地查看相关的源代码(如果有源代码的话)是一项最基本的特性.gdb 当然也提供了这项特性,虽然不如IDE直观,但在一定程度上要比IDE更加灵活和 ...

  10. java 获取当月第一天和最后一天 获取前一个月第一天和最后一天

    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");                    //获取前月的第一 ...