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. [svc][op]LVS+keepalived

    lvs是一种负载均衡技术.注意区分负载均衡和高可用的区别. keepalive是lvs的管理工具 ipvsadm也是lvs的管理工具 keepalive借助ipvsadm管理lvs.所以通常说lvs+ ...

  2. 【Android】21.4 图片动画缩放示例

    分类:C#.Android.VS2015: 创建日期:2016-03-21 一.简介 该例子演示如何动画缩放图片,实现类似"点击看大图"的效果. 二.示例 1.运行截图    2. ...

  3. onethink迁移

    修改applicattion下面的Common跟User里面的config.php文件两个

  4. linux下调试core的命令

    在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数. 1.core文件的生成开 ...

  5. Ribbon负载均衡策略与自定义配置

    Ribbon负载均衡策略 配置 对调用的某个服务启用某种负载策略 1)通过配置文件配置 hello: ribbon: NFLoadBalancerRuleClassName:com.netflix.l ...

  6. xml相关术语说明

    <project xmlns="http://maven.apache.org/POM/4.0.0"  --命名空间,类似包名,因为xml的标签可自定义,需要命名空间来区分x ...

  7. K-Means聚类算法的原理及实现【转】

    [转]http://www.aboutyun.com/thread-18178-1-1.html 问题导读:1.如何理解K-Means算法?2.如何寻找K值及初始质心?3.如何应用K-Means算法处 ...

  8. LeetCode: Roman to Integer 解题报告

    Roman to IntegerGiven a roman numeral, convert it to an integer. Input is guaranteed to be within th ...

  9. nginx正向代理http（一）

    nginx实现正向代理,下面以http为例说明: (1)nginx配置: server { listen 8080; resolver 114.114.114.114; access_log logs ...

  10. Makefile初探

    选择一个目录创建一个Makefile文件: 注意第二行的开头需要时TAB建空开,不要用空格 执行make make的时候,无论你创建的是makefile还是Makefile都可以识别 ,不在乎开头的字 ...