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. Eclipse中导入Git项目

    1.先将项目git到本地 2.导入刚刚git到本地项目 if(如果project带.calsspath .project 文件){ 直接用genaral导入或andorid project导入即可. ...

  2. RhinoMock学习-Stub方法

    // Arrange var stub = MockRepository.GenerateStub<IDemo>(); stub.Stub(x => x.StringArgStrin ...

  3. date 修改系统时间

    # date -s "2017/03/27 12:33:58"

  4. C++11 容器Array

    array是一个固定大小的顺序容器,不能动态改变大小,array内的元素在内存中以严格的线性顺序存储与普通数组声明存储空间大小[]的方式是一样有效的,只是加入了一些成员函数和全局函数[get (arr ...

  5. Django---分页器、中间件

    分页 Django的分页器(paginator) view   from django.shortcuts import render,HttpResponse # Create your views ...

  6. eclipse中类和方法添加作者日期说明

    1.类添加作者日期说明 依次点击window—>preferences—>Java—>Code Stype—>Code Templates-Comments-Types 2.方 ...

  7. filebeat+kafka+SparkStreaming程序报错及解决办法

    // :: WARN RandomBlockReplicationPolicy: Expecting replicas with only peer/s. // :: WARN BlockManage ...

  8. 使用JQuery获取被选中的checkbox的value值 以及全选、反选

    以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...

  9. nio入门教程

    1.通过拿NIO和传统IO做对比来了解NIO 面向流与面向缓冲 Java NIO和IO之间第一个最大的区别是,IO是面向流的,NIO是面向缓冲区的. Java IO面向流意味着每次从流中读一个或多个字 ...

  10. C++ - 动态申请数组空间

    // 用指针p指向由new动态分配的长度为length*sizeof(int)的内存空间. int * p = new int[length];