HTML5脚本扩展---新增小型API

62 阅读 0 评论 41 点赞

我是靠谱客的博主优美酸奶，最近开发中收集的这篇文章主要介绍HTML5脚本扩展---新增小型API，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. H5新增选择器( SelectorsAPI )

1) H5之前的选择器

document.getElementById("p1");//获取ID为p1的那个元素，返回一个元素
document.getElementsByTagName("p");//获取文档中所有p标签，返回一个NodeList实例
document.getElementsByName("check");//获取所有name为check的元素，始终返回一个NodeList实例

2) H5新增

querySelector(“ body / #mydiv / .selected / img .fig / [title=hello]”)

参数：一个CSS选择符 “img .layer”返回类为”fig”的第一个img元素;
返回：匹配到的第一个元素
调用：Document类型，Element类型
浏览器的兼容性：IE8+、FireFox3.5+、Safari3.1+、Chrome和Opera10+

querySelectorAll()

参数：也是一个CSS选择符
返回：一个NodeList实例
调用：Document类型，Element类型和DocumentFragment类型
浏览器的兼容性：IE8+、FireFox3.5+、Safari3.1+、Chrome和Opera10+

matchesSelector()

参数：同样是一个CSS选择符
调用：Element类型
返回：若调用该方法的元素与传入方法CSS选择符参数匹配，返回true,否则返回false
浏览器的兼容性: 还没有浏览器支持，
但IE9+通过msMatchesSelector()方法支持;
Firefox3.6+通过mozMatchesSelector()方法支持;
Safari5+ 和 Chrome通过webkitMatchesSelector()方法支持。

document.getElementByClass(“className”)

参数：一个或多个类名的字符串
返回：一个NodeList实例
调用：Document类型
浏览器的兼容性：IE9+

Element.classList 属性

返回: 该元素的class属性值的列表，返回的列表是一个类似数组的对象,存在length属性
返回的对象存在操作class值的方法：
add(value): 将给定的字符串value,添加class 属性列表, 若已存在，就不添加
remove(value): 从列表中删除value
toggle(value): 切换class，即：存在时删除，不存在时添加
contains(value): 判断列表中是否存在value
浏览器的兼容性：Firefox3.6+ 和 Chrome

2. 焦点管理

H5添加了辅助管理DOM焦点的功能。

1）document.activeElement属性，该属性引用DOM中当前获得了焦点的元素

元素获得焦点的方式：

页面加载（文档刚刚加载完成时，document.activeElement保存的是document.body元素的引用，文档加载期间为null）
用户输入
在代码中调用focus()方法, 如 button.focus()。

2）document.hasFocus() 方法，用于确定文档是否获得了焦点，获得了焦点时为true,否则为false

通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互，提高Web应用的无障碍性。
浏览器兼容性：IE4+ 、Firefox 3+ 、 Safari 4+ 、Chrome和 Opera 8+

3. JSON的新方法

1） eval(..) 函数：

JavaScript 中的eval(..) 函数可以接受一个字符串为参数，并将其中的内容视为好像在书写时，就存在于程序中这个位置的代码。换句话说，可以在你写的代码中用程序生成代码并运行，就好像代码是写在那个位置的一样。
JSON新方法出现之前，使用JavaScript的eval()函数，将JSON数据结构（任何字符串代码）解析，解释并返回为JavaScript对象和数组。

缺点：

存在风险，可能会执行一些恶意代码。
在程序中动态生成代码的使用场景非常罕见，因为它所带来的好处无法抵消性能上的损失。

2） JSON.parse(string)方法：

只能解析严格的JSON数据结构的字符串代码。安全性高

3） JSON.stringify(obj)方法：

将JavaScript对象转化为字符串

4）利用JSON的方法克隆对象

修改对象的引用会直接修改对象本身，对象的多个引用访问到的数据都是一样的。

如：

var a = {
name : ”hello”
};
var b = a;
b.name = ” hi ” ; 
alert (a.name)   //输出 “hi”
 
//如何克隆一个对象，后对其修改而不影响原来的对象呢？
var a = {
name : ”hello”
};
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name = ” hi ” ; 
alert (a.name)   //输出 “hello”

对象的引用，浅拷贝，深拷贝，递归<对象的引用>

5） IE7-不支持，想要兼容IE低版本的话，可以去JSON官网下载Json2.js文件引入本地文档使用

4. 自定义数据属性

HTML5规定，可以为元素添加非标准的属性，但要添加前缀 data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data开头即可。

<div  id=”mydiv”  data-app=”12”  data-myname=”Lily” data-my-sex=”女” ></div>

访问和设置自定义属性：

//通过元素的dataset属性，该属性返回值是DOMStringMap, 即一个名值对的映射
alert ( div.dataset.app ) ;   //输出”12”         div.dataset.app=”34”;
alert ( div.dataset.myname ) ;   //输出”Lily”    div.dataset.myname=”Jack”;
alert (div.dataset.mySex);   //输出”女”        div.dataset.mySex=”men”;  //驼峰式

自定义数据属性的作用：实现HTML标签与JS的交互相分离，根据不同属性值，实现不同的效果。如：库jquery mobile, AngularJS

5. 延迟加载JS

外部 JS作为body元素的最后一个标签加入HTML，不影响文档页面加载的速度
如果给<script>标签添加defer=”defer”属性，则该标签引入的JS外部文件加载会延迟到onload事件触发之前完成。
如果给<script>标签添加async=”async”属性, JS文件会异步加载，多个JS文件都添加该属性时，执行顺序不一定，那个先加载完执行哪个，这是就会出现函数找不到的问题。
一般用于JS文件之间是并行关系时使用，如加载广告
Labjs库：异步加载外部JS文件

6. 历史状态管理

1) 通过用户跳转页面的操作，改变历史状态管理：

