querySelect()和querySelectAll()
后面都是跟一个css选择器；
前者返回符合条件的第一个匹配的元素，如果没有则返回Null;
后者返回符合筛选条件的所有元素集合（数组），如果没有符合筛选条件的则返回空数组。
document.getElementsByClassName(selector)
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。
classList属性
-
add(value):将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
1<style> 2 .b{border:1px solid #aaa;} 3</style> 4<div class = "a" id = "a">这是一个例子</div> 5<script type="text/javascript"> 6 var a = document.getElementsByClassName("a")[0]; 7 a.classList.add("b"); 8 /* 9 或者： 10 var a = document.getElementById("a"); 11 a.classList.add("b"); 12 */ 13</script> -
contains(value):表示列表中是否存在给定的value值，如果存在则返回true，不存在则返回false；
1<div class = "a" id = "a">contains(value)判断</div> 2<script> 3 document.getElementById("a").classList.contains("a");//返回true 4</script> -
remove(value):移除元素中一个或多个类名。
1<div class = "a b" id = "a">remove掉一个元素的class类名</div> 2<script> 3 document.getElementById("a").classList.remove("a"); 4 //结果：<div class = "b" id = "a">remove掉一个元素的class类名</div> 5</script> -
item(index):返回类名在元素中的索引值，如果索引值。
1<div class = "a b" id = "a">remove掉一个元素的class类名</div> 2<script> 3 document.getElementById("a").classList.remove("a"); 4 //结果：<div class = "b" id = "a">remove掉一个元素的class类名</div> 5</script> -
toggle(value,true || false):将值为value的class在添加和移除之间切换.
第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。
1<div class = "a b" id = "a">toggle(value,true || false)</div> 2<script> 3 var a = document.getElementById("a"); 4 a.classList.toggle("b");//返回false（移除） 5 a.classList.toggle("b");//返回 turn（添加） 6</script>
自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目前是为元素提供与渲染无关的信息，或者提供语义信息。这些苏醒可以任意添加、随便命名，只要以data-开头即可。
1<div id = "mtDiv" data-myname="mike"></div> 2<script> 3 var div = document.getElementById("myDiv"); 4 if(div.dataset.myname){alert(div.dataset.myname);} 5</script>
insertAdjacentHtml(),insertAdjacentText()和insertAdjacentElement()
插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接受两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：
-
"beforeBegin"：在当前元素之前插入一个紧邻的同辈元素；
-
"afterBegin"：在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
-
"beforeEnd"：在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
-
"afterEnd":在当前元素之后插入一个紧邻的同辈元素。
element.insertAdjacentHTML("beforeBegin","<p>hello world</p>");
FullScreen及其API
FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.
启动全屏模式
全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:
1<script> 2 // 找到支持的方法, 使用需要全屏的 element 调用 3 function launchFullScreen(element) { 4 if(element.requestFullscreen) { 5 element.requestFullscreen(); 6 } else if(element.mozRequestFullScreen) { 7 element.mozRequestFullScreen(); 8 } else if(element.webkitRequestFullscreen) { 9 element.webkitRequestFullscreen(); 10 } else if(element.msRequestFullscreen) { 11 element.msRequestFullscreen(); 12 } 13 } 14 // 在支持全屏的浏览器中启动全屏 15 // 整个页面 16 launchFullScreen(document.documentElement); 17 // 某个元素 18 launchFullScreen(document.getElementById("videoElement")); 19</script>
将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏. 如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.
退出全屏模式
使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.
1<script> 2 // 退出 fullscreen 3 function exitFullscreen() { 4 if(document.exitFullscreen) { 5 document.exitFullscreen(); 6 } else if(document.mozExitFullScreen) { 7 document.mozExitFullScreen(); 8 } else if(document.webkitExitFullscreen) { 9 document.webkitExitFullscreen(); 10 } 11 } 12// 调用退出全屏方法! 13exitFullscreen(); 14</script>
请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element.
Fullscreen 属性与事件
-
document.fullscreenElement:当前处于全屏状态的元素element;如果当前没有处于全屏的元素，则返回null。
1<script> 2 var fullscreenElement = 3 document.fullscreenElement || 4 document.mozFullScreenElement || 5 document.webkitFullscreenElement; 6</script> -
documentlfullscreenEnable:返回一个Boolean值，标记fullscreen当前是否可用。
1<script> 2 var fullscreenEnable = 3 document.fullscreenEnabled || 4 document.mozFullScreenEnabled || 5 document.webkitFullscreenEnabled || 6 document.msFullscreenEnabled; 7 if(fullscreenEnabled){ 8 element.requestFullScreen(); 9 }else{ 10 console.log("当前浏览器不能全屏"); 11 } 12</script> -
fullscreenchange事件：浏览器进入或离开全屏时触发。
1<script> 2 document.addEventListener("fullscreenchange",function(event){ 3 if(document.fullscreenElement){ 4 console.log("进入全屏"); 5 }else{ 6 console.log("退出全屏"); 7 } 8 }); 9</script>
全屏状态下的CSS
在全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。
1<style> 2 :-webkit-full-screen { 3 /* properties */ 4 } 5 6 :-moz-full-screen { 7 /* properties */ 8 } 9 10 :-ms-fullscreen { 11 /* properties */ 12 } 13 14 :full-screen { /*pre-spec */ 15 /* properties */ 16 } 17 18 :fullscreen { /* spec */ 19 /* properties */ 20 } 21 22 /* deeper elements */ 23 :-webkit-full-screen video { 24 width: 100%; 25 height: 100%; 26 } 27</style>
页面可见性API
目前页面可见性API有两个属性，一个事件，如下：
-
document.hidden:Bolean值，表示当前页面是可见的还是不可见；
-
document.visibilityState:返回当前页面的可见状态。主要有：
- hidden
- visible
- prerender:预渲染
- preview:预览
-
visibilitychange:当页面的可见状态改变时触发的事件。
1<script> 2 document.addEventListener("visibilitychange",function(){ 3 //要执行的函数 4 }); 5</script>
带前缀的Page Visibility API获取
1<script> 2 var pageVisibility = (function() { 3 var prefixSupport, keyWithPrefix = function(prefix, key) { 4 if (prefix !== "") {//prefix：前缀的意思 5 // 首字母大写 6 return prefix + key.slice(0,1).toUpperCase() + key.slice(1); 7 } 8 return key; 9 }; 10 //判断浏览器是否支持屏幕隐藏 11 var isPageVisibilitySupport = (function() { 12 var support = false; 13 if (typeof window.screenX === "number") { 14 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) { 15 if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) { 16 prefixSupport = prefix; 17 support = true; 18 } 19 }); 20 } 21 return support; 22 })(); 23 //判断是否隐藏（boolean） 24 var isHidden = function() { 25 if (isPageVisibilitySupport) { 26 return document[keyWithPrefix(prefixSupport, "hidden")]; 27 } 28 return undefined; 29 }; 30 //获取可见状态 31 var visibilityState = function() { 32 if (isPageVisibilitySupport) { 33 return document[keyWithPrefix(prefixSupport, "visibilityState")]; 34 } 35 return undefined; 36 }; 37 //得出最后的返回值 38 return { 39 hidden: isHidden(), 40 visibilityState: visibilityState(), 41 visibilitychange: function(fn, usecapture) { 42 usecapture = undefined || false; 43 if (isPageVisibilitySupport && typeof fn === "function") { 44 return document.addEventListener(prefixSupport + "visibilitychange", function(evt) { 45 this.hidden = isHidden(); 46 this.visibilityState = visibilityState(); 47 fn.call(this, evt); 48 }.bind(this), usecapture); 49 } 50 return undefined; 51 } 52 }; 53 })(undefined); 54 55 //本质是： 56 var pageVisibility = { 57 hidden: Boolean 58 visibilityState: String 59 visibilitychange: Function 60 }; 61</script>
与_原生属性事件_对应关系如下：
1<script> 2 pageVisibility.hidden === document.hidden（兼容处理） 3 pageVisibility.visibilityState=== document.visibilityState（兼容处理） 4 pageVisibility.visibilitychange(function() { /* this指的就是pageVisibility */ }); 5 === document.addEventListener("visibilitychange", function() {});（兼容处理） 6</script>
要判断一个浏览器支不支持页面可见性API用如下代码就可以：
1<script> 2 var isSupport = typeof pageVisibility.hidden !== "undefined" 3</script>
预加载（prefetch）
预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源。页面提供给浏览器需要预加载的集合。浏览器载入当前页面完成后，将会在后台下载需要预加载的页面并添加到缓存中。当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现。
1<!-- 页面，可以使用绝对或者相对路径 --> 2<link rel="prefetch" href="page2.html" /> 3 4<!-- 图片，也可以是其他类型的文件 --> 5<link rel="prefetch" href="sprite.png" />
图形元素（The Figure Element）
figure标签规定独立的流内容（图像、图表、照片、代码等等）。
figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
1<figure> 2 <p>黄浦江上的的卢浦大桥</p> 3 <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> 4</figure>
内容可编辑
1<ul contenteditable=true> 2 <li>i am editable</li> 3 <li>i am editable too</li> 4 <li>i am editable too too</li> 5</ul>
主要是添加了属性contenteditable="true"才能够实现可编辑属性。
本地存储（Local Storage）
HTML5提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对怡和session的数据存储
之前，这些存储都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
创建localStorage：
存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：
1<script> 2 localStorage.a = 3;//设置a为"3" 3 localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值 4 localStorage.setItem("b","isaac");//设置b为"isaac" 5 var a1 = localStorage["a"];//获取a的值 6 var a2 = localStorage.a;//获取a的值 7 var b = localStorage.getItem("b");//获取b的值 8 localStorage.removeItem("c");//清除c的值 9</script>
这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：
1<script> 2 for (var i = 0; i < localStorage.length; i++) { 3 var k = localStorage.key[i] 4 console.log(k);//这里可以得到localStorage中的所有键名称 5 var r = localStorage.getItem(k);//得到localStorage中的所有键值； 6 } 7</script>
下面是一个简单的利用本地存储的计数器：
1<script> 2 var s = window.localStorage; 3 if (!s.getItem("pageLoadCount")) {//判断pageLoadCount这个键是否存在 4 s.setItem("pageLoadCount",0); 5 }; 6 s.pageLoadCount = parseInt(s.pageLoadCount)+1; 7 document.getElementById("XXX").innerHTML = s.pageLoadCount; 8</script>
可以看到，每刷新一次页面，s.pageLoadCount的数值就增加1.
需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。