新的选择器
document.querySelector("selector");
selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

document.querySelectorAll("selector");
selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

 
 
example:
         <div class="oo">HELLO WORD</div>
<div class="oo">this is a test</div>

<script type="text/javascript">

var cc=/*document.querySelector("div")*/document.querySelector(".oo");//返回匹配到的第一个内容

console.log(cc.innerHTML);

var dd=document.querySelectorAll("div");//返回匹配到的所有内容

console.log(dd.length);

for(var i=0;i<dd.length;i++){
console.log(dd.item(i).innerHTML);
}

/*

输出
HELLO WORD
2
HELLO WORD
this is a test
*/
</script>

HTML5-新API选择器的更多相关文章

  1. HTML5新api即pushState和replaceState实现无刷新修改url

    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...

  2. HTML5新特性之移动设备API

    为了更好地为移动设备服务,HTML5推出了一系列针对移动设备的API. 1.Geolocation API Geolocation接口用于获取用户的地理位置.它使用的方法基于GPS或者其他机制(比如I ...

  3. HTML5的JavaScript选择器介绍

    在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...

  4. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  5. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  6. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  7. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  8. 开大你的音响,感受HTML5 Audio API带来的视听盛宴

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...

  9. HTML5新的标签和属性

    <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...

  10. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

随机推荐

  1. JVM 类型的生命周期学习

    Java虚拟机通过装载.连接和初始化一个JAVA类型,使该类型可以被正在运行的JAVA程序所使用,其中,装载就是把二进制形式的JAVA类型读入JAVA虚拟机中:而连接就是把这种读入虚拟机的二进制形式的 ...

  2. OAF_OAF Exception Handling异常处理(概念)

    2014-06-12 Created By BaoXinjian

  3. Edmonds_Karp 算法入门详解(转)

    转载自:http://blog.csdn.net/hsqlsd/article/details/7862903 有n个点,有m条有向边,有一个点很特殊,只出不进,叫做源点,通常规定为1号点.另一个点也 ...

  4. POJ 3162 Walking Race 树形DP+线段树

    给出一棵树,编号为1~n,给出数m 漂亮mm连续n天锻炼身体,每天会以节点i为起点,走到离i最远距离的节点 走了n天之后,mm想到知道自己这n天的锻炼效果 于是mm把这n天每一天走的距离记录在一起,成 ...

  5. 转-android图片降低图片大小保持图片清晰的方法

    http://i.cnblogs.com/EditPosts.aspx?opt=1 android里面对于图片的处理一直是个比较烦人的问题,烦人之处在于一个不小心,就有可能造成OOM. 最近碰到一个关 ...

  6. 何时要打开stm32的AFIO时钟

    STM32的管脚配置一般有2个:Default和rinmap,如果使用default就不需要打开AFIO,否则使用后者就需要打开3个时钟:GPIO时钟.外设功能时钟和AFIO时钟. 一般在涉及外中断配 ...

  7. Python进阶09 动态类型

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 谢谢TeaEra, 猫咪cat 动态类型(dynamic typing)是Pyth ...

  8. Python进阶01 词典

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 基础教程介绍了基本概念,特别是对象和类. 进阶教程对基础教程的进一步拓展,说明Py ...

  9. PyDev-Python的Eclipse插件安装

    PyDev官网:http://marketplace.eclipse.org/node/114 安装方法: 1,打开Eclipse,如果是初次使用,关闭欢迎页面,否则无法按照我说的方法安装. 2,打开 ...

  10. C++中为什么构造函数不能是虚函数,析构函数是虚函数

    一, 什么是虚函数? 简单地说,那些被virtual关键字修饰的成员函数,就是虚函数.虚函数的作用,用专业术语来解释就是实现多态性(Polymorphism),多态性是将接口与实现进行分离:用形象的语 ...