-_-#【JS】HTML5 API
《JavaScript高级程序设计（第3版）》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item current">3</li>
</ul>
<button id="myButton">button</button>
<script>
/**
* getElementsByClassName()
* 支持 getElementsByClassName()方法的浏览器有 IE 9+、Firefox 3+、Safari 3.1+、Chrome 和 Opera 9.5+
*/
+function() {
var nodeList = document.getElementsByClassName('item current') // item && current
console.log(nodeList)
var nodeList = document.getElementsByClassName('item')
console.log(nodeList)
}(); /**
* classList
* 支持 classList 属性的浏览器有 Firefox 3.6+和 Chrome
* add(value)
* contains(value)
* remove(value)
* toggle(value)
*/
+function() {
var nodeList = document.getElementsByClassName('item')
nodeList.item(0).classList.add('current')
nodeList.item(2).classList.remove('current')
}(); /**
* document.activeElement document.hasFocus()
* 实现了这两个属性的浏览器的包括 IE 4+、Firefox 3+、Safari 4+、Chrome 和 Opera 8+
* 元素获得焦点的方式有页面加载、用户输入(通常是 通过按 Tab 键)和在代码中调用 focus()方法
* 默认情况下,文档刚刚加载完成时,document.activeElement 中保存的是 document.body 元 素的引用。
* 文档加载期间,document.activeElement 的值为 null
* 查询文档获知哪个元素获得了焦点,以及确定文档是否获得了焦点
* 通过检测文档是否获得了焦点,可以知道用户是不是正在与页面交互
*/
+function() {
console.log(document.activeElement)
console.log(document.hasFocus())
var button = document.getElementById('myButton')
button.focus()
console.log(document.activeElement === button)
console.log(document.hasFocus())
}(); /**
* document.readyState
* 支持 readyState 属性的浏览器有 IE4+、Firefox 3.6+、Safari、Chrome 和 Opera 9+
* IE4 最早为 document 对象引入了 readyState 属性。
* 然后,其他浏览器也都陆续添加这个属性, 最终 HTML5 把这个属性纳入了标准当中
* Document 的 readyState 属性有两个可能的值
* loading,正在加载文档
* complete,已经加载完文档
*/
+function() {
if (document.readyState == 'complete') {
console.log('complete')
}
}(); /**
* document.compatMode
* 陆续实现这个属性的浏览器有 Firefox、Safari 3.1+、Opera 和 Chrome
* 标准模式 CSS1Compat
* 混杂模式 BackCompat
*/
if (document.compatMode == 'CSS1Compat') {
console.log('Standards mode')
} else {
console.log('Quirks mode')
} /**
* 作为对 document.body 引用文档的<body>元素的补充,HTML5 新增了 document.head 属性, 引用文档的<head>元素
* 实现 document.head 属性的浏览器包括 Chrome 和 Safari 5
*/
var head = document.head || document.getElementsByTagName('head')[0]
console.log(head)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="list">
<li class="item" data-appId="12345" data-my-name="na">1</li>
<li class="item">2</li>
<li class="item current">3</li>
</ul>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3" style="margin-top:600px">box3</div>
<div id="box4">box4</div>
<script>
/**
* document.charseet
* document.defalutCharset
* 表示根据默认浏览器及操作系统的设置,当前文档默认的字符集 应该是什么
* 支持 document.charset 属性的浏览器有 IE、Firefox、Safari、Opera 和 Chrome。
* 支持 document.defaultCharset 属性的浏览器有 IE、Safari 和 Chrome
*/
console.log(document.charset, document.defaultCharset) // dataset
var firstLi = document.querySelector('.item')
firstLi.setAttribute('data-appId2', '54321')
firstLi.setAttribute('data-my-name2', 'nana')
// chrome DOMStringMap {appid: "12345", myName: "na", appid2: "54321", myName2: "nana"}
console.log(firstLi.dataset)
if (firstLi.dataset.appid) {
firstLi.dataset.appid = 111111
} var lastLi = document.querySelectorAll('.item')[2]
lastLi.dataset.appId = 'data-app-id'
lastLi.dataset.appid = 'data-appid' /**
* innerHTML
* 但是,不同浏览器返回的文本格式会有所不同。
* IE 和 Opera 会将所有标签转换为大写形式,
* 而 Safari、 Chrome 和 Firefox 则会原原本本地按照原先文档中(或指定这些标签时)的格式返回 HTML,包括空格 和缩进。
* 不要指望所有浏览器返回的 innerHTML 值完全相同
*
* 并不是所有元素都支持 innerHTML 属性。
* 不支持 innerHTML 的元素有:<col>、<colgroup>、 <frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>和<tr>。
* 此 外,在 IE8 及更早版本中,<title>元素也没有 innerHTML 属性
*/ /**
* outerHTML
* 支持 outerHTML 属性的浏览器有 IE4+、Safari 4+、Chrome 和 Opera 8+。
* Firefox 7 及之前版本都不 支持 outerHTML 属性
*/
document.getElementById('box1').outerHTML = '<p>This is a paragraph.</p>' /**
* scrollIntoView
* 支持 scrollIntoView()方法的浏览器有 IE、Firefox、Safari 和 Opera
*/
setTimeout(function() {
document.getElementById('box4').scrollIntoView()
}, 0)
</script>
</body>
</html>
-_-#【JS】HTML5 API的更多相关文章
- -_-#【JS】defer / async
引用JavaScript文件时的两个属性defer和async <script src="js1.js" defer></script> <scrip ...
- 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
(window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通 ...
- 【转】HTML5 API --- 页面可见性改变(visibilitychange)事件
[摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签 ...
- -_-#【JS】element.click()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- -_-#【JS】隐含全局变量
隐含全局变量与明确定义的全局变量有细微的不同,不同之处在于能否使用delete操作符撤销变量 使用var创建的全局变量(这类变量在函数外部创建)不能删除不使用var创建的隐含全局变量(尽管它是在函数内 ...
- -_-#【JS】isFinite
/** * isFinite(number) * 检查是否是无穷大 * 如果 number 是有限数字(或可转换为有限数字),那么返回 true * 如果 number 是 NaN(非数字),或者是正 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 【译】html5游戏入门
[译]html5游戏入门 原文链接 简介 如果你想用canvas做个游戏,那么来对地方了. 但是但是你至少知道javascript怎么拼写(╯‵□′)╯︵┻━┻ 既然没问题,那先来玩一下或者下载 创建 ...
- 【Demo】HTML5 拍照上传
本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...
随机推荐
- 阿基米德项目ALS矩阵分解算法应用案例
转自:https://github.com/ceys/jdml/wiki/ALS 阿基米德项目ALS矩阵分解算法应用案例 编写人:ceys/youyis 最后更新时间:2014.5.12 一.算法描述 ...
- [C++] [算法] KMP算法
KMP串匹配算法是一个经典的算法. 传统BF算法是传统的字符串匹配算法.很好理解.叶实现.但时间复杂度太高. 本文将从字符串模式字符串被称为.为了匹配字符串被称为主弦. KMP配时能够少移动从串的位置 ...
- ListView嵌套ListView优化
在做业务时候,一个ListView显示多种数据类型,我们想到的方法是ListView在嵌套一个ListView,对于子ListView 占父ListView的一行,就攻克了问题,可是这种逻辑是不是有点 ...
- Android网络(4):HttpClient必经之路----使用线程安全的单例模式HttpClient，及HttpClient和Application的融合
上文简介了HttpClient和Tomcatserver的交互,主角是HttpClient,然后它跟server交互有两种方式即get和post.所以这个HttpClient就相似于电脑上用的浏览器. ...
- gcc -I -L -l区别
我们用gcc编译程序时,可能会用到“-I”(大写i),“-L”(大写l),“-l”(小写l)等参数,下面做个记录: 例: gcc -o hello hello.c -I /home/hello/inc ...
- Linux 开机自检的设置（tune2fs和fsck）
tune2fs和fsck的用法 tune2fs--调整ext2/ext3文件系统特性的工具. -l <device> 查看文件系统信息 -c <count> 设置强制自检的 ...
- surfaceView和Camera配合进行摄像头的预览
首先是Camera类,在5.0上已经被废弃,不推荐使用但还是支持的.最新的是Camera2类,我还没有研究,据说用法完全不一样,反正也是一个坑跳入另外一个坑. 上面是简介和需要的权限,记得加上权限. ...
- JSP学习--常用作用域
page:当前页面,也就是只要跳到别的页面就失效了 request:一次会话,简单的理解就是一次请求范围内有效 session:浏览器进程,只要当前页面没有被关闭(没有被程序强制清除),不管怎么跳转都 ...
- 【转】 iOS使用AVFoundation实现二维码扫描
原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...
- ExtJs API 下载以及部署
ExtJs API 下载方法 1.进入sencha官网:https://www.sencha.com/ 2.点击“Docs”进入文档帮助页面:http://docs.sencha.com/ 3.点击左 ...