JS基本知识点回顾（Ⅲ）

作者: 凛冬已至_123 | 来源:发表于2018-06-25 18:04 被阅读0次

本文用于复习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.scrollHeight
element.scrollTop 滚动的高度
document.body.scrollTop
window.innerHeight 窗口的高度
window.innerHeigh
HTMLCollection 和 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()

网友评论

海纳百川

本文标题：JS基本知识点回顾（Ⅲ）

本文链接：https://www.haomeiwen.com/subject/vyiyyftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

JS基本知识点回顾（Ⅲ）

定时器

DOM

页面宽高

事件（东西太多只写要点）

动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

海纳百川