在现代Web应用中，用户的每次操作不一定打开一个全新的页面，因此”后退”和”前进”按钮也就失去了作用，导致用户很难在不同的状态间切换。

2）在网页URL后面添加hash值参数，改变历史状态管理：

如baidu.com#aaaaaaa
通过window.location.hash访问和设置URL的参数列表
alert (window.location.hash ) //输出当前页面的参数列表 “#aaaaaaa”

H5新增了hashchange 事件，以便在URL的参数列表（及URL中” # ”号后面的所有字符串）发生变化时，通知开发人员。
新增这个事件，是因为在Ajax应用中，开发人员经常要利用URL参数列表来保存状态或导航信息。
必须把hashchange 事件绑定到window对象上。

浏览器兼容性：IE8+ ,Firefox3.6+, Safari5+, Chrome和Opera10.6+

<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<script>
window.οnlοad= function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
var json = {};
oInput.onclick = function(){
           var num = Math.random();//产生0-1之间的随机数
           var arr = randomNum(35,7);//产生7个由1-35之间的整数组成的随机数
           json[num] = arr;
           oDiv.innerHTML = arr;
           window.location.hash = num;//设置当前网页网址URL的hash值
};
window.onhashchange = function(){
           oDiv.innerHTML =json[window.location.hash.substring(1)];
};
function randomNum(iAll,iNow){
           var arr = [];
           var newArr = [];
           for(var i=1;i<=iAll;i++){
                    arr.push(i);
           }
          
           for(var i=0;i<iNow;i++){
                    newArr.push( arr.splice(Math.floor(Math.random()*arr.length) ,1) );
           }
           return newArr;
}
};
</script>
</head>
 
<body>
<inputtype="button" value="随机选择"id="input1">
<divid="div1"></div>
</body>
</html>

3) 通过history对象的pushState( )方法可以创建新的历史状态,通过window的popstate事件对象的states属性可以获得作为第一个参数传递给pushState( )方法的状态对象。

replace()方法：重写当前状态，参数与pushState( )方法的前两个参数相同。

浏览器兼容性：Firefox4+,Safari5+, Opera11.5+和Chrome支持。
在服务器环境下运行

var oDiv=document.getElementById(“div1”);
oInput.οnclick=function(){
 
   var arr=randomInt(35, 7 );
history. pushState(arr , ”” ); // 参数：数据，标题(浏览器还没有实现)，地址(可选,写什么值，网址后面就会加什么值)
oDiv.innerHTML=arr;
 
}
//window对象的popstate事件
window.popstate = function(event){
    oDiv.innerHTML= event.state;
}