数组拓展：

都不改变原数组

indexOf lastIndexOf forEach map filter reduce

伪数组没法用

indexOf：

从前往后寻找数值的下标，单个

/*indexOf(元素,start)作用:查找元素在数组中第一次出现时下标的位置，如果没有返回-1返回值:下标*/
var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
var res = arr.indexOf(2, 0)
console.log(res) //1

lastIndexOf：

从后往前寻找数值的下标，单个

/*lastIndexOf(元素,start)作用:查找元素在数组中最后一次出现时下标的位置，如果没有返回-1如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索返回值:下标*/var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
var res = arr.lastIndexOf(2)   
var res = arr.lastIndexOf(2, 10)
console.log(res) //10

forEach：

遍历数组 得到数值，下标， 数组

/*forEach 遍历数组arr.forEach(function(value,index,array) {}); */
var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
arr.forEach(function (value, index, array) {// value  每一个数组元素// index  下标// array  数组console.log(value, index, array)
})

map：

遍历数组 全部进行数值计算得到结果

/*映射 返回一个新数组map(function(value,index,array){ return ...})*/var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
var newArr = arr.map(function (value, index, array) {// return的值是新数组的数组元素return value * 2
})
console.log(newArr)

filter：

遍历数组进行过滤，符合条件的取出来

/* filter(function(value,index,array){ return 过滤条件})*/var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
// 过滤数组中值大于4的数组元素  返回过滤后的数组
var newArr = arr.filter(function (value, index, array) {return value >= 4
})

reduce：

遍历数组 将数组内的数据全部加起来

/* reduce(function(累加器,当前值，索引，数组){return ...},累加器初始值)*/
var arr = [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 2, 2, 3, 4, 5]
// 求和
var sum = arr.reduce(function (s, value, index, array) {return s + value
}, 0)
console.log(sum) //51  数组中所有数组元素的和//  累乘
var arr = [1, 2, 3, 4];
arr = arr.reduce(function (up, down, index) { return up * down; });
alert(arr);

字符串String：

一、如何创建字符串

1:字面量的创建方式 var str = “123”; var s=‘123’

2:构造函数的方式 new String()

二、属性

length 字符串的长度

三、方法

(查，替，截，转)

查：

indexOf lastIndexOf 查下标

charAt 返回字符

charCodeAt 返回ascall码

// 查
var str = 'A我是中国人,a我爱我的祖国中国人'
// var oStr = new String('中国人民解放军')   //字符串对象
// console.log(typeof str, typeof oStr)console.log(str.length) //字符串的长度  12str.indexOf('字符串', start)
// 查找字符串在指定父串中第一次出现的下标位置，没有，返回-1
console.log(str.indexOf('中国人', 3)) //12str.lastIndexOf('字符串',start)
// 查找字符串在指定父串中最后一次出现的下标位置，没有，返回-1
console.log(str.lastIndexOf('中国人', 8)) //2// charAt(下标)  通过下标返回指定位置的字符
console.log(str.charAt(3)) //国for (var i = 0, len = str.length; i < len; i++) {console.log(str.charAt(i))
}// charCodeAt(下标)  通过下标返回指定位置字符的编码值（ascall码）
console.log(str.charCodeAt(0))
console.log(str.charCodeAt(7))String.fromCharCode(112)    // '0' 返回acsall码的字符

替：

replace 替换

// 替
replace(旧串, 新串) 替换字符串有指定的字符串，一次只能替换一个console.log(str.replace('中国', 'hello'))

截：

substring 从最小下标截取到大的下标位置,下标无法是负值

substr 截取指定长度的字符串

slice 下标可以是负值， 总是从左向右截取

// 截
//substring(start,end)  从最小下标截取到大的下标位置(包含小的下标,不包含大的下标)
// 下标不能是负值，会返回空的
console.log(str.substring(4, 9)) //国人,a我//substr(start,length) 截取指定长度的字符串
console.log(str.substr(4, 9)) //国人,a我爱我的祖//slice(start,end) 下标可以是负值， 总是从左向右截取，(包含开始 不包含结束)console.log(str.slice(4, 9)) //国人,a我
console.log(str.slice(-9, -4)) //我爱我的祖

