他们的作用是根据 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. Apache+tomcat+mod_jk+centos6.2负载均衡集群配置--转载

    转载地址:http://blog.163.com/chenhui_java/blog/static/17267249420128101191860/ 注: 由于长期受转载毒害,所以本人日志均是原创:其 ...

  2. [pyhton]python内建方法

    撸一遍python的内建方法 这样做的好处就是:我如果要完成一个功能的时候,如果能用内建方法完成,就用内建方法.这样可以提高效率,同时使自己的代码更加优雅.哎呦?那岂不是撸完就是python高手了?我 ...

  3. mysqldump命令的常用组合

    只导表结构完整语句: mysqldump -h192.168.1.174  --port=3306 -uroot -p  --routines --events --no-data  --no-cre ...

  4. tomcat端口被占用

    这里就以win7为例进行讲解. 首先打开cmd,打开的方法很简单,在开始菜单中直接输入即可.同样也可以按下win+R打开运行,然后输入cmd即可. 在dos命令中输入以下命令查询正在被使用的端口号以及 ...

  5. 【WinRT】国内外 Windows 应用商店应用开发者博客收集

    本文格式:博主名 博客链接 本人点评.排名不分先后. 中文: 博客园: webabcd http://www.cnblogs.com/webabcd/ 微软最有价值专家(MVP),他做的 Win8.1 ...

  6. Brute Force - B. Candy Boxes ( Codeforces Round #278 (Div. 2)

    B. Candy Boxes Problem's Link:   http://codeforces.com/contest/488/problem/B Mean: T题目意思很简单,不解释. ana ...

  7. 如何彻底的卸载sql server数据库

    如何彻底的卸载sql server数据库    好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净 ...

  8. 在android设备上调试ionic应用

    方法1: ionic run android -l -c 将会在console中输出日志信息 方法2: (1).使用usb连接android设备,并打开android设备的调试功能 (2).在chro ...

  9. 【转】Aspose.Cells读取excel文件

    Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件,用这个控件来导入.导出数据非常方便.其中Aspose.Cells就是用来操作Excel的,功能有很多.我所用的是最基本的 ...

  10. C# 生成XML空元素/空节点自动换行解决方案

    使用DataSet可以直接输出XML,并可指定是否带有Schema: ds.WriteXml(XMLFile,XmlWriteMode.WriteSchema ) 不过,这样将不会输出值为Null的字 ...