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

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

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的元素：

    document.getElementById("test");

    //or

    document.querySelector("#test");

    document.querySelectorAll("#test")[0];

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

    document.getElementsByClassName('red')

    //or

    document.querySelector('.red')

    //or

    document.querySelectorAll('.red')

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

</head>

<body>

    <div class="con">

           <div id="han">

                12345678

           </div>

    </div>

    <div class="cont">

                12345678999999

    </div>

    <p class="yi">1111111111111

    </p>

</body>

<script>

    // var dataspan = new Date()*1;

    // alert(dataspan);

    // ha = document.getElementById("han");

    // alert(ha);

    // // w = ha.innerHTML;

    // // alert(w);

    // ha1 = document.getElementsByClassName('cont');

    // alert(ha1);

    // // g = ha.text;

    // // alert(g);

    // ha2 = document.querySelector(".cont");

    // // hh = ha2.innerHTML;

    // alert(ha2);

    ha3 = document.querySelector(".yi");

    alert(ha3);

    // gg = ha3.innerHTML;

    ha3.style.background="#f00";

    ha3.style.color="#abcdef";

    ha3.style.textAlign="center";

    // alert(gg);

</script>

</html>

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

  1. javascript高级选择器querySelector和querySelectorAll

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

  2. 高级选择器querySelector和querySelectorAll

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

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

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

  4. js高级选择器querySelector和querySelectorAll

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

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

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

  6. 重要选择器querySelector和querySelectorAll

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

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

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

  8. javaScript中的querySelector()与querySelectorAll()的区别

    之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...

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

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

随机推荐

  1. 记一次Animator状态快速切换问题的解决

    事情是这样的,我尝试在一帧内多次切换一些状态(当前状态为Idle的情况下): public Animator animator; void OnEnable() { animator.CrossFad ...

  2. 删除计算机里设备和驱动器中的爱奇艺、PPS、百度云、360云盘图标

    转自:http://jingyan.baidu.com/article/86f4a73e59bb3037d6526936.html 点击"开始"找到"运行" 输 ...

  3. TensorFlow人脸识别

    TensorFlow框架做实时人脸识别小项目(一)https://blog.csdn.net/Goerge_L/article/details/80208297 TensorFlow框架做实时人脸识别 ...

  4. java NIO中的buffer和channel

    缓冲区(Buffer):一,在 Java NIO 中负责数据的存取.缓冲区就是数组.用于存储不同数据类型的数据 根据数据类型不同(boolean 除外),提供了相应类型的缓冲区:ByteBufferC ...

  5. Java 9和Java 10的新特性

    http://www.infoq.com/cn/news/2014/09/java9 Java 9新特性汇总 继2014年3月份Java 8发布之后,Open JDK加快了开发速度, Java 9的发 ...

  6. 安卓开发之Toolbar

    根据官网的教程,发现实现与预期不一致,查看相关资料自己整理了一下(官网开发文档:https://developer.android.com/training/appbar/setting-up.htm ...

  7. [转]一步一步部署SSIS包图解教程

    本文就SQL统计分析SSIS包的部署进行一次详细的部署图解教程,Sql Server Integration Services 提供了非常简单的部署工具,利用这些工具可以方便地将包文件(*.dtsx) ...

  8. VBA学习笔记（6）--抽取第一列中叫“虹虹”的个人信息

    说明(2017.3.25): 1. 知识点为dim arr2(1 to 1000, 1 to 4)先定义一个足够大的二维数组,不然后面需要transpose转置成一维数组. '抽取列表中叫“虹虹”的所 ...

  9. PHP的HashTable实现

    转载自: http://it.taocms.org/07/1145.htm 数据结构: HashTable数据结构的描述在Zend/zend_hash.h文件中.首先,HashTable中的每一个元素 ...

  10. 关于listView的item失去焦点不能点击 Item中包含Button 导致抢占焦点

    今天发现一个问题.listView的item点击以后进入到下一个页面,下个页面有个返回按钮,直接返回回去以后点击事件不能触发,滑动或者重新打开这个listView,就可以达到原来的效果.后来发现是因为 ...