新选择器、classList和访问历史记录

javascript：

基础API提升

一、新选择器

1.document.querySelector(selector);

    返回第一个满足选择器条件的元素（返回一个dom对象）

2.document.querySelectorAll('.item');

    返回所有满足该条件的元素（返回一个元素类型是dom类型的数组）

3.$('.item')

    返回一个jQuery对象（返回dom元素的数组）

4.本质上jquery方式和qs方式都是获取DOM数组，只不过jquery会多一些其他成员

5.DOM数组的每一个成语注册事件不能像jquery一样直接注册，必须分别给每个元素注册

6.h5就是将我们经常需要的操作又包装一层

二、Element.classList

1.新H5中DOM对象多了一个classList属性，是一个数组

2.add   添加一个新的类名

3.remove   删除一个新的类名

4.contains   判断是否包含一个指定的类名

5.toggle   切换一个class  element.toggle('class-name',[add_or_remove]);

6.toggle    函数的第二个 参数true为添加  false为删除

三、访问历史

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态

在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史

1.window.history.forward();  //前进

2.window.history.back();  //后退

3.window.history.go();  //刷新

4.通过JS可以加入一个访问状态

5.history.pushState（放入历史中的状态数据，设置title（现在浏览器不支持））

四、Web Storage

1.localStorage   永久存储的

2.sessionStorage   浏览器打开时存储的，关闭时便没有了

3.getItem方式获取一个不存在的键，返回空字符串

4.[]返回 undefined

 

转载于:https://www.cnblogs.com/ck-999/p/5895772.html