原生JS的常用API
Dom相关：
选中dom元素：
给dom元素增添id，则该id就是JS的全局变量（企业开发不适合）：
portfolio.onclick = function () {
portfolioBar.className = 'bar state-1'
}
ES5以后新增的选择器选中（和CSS选择器规则一致）：
返回单个对象
var topNavBar = document.querySelector('#topNavBar')
返回所有数组
var elementList = document.querySelectorAll(selectors)
ES3时使用的选中方式：
选中id（返回单个对象）：
var element = document.getElementById(id);
选中类名（返回数组）：
var elements = document.getElementsByClassName(names);
选中标签名（返回数组）：
var elements = element.getElementsByTagName(tagName)
选中name属性（返回数组）：
varelements= document.getElementsByName(name)
监听dom元素的事件：
dom标准0的写法：xxx.onclick =()=>{}
dom标准2的写法：document.addEventListener('onclick ', ()=>{} })
区别：标准0的只能监听1个事件，因为他维护的是一个属性。 标准2的可以维护一个事件队列，所以可以监听多个事件。
监听点击事件：
portfolio1.onclick = function (ev) {
console.log(ev)
}
监听鼠标移入事件：
liTags[i].onmouseenter = function (ev) {
console.log(ev)
}
监听鼠标移出事件：
liTags[i].onmouseleave = function (ev) {
console.log(ev)
}
监听窗口滑动事件：
window.onscroll = function (ev) {
console.log(ev)
}
监听移动端手指触摸事件
监听移动端手指滑动事件
监听动画完成事件
div.addEventListener('transitionend', ()=>{} )
监听页面被切换事件
document.addEventListener('visibilitychange',function(){
console.log(document.hidden) //true false
})
浏览器事件触发后，回调函数时传入的ev参数：
ev.target 表示事件触发的dom元素（如果监听a标签，而点击了a里面的span，则此时返回的是span）
ev.currentTarget 表示监听时的dom元素（监听什么，拿到什么）
ev.preventDefault() 表示吞掉默认行为（比如监听a标签，使用该方法后，点击a标签不会自动跳转）
创建dom元素：
var a = document.createElement('a')
给a标签中间，增加文本内容
a.textContent = '你好'
给a增加id的属性：
a.id = 'a-id'
给a标签赋值href属性:
a.href = 'https://www.baidu.com'
把a标签插入到main标签的后面：
document.querySelector('main').appendChild(a)
获取span标签的属性节点name的值：
span.getAttribute("name")
修改span标签的属性节点name的值为123：
span.setAttribute("name","123")
改变dom元素的css样式：
elt.setAttribute("style", "color:red; border: 1px solid blue;");
（下面的方式，谷歌浏览器使用无效）
elt.style.cssText = "color: blue; border: 1px solid black";
dom时钟类api：
创建一个一次性时钟t，3000毫秒（3秒）后，执行函数fn;
function fn(){ alert("Hello") }
var t = setTimeout(fn, 3000);
创建一个重复执行闹钟，每3000毫秒后，执行fn函数
function fn(){ alert("Hello") }
var t =setInterval(fn, 3000);
配置一个一次性执行闹钟t，然后清除一个一次性执行闹钟t
var t = setTimeout(()=>{ console.log('hello') },3000);
clearTimeout(t);
配置一个重复执行闹钟t，然后清除一个重复执行闹钟t
var t =setInterval(()=>{ console.log('hello') }, 3000);
clearInterval(t);
dom元素的类相关api：
给元素a新增类：
a.classList.add(class)
给元素a删除类:
a.classList.remove(class)
给元素a重写所有类(bar和asd)：
a.className = 'bar asd '
dom元素寻找亲戚的api：
找到div标签的父亲
div.parentNode
dom元素其他api：
元素距离页面最顶部的距离
element.offsetTop
寻找dom元素a后面的兄弟标签，（注意该方法会连文本也算在兄弟标签内，所以如果要用需要使用套路遍历寻找到下个非文本标签）：
var brother = a.nextSibling
while(brother.nodeType === 3 ||brother === null){
brother = brother.nextSibling
}
“brother.nodeType === 3 || brother.nodeType！== null”的意思是，如果下一个兄弟是文本或者下个兄弟不是null，那么我继续遍历寻找下一个dom元素
寻找dom元素a前面的兄弟标签（注意点和上面一样）：
var brother = a.previousSibling
while(brother.nodeType === 3 || brother === null){
brother = brother.previousSibling
}
取出dom元素中的属性，使用该方法取属性，取的就是浏览器解析之前dom元素所赋值的属性：
let href = aTag.getAttribute('href')
将div2追加到div1的子元素中
div1.appendChild(div2)
深拷贝一个div1元素
var div_clone = div1.cloneNode(true)
div1是否包含div2，判断是否为后代的元素
div1.contains(div2) // true false
判断div1是否有儿子
div1.hasChildNodes() // true false
将div2插到div1子元素的最前面
div1.insertBefore(div2)
判断div1与div2 是否内容和属性完全一样（两者在堆区存储的内存地址不同）
div1.isEqualNode(div2)
判断div1与div2 是否为同一个div（两者在堆区存储的内存地址完全相同）
div1.isSameNode(div2)
删除div1的子元素div2(此时删除的div2，并没有从内存中释放，还是会存在内存里的，只是不存在于页面中)
div.removeChild(div2)
替换div1的子元素div2，替换成div3(此时的div2和上面一样，没有从内存中移除)
div1.replaceChild(div3,div2)
将div1里面的所有相领文本节点合并(历史原因出现的API，以前程序员写代码会出现多个相邻文本节点的情况)
div1.normalize()
Bom相关：
打开新的页面，并跳转到指定url：
window.open('http://www.baidu.com')
让用户输入文本，并获取该文本
var text = prompt('请输入一段文本:')
往LocalStorage存东西(只能存储字符串)：
localStorage.setItem('容器1', JSON.stringify({name:'linshiqi'}))
从LocalStorage取东西，取不到就返回字符串的null (只能存储字符串)：
JSON.parse(localStorage.getItem('容器1') || 'null')
字符串（对象）相关：
获取字符串h的unicode编码（十进制）
'nihao'.charCodeAt(2)
获取字符串h的unicode编码（十六进制）
'nihao'.charCodeAt(2).toString(16)
获取字符串左右两边去除空格和换行符的结果
' 你好 '.trim()// '你好'
连接两个字符串，获取结果
'你'.concat('好')// '你好'
获取字符串的切片结果（第一个参数是开始并包含，最后一个参数是最后的前一个，不包含第二个参数）
'你好呀，我是xxx'.slice(0,2) // '你好'
替换字符串中的字符（其中第一个参数可以代入正则表达式，符合规则的都会被替换）
'你好呀，我是xxx'.replace('好','不好') //"你不好呀，我是xxx"
indexOf作用：
可以查找该字符串中是否包含某字符串，如果不包含返回-1，包含返回某字符串在该字符串中的起始位置
parseInt() 可以把一个字符串转换成整数。
parseFloat() 可以把一个字符串转换成小数。
typeof() 查看数据类型
数组相关：
向数组a的开头添加一个或更多元素，并返回新的长度。
a.unshift()
删除并返回数组a的第一个元素
a.shift()
向数组a的末尾添加一个或更多元素，并返回新的长度。
a.push()
删除并返回数组a的最后一个元素
a.pop()
颠倒数组a中元素的顺序。
a.reverse()
从数组a中添加/删除项目，然后返回被删除的项目(会改变原数组)。
a.splice( 规定添加/删除项目的位置, 要删除的项目数量, item1,.....,itemX:向数组添加的新项目)
可从已有的数组中返回选定的元素。
slice( 何处开始选取, 规定从何处结束选取)
遍历数组的所有元素
var a = [1,2,3,4,5]
a.forEach(function(value,key){
console.log('key:',key)
console.log('value:',value)
})
遍历数组后，返回每一项都经过函数处理并返回的数组
var a = [1,2,3,4,5]
var b = a.map(function(value,key){
return value * 2
})
遍历数组后，返回每一项都经过函数处理后过滤不需要项的数组
var a = [1,2,3,4,5]
var b = a.filter(function(value,key){
if (value > 2) return value
})
遍历数组后，每一项的返回结果都依次传递出来（可以模仿前面几种遍历，最灵活）
模仿filter：
var a = [1,2,3,4,5]
var b = a.reduce(function(arr,value){
if(value>2){arr.push(value)}
return arr
},[])
数组与字符串拼接，返回一个字符串，代入一个值后拼接数组中的每一项的值
var a = [1,2,3,4,5]
var b = a.join('+')
数组与数组拼接，返回一个数组（新的数组），代入一个数组后追加到原数组拷贝的数组后面
var a = [1,2,3,4,5]
var b = a.concat([3,2,1])
数组排序
升序：
var arr = [4,3,6,5,7,2,1];
arr.sort();
console.log(arr);
降序：
var arr = [4,3,6,5,7,2,1];
arr.sort();
arr.sort(function(a,b){
return b-a;
});
console.log(arr);
数字、布尔、symbol（对象）相关:
函数相关：
对象、原型相关：
删除对象中的key和value：
var obj = {name:'linsq',age:20}
delete obj['age']
查找对象中是否拥有该key：
'name' in obj // true
'age' in obj // false
遍历对象中的所有key和value，顺序是随机的：
for(let key in obj){
console.log(key,obj[key])
}
//name linsq
获取对象的类型（注意：null显示的是object，函数包括所有构造函数显示的是function）：
typeof obj //"object"
typeof Array //"function"
typeof Object //"function"
JSON相关：
用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify()
用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.parse()
布尔值其他五种类型中的false情况（如果不是下面五种，则代表是true）:
number：0、NaN
Sting： ''(空字符串)
null：null （该类型里没有true的值）
undefined：undefined（该类型里没有true的值）
