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. Android 权限表

    String ACCESS_CHECKIN_PROPERTIES 同意在登入数据库的时候读写当中的属性表,并上传改变的值 String ACCESS_COARSE_LOCATION 同意应用訪问范围( ...

  2. linux快速进入全屏命令行模式

    按CTRL+ALT+F1~6就可以了.F7是桌面环境.

  3. mysql不重启修改参数变量

    分享下mysql不重启的情况下修改参数变量的方法. 通常来说,更新mysql配置my.cnf需要重启mysql才能生效,但是有些时候mysql在线上,不一定允许你重启,这时候应该怎么办呢? 例子: m ...

  4. 【Android】4.3 屏幕布局和旋转

    分类:C#.Android.VS2015:创建日期:2016-02-06 为了控制屏幕的放置方向(纵向.横向),可以在Resource下同时定义两种不同的布局文件夹:layout和layout-lan ...

  5. MySQL binlog日志三种模式选择及配置

    在认识binlog日志三种模式前,先了解一下解析binlog日志的命令工mysqlbinlog.mysqlbinlog工具的作用是解析mysql的二进制binlog日志内容,把二进制日志解析成可以在M ...

  6. 每日英语：Our Unique Obsession With Rover And Fluffy

    Recently, an almost literal case of lifeboat ethics occurred. On Aug. 4, Graham and Sheryl Anley, wh ...

  7. 李洪强漫谈iOS开发[C语言-054]-函数

    // //  main.c //  02 翻译数字的优化 // //  Created by vic fan on 2017/6/4. //  Copyright © 2017年 李洪强. All r ...

  8. c++之五谷杂粮---2

    2.1  我们通过调用运算符(call operator)来执行函数.调用运算符的形式是一对圆括号,它作用于一个表达式,该表达式是函数或者指向函数的指针:圆括号之内是用逗号隔开的实参列表,我们用实参初 ...

  9. tomcat事件处理机制

    最近在阅读“how tomcat works”这本书,结合tomcat7的源码进行学习.对于学习的收获,将通过“tomcat学习系列”记录下来,和大家一起分享和交流,也算对自己学习的一种促进.闲话不多 ...

  10. 使用conda 对gcc进行升级 （sonicparanoid）

    由于要是用python 3.6版本的一个包sonicparanoid,但是系统的gcc比较老,所以先用conda创建python环境,在该环境下尽心gcc的安装和升级 conda create --n ...