他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

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

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

从接口定义可以看到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)选择器的区别：

<!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的更多相关文章

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

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

  2. js高级选择器querySelector和querySelectorAll

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

  3. 高级选择器querySelector和querySelectorAll

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

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

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

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

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

  6. javascript高级选择器querySelector和querySelectorAll

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

  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. iframe无刷新跨域上传文件并获取返回值

    通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原 ...

  2. 设计前沿：25款精妙的 iOS 应用程序图标

    在这篇文章中,我为大家精心挑选的25款巧妙设计的 iOS 应用程序图标,会激发你未来的工作.苹果的产品总是让人爱不释手,设计精美,对用户使用体验把握得淋漓尽致,iPhone.iPad.iPod和 iM ...

  3. Direct3D11学习：（五）演示程序框架

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 在此系列最开始的文章Direct3D11学习:(一)开发环境配置中,我们运行了一个例子BoxDemo,看过这个例 ...

  4. gopush-cluster 架构

    前言 gopush-cluster是一套golang开发的实时消息推送集群,主要分享一下开发这套系统的想法和思路. 架构 主要分为三个模块来开发,comet/web/message. comet 主要 ...

  5. python编码声明的位置很重要

    python在3.x版本之前,编码一直是一个很头痛的问题.在代码中如果要使用中文,通常都要在文件的头部注明# -*- coding:utf-8 -*- 这样IDE或者解释器才会智能的转换编码. 这其中 ...

  6. C#ASP.NET 通用扩展函数之 LogicSugar 简单好用

    说明一下性能方面 还可以接受 循环1000次普通Switch是用了0.001秒 ,扩展函数为0.002秒  , 如果是大项目在有负载均衡的情况下完全可以无视掉,小项目也不会计较这点性能了. 注意需要引 ...

  7. 操作ACCESS数据库注意事项

    以下问题都是容易忽略,但却不容易找出问题的所在,让我头疼不少,故在此列出,即是一个总结,同样也给其他人参与! 1.使用参数形式执行SQL命令时,参数数组需与在SQL语句中参数名出现的位置及名称必须完全 ...

  8. struts2基础——请求与响应、获取web资源

    一.请求与响应 Action1.含义:(1) struts.xml 中的 action 元素,也指 from 表单的 action 属性,总之代表一个 struts2 请求.(2) 用于处理 Stru ...

  9. 移动端手势库Hammer.js学习

    感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...

  10. jQuery数据类型总结

    jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors.Events等. 1. String ...