@(HTML5)[HTML5 新增方法]
[TOC]
十四、 HTML 5 新增方法以及历史管理
新增的获取元素的方法
静态获取的方法:
- document.querySelector() 选择单个元素
- document.querySelectorAll() 选择一组元素
动态获取的方法: - document.getElementsByClassName() 通过类名选择
// 通过 getELementBy 的方法是动态获取的 HTMLCollection
// 通过 querySelector 的方法获取的是静态的 NodeList
classList
- length : class的长度
- add() : 添加class方法
- remove() : 删除class方法
- toggle() : 切换class方法
- contains() : 判断类名是否存在返回bool值
JSON
- parse() : 把字符串转成json
字符串中的属性要严格的加上引号 - stringify() : 把json转化成字符串
会自动的把双引号加上
与eval的区别
eval():对任何的字符串进行解析变成js
parse():字符串中的属性要严格的加上引号
其他浏览器兼容:下载json2.js
历史管理
onhashchange :改变hash值来管理
history :历史管理
服务器下运行
pushState : 三个参数 :数据 标题 地址(可选)
replaceState: 替换
pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。
onpopstate事件 : 读取数据 event.state
history:
- back() 相当浏览器的后退按钮
- go() 参数 0当前索引值 1下一页 -1上一页
- forward( ) 相当浏览器的前进按钮