JS基本知识点回顾（Ⅲ）
本文用于复习JS相关知识点，相当于知识简单的梳理. So, It's not be Detailed introduction
定时器
JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。
setTimeout()
setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
var i = 1
var timer = setInterval(function() {
console.log(i++);
}, 1000);
上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮
clearTimeout(),clearInterval()
setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
函数节流
function throttle(fn, delay) {
var timer = null
return function(){
clearTimeout(timer)
timer = setTimeout(function(){
fn(arguments)
}, delay)
}
}
function fn(){
console.log('hello ')
}
var fn2 = throttle(fn, 1000)
fn2()
fn2()
fn2()
DOM
- document 对象
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。 - document对象常用属性
document对象有很多属性来描述文档信息，介绍几个常用的
document.doctype
document.title
document.characterSet
document.head
document.body
document.images
/*了解
readyState属性返回当前文档的状态，共有三种可能的值
1. loading：加载HTML代码阶段，尚未完成解析
2. interactive：加载外部资源阶段
3. complete：全部加载完成
*/
document.readyState
/*了解
compatMode 属性返回浏览器处理文档的模式，可能的值为
1. BackCompat：向后兼容模式，也就是没有添加DOCTYPE
2. CSS1Compat：严格模式，添加了DOCTYPE
*/
document.compatMode
- document.open()、document.close()、document.write()
document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容
document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。
document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
document.open();
document.write("hello");
document.write("world");
document.close();
除了某些特殊情况，应该尽量避免使用document.write这个方法。
- Element
除了document对象，在DOM中最常用的就是Element对象了，Element对象表示HTML元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作
Element有几个重要属性
1.nodeName：元素标签名，还有个类似的tagName
2.nodeType：元素类型
3.className：类名
4.id：元素id
5.children：子元素列表（HTMLCollection）
6.childNodes：子元素列表（NodeList）
7.firstChild：第一个子元素
8.lastChild：最后一个子元素
9.nextSibling：下一个兄弟元素
10.previousSibling：上一个兄弟元素
11.parentNode、parentElement：父元素
- 查询元素
getElementById()
var elem = document.getElementById("test");
getElementsByClassName()
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象）
var elements = document.getElementsByClassName('tab');
getElementsByTagName()
返回值是一个HTMLCollection对象
var paras = document.getElementsByTagName("p");
常见使用方式 - 修改样式
document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'
- 获取样式getComputedStyle
使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性 获取
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)
- class操作
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.classList.contains('active') // 判断是否拥有 class
页面宽高
image
element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight
document.body.scrollHeightelement.scrollTop 滚动的高度
document.body.scrollTopwindow.innerHeight 窗口的高度
window.innerHeighHTMLCollection 和 NodeList
节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。
NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性
HTMLCollection与NodeList基本相似
相同点： 都是类数组对象，节点的变化都会实时反映在集合中
不同点： 少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有
事件（东西太多只写要点）
- 事件流
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型
1.事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
2.事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
3.DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
image
-
DOM2事件处理程序
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作： -
addEventListener
-
removeEventListener
通过addEventListener添加的事件处理程序只能通过removeEventListener移除
image.png
- 要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为
document.querySelector('#btn').onclick = function (e) {
e.preventDefault();
}
- stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生
var handler = function (e) {
alert(e.type);
e.stopPropagation();
}
事件代理
看代码
<div class="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
<button id="add">add</button>
<script>
function $(selector){
return document.querySelector(selector)
}
function $$(selector){
return document.querySelectorAll(selector)
}
// $$('.box').forEach(function(node){
// node.onclick = function(){
// console.log(this.innerText)
// }
// })
//重点
$('.container').onclick = function(e){
console.log(this)
console.log(e.target)
if(e.target.classList.contains('box')){
console.log(e.target.innerText)
}
}
var i = 4
$('#add').onclick = function(){
var box = document.createElement('div')
box.classList.add('box')
box.innerText = 'box' + (i++)
$('.container').appendChild(box)
}
自定义事件
var EventCenter = {
on: function(type, handler){
document.addEventListener(type, handler)
},
fire: function(type, data){
return document.dispatchEvent(new CustomEvent(type, {
detail: data
}))
}
}
EventCenter.on('hello', function(e){
console.log(e.detail)
})
EventCenter.fire('hello', '你好')
动画
使用 setTimeout 实现(不推荐)
<div id="ball"></div>
<script>
var offsetX = 500 //要水平移动的距离
var moveOffset = 0 //当前已经移动的距离
var step = 5 //每次移动的距离
function move(){
if(moveOffset < offsetX){
ball.style.left = parseInt(getComputedStyle(ball).left) + step + 'px'
moveOffset += step
setTimeout(move, 5)
}
}
move()
</script>
requestAnimationFrame
<div id="ball"></div>
<script>
var offsetX = 500 //要水平移动的距离
var moveOffset = 0 //当前已经移动的距离
var step = 5 //每次移动的距离
function move(){
if(moveOffset < offsetX){
ball.style.left = parseInt(getComputedStyle(ball).left) + step + 'px'
moveOffset += step
requestAnimationFrame(move)
}
}
move()
