如何用js原生替换JQuery的16种方法的实例详解

1.选取元素

querySelectorAll方法返回的是NodeList对象，需要转换为数组。

2.创建元素

3.添加事件

4.get/set属性

5.添加和移除样式Class

DOM元素本身有一个可读写的className属性，可以用来操作class。

HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。

6.追加元素

尾部追加元素：

头部追加元素：

7.克隆元素

8.移除元素

9.获取父级元素

10.获取上一个/下一个元素（Prev/next element）

11.XHR and AJAX

12.清空子元素

13.检查是否有子元素

14.$(document).ready

DOM加载完成，会触发DOMContentLoaded事件，等同于jQuery的$(document).ready方法。

15.数据储存

jQuery对象可以储存数据。

HTML 5有一个dataset对象，也有类似的功能（IE 10不支持），不过只能保存字符串。

16.动画

jQuery的animate方法，用于生成动画效果。

jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。

如果需要对动画使用回调函数，CSS 3也定义了相应的事件。