转：

toUpperCase() 小写字母转大写字母

toLowerCase() 大写字母转小写字母

split(‘切割符’,长度) 字符串转数组

// 转
// toUpperCase()  小写字母转大写字母
// toLowerCase()  大写字母转小写字母
// split('切割符',长度) 字符串转数组var str1 = 'Good Good Study,Day Day Up'
console.log(str1.toUpperCase())
console.log(str1.toLowerCase())
console.log(str1.split(' '))

Math:

js提供的系统对象，数学

Math.PI   圆周率
Math.abs()  绝对值求近似数
Math.round() 四舍五入
注:  负数  >0.5 进一   <=0.5 舍去
console.log(Math.round(4.5)) //5
console.log(Math.round(4.4)) //4
console.log(Math.round(-4.5)) //-4
console.log(Math.round(-4.500001)) //-5
console.log(Math.round(-4.4)) //-4Math.ceil() 向上取整
// 向上取整
console.log(Math.ceil(4.5)) //5
console.log(Math.ceil(4.4)) //5
console.log(Math.ceil(-4.5)) //-4
console.log(Math.ceil(-4.500001)) //-4
console.log(Math.ceil(-4.4)) //-4Math.floor()  向下取整
console.log(Math.floor(4.5)) //4
console.log(Math.floor(4.4)) //4
console.log(Math.floor(-4.5)) //-5
console.log(Math.floor(-4.500001)) //-5
console.log(Math.floor(-4.4)) //-5求最值
Math.max()  求最大值
扩展 Math.max.apply(null,数组)Math.min() 求最小值
扩展 Math.min.apply(null,数组)求随机数
Math.random()  取到 >=0 && <1的数万能公式   Math.floor(Math.random()*(max-min+1)+min)

Date:

Date对象和Math对象不一样，Date是一个构造函数，使用时需要实例化后才能使用其中具体的方法和属性，Date实例是用来处理日期和时间的

获取当前时间：

var date = new Date()

获取指定时间和日期：

var date=new Date('2022/8/8')

date实例的方法：

getFullYear()   获取年份
getMonth()    获取月份
getDate()    获取日期
getDay()     获取星期
getHours()    获取小时
getMinutes()   获取分钟
getSeconds()   获取秒数

毫秒数：

var date = new Date()
console.log(date.valueOf()) //现在时间距离1970年1月1日的毫秒数console.log(date.getTime())// 简单的写法 --最常用
var date1 = +new Date() //
console.log(date1)// h5 新增的
console.log(Date.now())

对象：

自定义对象，内置对象,浏览器对象

浏览器对象BOM：

BOM —浏览器对象模型

BOM的顶级对象是window

BOM下的子对象有：document ，history，location ，navigatior screen

跳转页面：

window.location.href(网页)
window可以不写
location.href(网页)

刷新页面：

location.reload(true)

获取浏览器信息：

navigator.userAgent

window的方法：

alert()   弹出框
confirm()   确认框
prompt()   输出框
open()   打开新窗口
close()    退出当前窗口

计时器：

setInterval(表达式，毫秒值) 间隙性计时器
clearInterval() 清除计时器
setTimeout(表达式，毫秒值) 一次性计时器（定时器）
clearTimeout()清除计时器

btn.onclick = function () {// 开启定时器timer = setInterval(function () {console.log('hello')}, 1000)}oBtn1.onclick = function () {// console.log(timer)// 关闭定时器clearInterval(timer)}

DOM：

什么是DOM：

文档对象模型（document Object model），是w3c组织推荐的处理可扩展标记语言的标准编程接口

w3c定义了一些列的dom接口，通过这些dom接口可以改变网页的内容，结构 和样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EYfJmyDV-1682995004279)(C:\Users\帅气的小刘\Desktop\demo\web\前端学习\image\dom树.png)]

• 文档 一个页面就是一个文档，DOM中使用document表示
• 节点：网页中的所有内容，在文档树中都是节点（标签，属性，文本，注释),使用node表示
• 标签节点: 网页中所有标签，称为元素节点 使用element表示

