新的选择器
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. Camel、Pastal、匈牙利标记法

    原来我一直用的是Camel标记法……收藏学习了. */       Camel标记法采用首字母小写,接下来的单词都以大写字母开头的方法,如myName.       Pastal标记法采用首字母大写, ...

  2. Spark on Yarn年度知识整理

    大数据体系结构: Spark简介 Spark是整个BDAS的核心组件,是一个大数据分布式编程框架,不仅实现了MapReduce的算子map 函数和reduce函数及计算模型,还提供更为丰富的算子,如f ...

  3. android xml操作

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.ArrayList; import ...

  4. http://www.imooc.com/video/4767 zepto教学视频笔记

    一.介绍js移动端框架:zepto.js与jquery mobile 对比:zepto特点 1.与jquery相似度95%,会jquery基本会zepto: 2.API少,轻量级框架 3.移动端无缝接 ...

  5. window和nodejs作用域区别(待续)

    //这是在浏览器环境下,chrome下 var n =2 ; var obj={ n:4, fn1:(function(){ console.log("fn1->this =" ...

  6. eclipse项目!*图标含义

    一 .项目前面有红色!,表示工程中classpath中指向的包路径错误 解决办法: 右键项目名称 BuildPath ---> Configure Build Paht...中,然后上面有几个选 ...

  7. struts2的异常

    index.jsp <%@ page language="java" import="java.util.*" contentType="tex ...

  8. 2013 ACM 通化邀请赛D.D-City 并查集

    点击打开链接 D.D-City Description Luxer is a really bad guy. He destroys everything he met. One day Luxer ...

  9. Configure apt-get / git/ curl to use a proxy (Ubuntu)

    http://technoblog.org/2009/07/configure-apt-get-to-use-a-proxy-ubuntu/ Open the following configurat ...

  10. Oracle corrupt block(坏块) 详解

    转自:http://blog.csdn.net/tianlesoftware/article/details/5024966 一. 坏块说明 1.1 相关链接 在看坏块之前,先看几个相关的链接,在后面 ...