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. 每天一点儿Java--ComboBox

    import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.border.*; impor ...

  2. 【Android】16.4 IntentService类

    分类:C#.Android.VS2015: 创建日期:2016-03-01 一.简介 为了进一步简化Intent过滤器的用法,Android系统又提供了一个IntentService类,这样一来,你也 ...

  3. 【Android】3.13 路径规划功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 线路规划支持以下功能: 公交信息查询:可对公交详细信息进行查询: 公交换乘查询:根据起.终点,查询策 ...

  4. 【C语言】构造长度可变的二维数组

    #include <stdio.h> #include <malloc.h> #include <memory.h> int getArray(int ***p,i ...

  5. python定制类详解

    1.什么是定制类python中包含很多内置的(Built-in)函数,异常,对象.分别有不同的作用,我们可以重写这些功能. 2.__str__输出对象 class Language(object): ...

  6. ny495 少年 DXH

    少年 DXH 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 大家都知道,DXH 幼时性格怪癖,小朋友都不喜欢和他玩,这种情况一直到 DXH 的少年时期也没有改变.少 ...

  7. gulp自动化ES6转ES5

    npm install --save-dev gulp npm install --save-dev gulp-babel npm install --save-dev babel-preset-es ...

  8. C++构造函数的调用

    C++中类的构造函数的调用有四种形式 C++中对象的实例化有四种情况: 1.调用默认构造函数. 2.隐式调用构造函数 3.显示调用构造函数 4.使用new操作符 如图所示,前三种在对象的作用域之外就会 ...

  9. LeetCode: ZigZag Conversion 解题报告

    ZigZag ConversionThe string "PAYPALISHIRING" is written in a zigzag pattern on a given num ...

  10. Gson json解析工具

    json 解析工具 ,谷歌出品 对象转换字符串 HashMap<String,String> hashMap = new HashMap<String, String>();  ...