DOM把以上这些内容都看作是对象

获取元素：

为什么要获取元素？

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取该部分对应的元素，再对其进行操作

根据ID获取：

document.getElementById(id)
参数：id值，区分大小写的字符串
返回值:  元素对象  或者null

根据标签名：

document.getElementsByTagName('标签名')  或者 element.getElementsByTagName('标签名')
参数:标签名
返回值:元素对象集合（伪数组，数组元素是元素对象）

注意：因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

得到的元素对象是动态的

H5新增的获取元素方式：

document.getElementByClassName('类名')   根据类名返回元素对象集合document.querySelector('选择器')  根据指定选择器返回第一个元素对象document.querySelectorAll('选择器')  根据指定选择器返回所有元素对象集合

注意: 选择器要加符号 #box .nav

获取特殊元素(body,html)：

document.body    返回body元素对象document.documentElement  返回html元素对象

操作元素：

javascript 的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容，属性（这些操作都是通过元素对象的属性实现的）

改变元素内容（获取或设置）：

element.innerText 从起始位置到终止位置的内容，去掉html标签，空格和换行也会去掉element.innerHTML 从起始位置到终止位置的全部内容，包括html标签，保留空格和换行（解析html标签）

代码：

<body><button>显示当前系统时间</button><div>某个时间</div><script>// 当我们点击了按钮，div里面的文字会发生改变// 1获取元素var btn = document.querySelector('button')var oDiv = document.querySelector('div')// 2 注册事件btn.onclick = function () {// oDiv.innerText = '2022-8-10'// oDiv.innerHTML = '2022-8-10'// oDiv.innerText = "<a href='#'>超链接</a>"oDiv.innerHTML = "<a href='#'>超链接</a>"/* 区别:innerText不识别html标签，去掉空格和换行innerHTML识别html标签，保留空格和换行*/}</script></body>

常用的元素属性操作：

src  href
id   alt   title

获取属性的值：

元素对象.属性名

设置属性的值：

元素对象.属性名=值

操作表单元素：

<body><button>按钮</button><input type="text" value="输入用户名" /><script>//  点击按钮，操作文本框的内容  控制禁用状态// 1 获取元素var oBtn = document.querySelector('button')var oInput = document.querySelector('input')// 2注册事件oBtn.onclick = function () {// oInput.innerText = '我被点击了'  普通盒子  div标签里的内容// 表单里面的值，文本内容是通过value来修改的var v = '我被点击了'oInput.value = v//input 的内容改变之后，我想要btn按钮禁用  不能再点击// oBtn.disabled = truethis.disabled = true// this指向的是事件函数的调用者 oBtn}</script></body>

操作元素之修改样式属性：

行内样式：

element.style.样式属性   （采用驼峰命名法）
div.style.backgroundColor

类样式：

element.className ="类名"element.className="类名1 类名2"

排他思想：

先排除其他人，然后才设置自己的样式，这种排除其他人的思想称为 排他思想

• 给所有元素全部清除样式（干掉其他人）
• 给当前元素设置样式（留下自己）
• 顺序不能颠倒，先干掉其他人，再设置自己

//  1获取所有的按钮元素
var oBtns = document.querySelectorAll('button')
// oBtns得到的是伪数组，里面的每一个元素  oBtns[i]
for (var i = 0; i < oBtns.length; i++) {// 给每一个元素循环添加点击事件oBtns[i].onclick = function () {// alert(1)// 先把所有按钮的背景颜色去掉，干掉所有人for (var j = 0; j < oBtns.length; j++) {oBtns[j].style.backgroundColor = ''}// 给当前点击的元素this设置背景颜色为pink 留下自己this.style.backgroundColor = 'pink'}
}

换皮肤：

• 给4个小图片利用循环注册点击事件
• 当我们点击了这个图片，让页面背景改为当前图片
• 把当前图片的src路径取过来，设置为body的背景

