1. querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。
  2.  
  3. 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
    W3C Selectors API
  4.  
  5. querySelector 和 querySelectorAll 在规范中定义了如下接口：
  6.  
  7.     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; };
  8.  
  9. 从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。
    querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
  10.  
  11. 获取页面I属性D为test的元素：
  12.  
  13.     document.getElementById("test");
  14.     //or
  15.     document.querySelector("#test");
  16.     document.querySelectorAll("#test")[0];
  17.  
  18. 获取页面class属性为”red”的元素:
  19.  
  20.     document.getElementsByClassName('red')
  21.     //or
  22.     document.querySelector('.red')
  23.     //or
  24.     document.querySelectorAll('.red')

示例：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.  
  9.     <div class="con">
  10.            <div id="han">
  11.                 12345678
  12.            </div>
  13.     </div>
  14.  
  15.     <div class="cont">
  16.  
  17.                 12345678999999
  18.  
  19.     </div>
  20.  
  21.     <p class="yi">1111111111111
  22.     </p>
  23.  
  24. </body>
  25. <script>
  26.     // var dataspan = new Date()*1;
  27.     // alert(dataspan);
  28.  
  29.     // ha = document.getElementById("han");
  30.     // alert(ha);
  31.     // // w = ha.innerHTML;
  32.     // // alert(w);
  33.  
  34.     // ha1 = document.getElementsByClassName('cont');
  35.     // alert(ha1);
  36.     // // g = ha.text;
  37.     // // alert(g);
  38.     // ha2 = document.querySelector(".cont");
  39.     // // hh = ha2.innerHTML;
  40.  
  41.     // alert(ha2);
  42.  
  43.     ha3 = document.querySelector(".yi");
  44.     alert(ha3);
  45.     // gg = ha3.innerHTML;
  46.     ha3.style.background="#f00";
  47.     ha3.style.color="#abcdef";
  48.     ha3.style.textAlign="center";
  49.  
  50.     // alert(gg);
  51. </script>
  52. </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. t-sql的一些经验

    1.存储过程的3种传回值: 1.以return传回整数 2.以output格式传回参数 3.recordset 2.字符串类型的变量需要初始化后再使用,不然永远是空 DECLARE @FieldsSq ...

  2. 【JavaWeb】(10)微信公众号开发进阶

    因为普通开发会有很多的权限限制,所以我们能够申请一个測试账号来开发体验一下微信公众号的其它接口功能. 申请測试号我就不介绍了.非常easy.申请成功后,还须要配置Url地址和token,和我们普通公众 ...

  3. vim+cscope简易教程

    Cscope具有纯正的Unix血统,它最早是由贝尔实验室为PDP-11计算机开发的,后来成为商用的AT&T Unix发行版的组成部分.直到2000年4月,这个工具才由SCO公司以BSD lic ...

  4. vim：隆重推荐括号补全插件--auto-pairs

    太好用了,括号相关的各种麻烦都一一解决,剩下的就是熟练,熟练,在熟练了.呵呵 连教程都做得这么好,先放这里,以后慢慢翻译. Auto Pairs Insert or delete brackets, ...

  5. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  6. [svc][op]Ubuntu初始化安装-py用机器优化

    参考: centos7安装优化 关闭防火墙 ufw disable pip换源 yum install python-pip -y mkdir ~/.pip cat > pip.conf< ...

  7. iphone CGContextSetLineWidth 画线的问题

    转自:http://blog.csdn.net/jxncwzb/article/details/6267154 CGContextRef context = UIGraphicsGetCurrentC ...

  8. 枚举操作的常用方法，包括获得枚举的value,name,description

    public enum SendInfoStateEnum    {   [Description("等待提交")]        等待提交 = 1, [Description(& ...

  9. db papers

    http://www.redbook.io/ http://db.cs.berkeley.edu/papers/ https://github.com/rxin/db-readings http:// ...

  10. maven(2)------maven构建项目

    一  下载maven 官网地址: http://maven.apache.org/download.cgi 如图: 可以下载历史版本. 二 windows下maven配置 1. 解压下载后的包,解压后 ...