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 Web」主页静态化的实现

    一个站点的主页一般不会频繁变动,而大多数用户在訪问站点时不过浏览一下主页(未登陆).然后就离开了.对于这类訪问请求.假设每次都要通过查询数据库来显示主页的话,显然会给server带来多余的压力. 这时 ...

  2. [hihoCoder] 骨牌覆盖问题·二

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上一周我们研究了2xN的骨牌问题,这一周我们不妨加大一下难度,研究一下3xN的骨牌问题?所以我们的题目是:对于3xN的棋盘 ...

  3. 通达OA 在工作流中直接查询表单内容的开发尝试（图文）

    一个朋友提出要在工作里直接查询表单内容的需求,原来他们把工作流当做业务系统来用.也算把工作流用到极致了.为了实现像软件里直接的查询功能,他想在办理工作流的时候直接能查询到表单里面的内容. 通过研究通达 ...

  4. 同一个界面内取微信的OPENID和调用微信的分享接口

    步骤如下,1:判断URL是否有CODE参数传入,没有则拼接那个微信跳转连接,然后redirect2:有CODE传入,调用微信接口,根据code获取openid和access_token,注意这一步取到 ...

  5. 前端 JS，localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  6. WSAAsyncSelect 模型

    WSAAsyncSelect模型是winsock编程模型的一种,它提供了socket异步编程的方便,其实现是基于Windows消息机制的,最主要的就是下面这个函数: int PASCAL FAR WS ...

  7. 用C#写一个多进程监控自动关机工具

    因为据说某server开着就很贵,所以我们跑完测试的job后就要赶紧关机才行,但是测试的job要跑很久,过程中又不需要干什么,所以就得有个守家的,有时候会走很晚.如果有一个自动化关机的工具就好了,当指 ...

  8. VBA学习笔记（3）--文件夹操作

    说明(2017.3.22): 1. 根据兰色幻想VBA80集视频教学,总结 2. 大部分可以用自带函数处理,不过复制文件夹需要用到FileSystemObject对象,打开文件夹用到shell Pub ...

  9. qsort的使用

    转自 http://blog.csdn.net/eroswang/archive/2009/04/15/4075580.aspx 最近用到了qsort,简单整理一下,方便以后的查找 qsort,包含在 ...

  10. 【WPF/WAF】设置快捷键（Shortcut Key）

    基于WAF框架:WPF Application Framework (WAF) View层XAML中设置热键. <Window.InputBindings> <!--<KeyB ...