他们的作用是根据 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. EXCEL 数字+E+数字 自动识别为指数形式的解决办法

    1.今天从数据库导出excel表时,出现本来为"2E3"的单元格错误显示为"2.00E+03"的情况 2.而设置 单元格格式 为"文本"后, ...

  2. 《Out of control》阅读笔记（一）

    Out Of Control 说实话,当初买这本书起源于知乎诸位学问人的推荐,脑子一热就买了.为了不浪费这几十块钱,细致了看完了前三章,买来一看才发现原来这本书居然跟计算机有很深刻的关系.其实更准确地 ...

  3. Scrum 项目1.0 2.0 3.0 4.0 5.0 6.0 7.0

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 阅读教材第8章,8 ...

  4. Dir /U /c 输出Unicode字符的特性

    比如某个目录列表如下: D:\Spec\a.txtD:\Spec\Dir・C.txtD:\Spec\else.txtD:\Spec\קתקווה.dataD:\Spec\中・文.txt 直接dir / ...

  5. SQLServer根据不同前缀生成多套流水号

    --种子表 --@prefix 前缀 --@seed 种子值 create table RefNoSeed( prefix ) unique, seed int ) go --测试表 --@inser ...

  6. 改变Visual Studio 2012的皮肤

    习惯了用vs的绿色背景,vs2012有自己的主题管理工具--Theme Editor vs2012默认没有安装Theme Editor,菜单:工具->扩展和更新,搜索栏里面输入Theme Edi ...

  7. 详细讲解PHP中缓存技术的应用

    PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站,在速度上有绝对的优势,想mssql转6万条数据php如需要40秒,asp不下2 ...

  8. DataTable 获取列名 DataTable批量更新至数据库

    好久没写东西了,这几个月也没下功夫钻研技术,愧疚啊.说下最近刚学会的DataTable 的用法吧,新手适合看下. 1 DataTable 获取列名 在处理数据的时候大家都会用到模型,从datatabl ...

  9. 【C#进阶系列】02 PE文件，程序集，托管模块，元数据——还是那个Hello world

    好了,还是这张图,还是一样的Hello world. 因为本章其实很多都是讲一些命令行编译啊什么鬼的配置类的东西,要用的时候直接百度或者回头查书就可以了, 所以了解一下也就行了,也没有记录下来,接下来 ...

  10. javascript: Jquery each loop with json array or object

    http://www.codeproject.com/Articles/779303/JSON-and-Microsoft-technologies http://www.codeproject.co ...