HTML5脚本扩展---新增小型API
2016-04-23 17:05
543 查看
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的方法克隆对象
修改对象的引用会直接修改对象本身，对象的多个引用访问到的数据都是一样的。
如：
对象的引用，浅拷贝，深拷贝，递归<对象的引用>
5） IE7-不支持，想要兼容IE低版本的话，可以去JSON官网下载Json2.js文件引入本地文档使用
4. 自定义数据属性
HTML5规定，可以为元素添加非标准的属性，但要添加前缀 data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data开头即可。
访问和设置自定义属性：
自定义数据属性的作用：实现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+
3) 通过history对象的pushState( )方法可以创建新的历史状态,通过window的popstate事件对象的states属性可以获得作为第一个参数传递给pushState( )方法的状态对象。
replace()方法：重写当前状态，参数与pushState( )方法的前两个参数相同。
浏览器兼容性：Firefox4+,Safari5+, Opera11.5+和Chrome支持。
在服务器环境下运行
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.onload= 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.onclick=function(){
var arr=randomInt(35, 7 );
history. pushState(arr , ”” ); // 参数：数据，标题(浏览器还没有实现)，地址(可选,写什么值，网址后面就会加什么值)
oDiv.innerHTML=arr;
}
//window对象的popstate事件
window.popstate = function(event){
oDiv.innerHTML= event.state;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- table 单行 超出打点
- HTML5中与类相关的扩充classList
- html5背景视频使用总结
- html5的关于布局的研究(1)
- 使用HTML5中的classList操作CSS类
- h5上传图片及预览
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- 解决C:\fakepath路径加密问题，图片上传之前的预览功能的实现，html5 实现图片预览功能
- HTML5 图形组件-拓扑图等
- 浅谈：html5和html的区别
- 最全html5 meta设置详解 (转)
- H5在线编辑器优化总结
- 提升html5的性能体验系列之四使用原生ui
- 提升html5的性能体验系列之三流畅下拉刷新
- 提升html5的性能体验系列之二列表流畅滑动
- 提升html5的性能体验系列之一避免切页白屏
- h5屏蔽页面中数字当手机号的问题
- 【F2E】viewport 模板（通用 HTML5 初始 *.html 文件）
- HTML5之Canvas绘图(二) ——应用篇之七巧板
- 移动前端头部标签(HTML5 head meta)