// 1 获取元素
var imgArr = document.querySelector('.box').querySelectorAll('img')
// console.log(imgArr)
// 2循环注册事件
for (var i = 0; i < imgArr.length; i++) {imgArr[i].onclick = function () {// this就是点击的当前图片  this.src 当前的图片的路径// this.src赋值给bodydocument.body.style.backgroundImage = 'url(' + this.src + ')'}
}

自定义属性操作：

获取属性值：

element.属性 只能获取内置属性，没法获取自定义属性

element.属性   获取属性值   获取内置属性值(元素本身自带的属性)
element.getAttribute("属性")   主要获取自定义的属性（标准） ，我们程序员自定义的属性

设置属性值：

element.属性=“值”  设置内置属性值
element.setAttribute("属性",值)  设置自定义的属性

移除属性：

element.removeAttribute("属性")

设置H5自定义属性：

自定义属性 data- 开头作为属性名并且赋值

兼容性获取 element.getAttribute(‘data-index’)

H5新增 element.dataset.index 或者 element.dataset[‘index’]

element.dataset方法获取的是一个集合。

节点：

节点概述：

网页中所有的内容都是节点(标签，属性，文本，注释)，在Dom中，节点使用node来表示

HTML DOM树种的所有节点都可以通过js进行访问，所有的节点都可以被修改，也可以创建或者删除

节点拥有 nodeType(节点类型)，nodeName（节点名称），nodeValue(节点值) 这三个基本属性

• 元素节点 nodeType 值为1
• 属性节点 nodeType 值为2
• 文本节点 nodeType 值为3(文本节点包含文字，空格，换行等)

注意:实际开发中，节点操作主要操作的是元素节点

节点层级：

利用DOM树可以把节点划分为不同的层级关系，创建是父子兄层级关系

父级节点：

node.parentNode
//parentNode 属性可以返回某节点的父节点，是最近的一个父节点
//如果指定的节点没有父节点返回null

子节点：

所有子节点：

parentNode.childNodes (标准)   返回包含指定节点的子节点的集合，该集合为即时更新的集合注意:返回值里面包含思路所有的子节点，有元素节点，文本节点等
如果只想获取到里面的元素节点，需要专门处理

子元素节点：

parentNode.children (非标准)
parentNode.children是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回虽然children 是一个非标准。得到了各个浏览器的支持

第1个子节点：

parentNode.firstChild 返回第一个子节点，找不到返回null，也是包含了所有的节点

最后1个子节点：

parentNode.lastChild返回最后一个子节点，找不到返回null，也是包含了所有的节点

第1个子元素节点：

parentNode.firstElementChild  返回第一个子元素节点，找不到返回null

最后1个子元素节点：

parentNode.lastElementChild返回最后一个子元素节点，找不到返回null

注意：firstElementChild 和lastElementChild 这两个方法有兼容性问题，IE9以上才支持

实际开发中firstChild和lastChild 包含其他节点，操作不方便，firstElementChild 和lastElementChild又有兼容性问题，如何操作呢

解决方案：

如果想要第一个子元素节点 可以使用  parentNode.children[0]
如果想要最后一个子元素节点  parentNode.children[parentNode.children.length-1]

兄弟节点：

下一个兄弟节点：

node.nextSibling  包含元素节点或者文本节点

上一个兄弟节点：

node.previousSibling包含元素节点或者文本节点

下一个兄弟元素节点：

node.nextElementSibling  只有元素节点

上一个兄弟元素节点：

node.previousElementSibling只有元素节点

兼容问题：

 function getNextElementSibling(element) {var el = elementwhile ((el = el.nextSibling)) {if (el.nodeType === 1) {return el}}return null}

创建节点：

document.createElement("tagName")
document.createElement方法创建由tagName指定的HTML元素，这些元素原先不存在
是根据我们的需求动态生成的，  称为动态创建元素节点

添加节点：

node.appendChild(child)node.appendChild 方法 将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素node.insertBefore()
node.insertBefore 将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素

删除节点：

node.removeChild（）  从node节点中删除一个子节点，返回删除的节点

复制节点：

node.cloneNode() 返回调用该方法的节点的一个副本，称为克隆节点

**注意：**node.cloneNode() 括号里是空或者false 浅拷贝 只复制标签不复制里面的内容

括号里为true 深拷贝 既赋值标签又复制里面的内容

创建元素的三种方式：

document.write() 直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘

element.innerHTML是将内容写入某个dom节点，不会导致页面全部重绘

document.createElement() 创建多个元素效率会低，但是结构更清晰

注意:innerHTML效率要比createElement的高

Dom的总结：

文档对象模型(Document Object Model 简称Dom)是处理可扩展标记语言的标准编程接口W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式.关于dom操作，主要针对的是元素的操作， 主要有创建，增，删，改，查，属性操作，事件操作创建1：document.write2:innerHTML3:createElement增加
1：appendChild
2：innerBefore
删
removeChild
改主要修改dom的元素属性，dom元素的内容，属性，表单的值修改元素的属性  src  href title修改普通元素内容  innerHTML  innerText修改表单元素   value  type  disabled修改元素样式    style  className
查 获取查询dom的元素1：getElementById  getElementsByTagName2：querySelector querySelectorAll3：parentNode  children  previousElementSibling   nextElementSibling
属性操作自定义属性setAttribute  设置dom的属性值getAttribute  获取dom的属性值removeAttribute  移除属性

事件高级操作：

注册事件：

给元素添加事件(注册事件/绑定事件)

注册事件有两种: 传统方式和监听注册方式

传统方式：

• onclick 利用on开头的事件
• <button onclick="alert(123)"></button>
• btn.οnclick=function(){}
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

监听注册方式：

eventTaget.addEventListener(type,事件处理程序[,useCapture])将指定的监听器注册到eventTaget（事件目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数type  事件类型 字符串  比如click ，mouseover 注意不要on
listener 事件处理程序 事件发生时，会调用该监听函数
useCapture  可选参数，是一个布尔值默认是false，  后面学习

事件监听：

eventTaget.addEventListener(type,事件处理程序[,useCapture])将指定的监听器注册到eventTaget（事件目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数ie9+以下  element.attachEvent(ontype, 事件处理程序)type  事件类型 字符串  比如click ，mouseover 注意不要on
listener 事件处理程序 事件发生时，会调用该监听函数
useCapture  可选参数，是一个布尔值默认是false，  后面学习

兼容性解决方案：

function addEventListenerFn(element, eventName, fn) {// 判断当前浏览器是否支持addEventListener方法if (element.addEventListener) {element.addEventListener(eventName, fn)} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn)} else {// 相当于element.onclick = fnelement['on' + eventName] = fn}
}

删除事件:

传统方式：

eventTarget.onclick = null

监听注册方式：

eventTarget.removeEventListener(type,listener[,useCapture])
eventTarget.datachEvent(eventNameWithOn,callback)   // 低版本

兼容处理：

function removeEventListenerFn(element, eventName, fn) {// 判断当前浏览器是否支持if (element.removeEventListener) {element.removeEventListener(eventName, fn)} else if ((element, detachEvent)) {element.detachEvent('on' + eventName, fn)} else {element['on' + eventName] = null}
}

DOM事件流：

html中的标签都是相互嵌套的，我们可以想象成一个盒子装一个盒子，document是最外面的大盒子，当你点击一个div时，你也点击了div的父元素，甚至整个页面

事件流就是描述从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

事件冒泡：IE最早提出，事件开始由具体的元素接收，然后逐级向上传播到DOM最顶级节点的过程

事件捕获：网景最早提出，由DOM最顶级节点开始，然后逐级向下传播到具体的元素接收的过程

w3c采用折中的方式，制定了统一的标准， ----先捕获再冒泡

事件流会经历3个阶段:

• 捕获阶段
• 当前目标阶段
• 冒泡阶段

注意：

js代码中只能执行捕获或者冒泡的其中 一个阶段

onclick和attachEvent只能得到冒泡阶段

addEventListener(type,listener[，useCapture])第三个参数如果是true表示再事件捕获阶段调用事件处理函数，如果是false(默认是false)表示再事件冒泡阶段调用事件处理函数，

实际开发中，很少使用事件捕获，更关注事件冒泡

有些事件是没有冒泡的，onblur. onfocus,onmouseenter,onmouseleave

事件对象：

事件对象:事件发生后，跟事件相关的一些列信息数据的集合都被放到这个对象里面，这个对象就是事件对象

使用：

事件触发发生就会产生事件对象，并且系统会以形参的形式传递给事件处理函数

事件处理函数中声明一个形参来接收事件对象

兼容处理：

window.event 获取实践对象 对于低版本

e.srcElement 返回触发事件的对象 非标准 ie6~8

// 获取对象返回触发事件的对象
div.onclick = function (e) {e = e || window.eventvar target = e.target || e.srcElementconsole.log(target)
}//  阻止事件冒泡
if (e && e.stopPropagation) {e.stopPropagation()
} else {window.event.cancelBubble = true
}

事件对象的属性和方法：

e.target       返回触发事件的对象  标准
e.srcElement   返回触发事件的对象   非标准 ie6~8e.type         返回事件的类型  比如 click mouseover  不带one.preventDefault（）  阻止默认行为,不让链接跳转
e.returnValue = false   阻止默认行为，不让链接跳转
return false   都可以e.stopPropagation（）  阻止事件冒泡
e.cancelBubble = true //非标准  取消冒泡  

事件委托：

事件委托: 把事情委托给别人，代为处理

事件委托也称为事件代理，在jQuery里面称为事件委派

不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行

原理：

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素

作用：

1:只操作了一次dom，提高了程序的性能
2：动态新创建的子元素，也拥有事件

鼠标事件对象：

event 事件对象是事件相关的一系列信息的集合

鼠标事件对象：

e.clientX   返回鼠标相对于浏览器窗口可视区域的X坐标
e.clientY   返回鼠标相对于浏览器窗口可视区域的Y坐标
e.pageX     返回鼠标相对于文档页面的X坐标  ie9+支持
e.pageY    返回鼠标相对于文档页面的Y坐标  ie9+支持
e.screenX   返回鼠标相对于电脑屏幕的X坐标
e.screenY   返回鼠标相对于电脑屏幕的Y坐标

其他：

contextmenu 我们可以禁用右键菜单

selectstart 禁止选中文字

// contextmenu  我们可以禁用右键菜单
document.addEventListener('contextmenu', function (e) {e.preventDefault()
})
// selectstart 禁止选中文字
document.addEventListener('selectstart', function (e) {e.preventDefault()
})

键盘事件：

onkeyup   键盘按键松开时触发
onkeydown  键盘按键按下时触发
onkeypress  键盘按键按下时触发  但是它不识别功能键  比如 ctrl shift 箭头等

键盘事件对象：

keyCode  返回该键的ASCII值

注意:

• onkeydown 和onkeyup不区分字母大小写，onkeypress区分字母大小写
• 实际开发中，更多的使用keydown和keyup能识别所有的键
• keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

元素偏移量offset：

offset就是偏移量，使用offset的相关属性可以动态的得到该元素的位置（偏移），大小等.

element.offsetTop  返回元素相对带有定位父元素上方的偏移
element.offsetLeft  返回元素相对带有定位父元素左边的偏移包含padding +border+width
element.offsetWidth   返回自身包括padding 边框  内容区的宽度，返回的值不带单位
element.offsetHeight   返回自身包括padding 边框  内容区的高度，返回的值不带单位

offset和style的区别：

offset是只读的，不能赋值

style可以进行赋值，并且只能是行内样式 width设置的多少，style.width就是多少

console.log(element.style.width)// element.offsetWidth = 400
element.style.width = '400px'

client系列：

element.clientTop
element.clientLeft包括padding + 内容区的宽度、高度  返回的值不带单位
element.clientWidth   
element.clientHeight

scroll系列：

element.scrollWidth   内容占的宽度  内容少的时候是width+padding  返回的值不带单位
element.scrollHeight    内容占的高度  内容少的时候是height+padding   返回的值不带单位element.scrollTop     滚动上侧卷过的距离
element.scrollLeft    滚动左侧卷过的距离

页面滚动的距离 window.pageYOffset