原生JS基本属性、方法总结

一 . 数组的方法

属性	描述	参数	是否改变原数组	返回值
arr.push()	在数组的末尾追加一个元素	追加的元素	是	增加后的数组的长度
arr.pop()	删除数组末尾的一个元素		是	删除的数据
arr.unshift()	在数组的最前面添加一个元素	添加的元素	是	增加后的数组的长度
arr.shift()	删除数组最前面的一个元素		是	删除的那一项数据
arr.splice(a, b, c)	截取数组中的某些内容，按照数组的索引来截取	a:从哪一个索引位置开始b:截取多少个c:替换的新元素(可不写)	是	截取出来的数据组成的新数组
arr.reverse()	用来反转数组		是	反转过来的数组
arr.sort()	用来给数组排序	传入一个函数，决定排序方式	是	排序好的数组
arr.concat()	把多个数组进行拼接	要拼接的元素（数据或数组）	否	拼接以后的新的数组
arr.join()	把数组里面的每一项内容链接起来，变成一个字符串	用于拼接的字符串，不传参数默认是，连接	否	改变后的字符串
arr.indexOf()	查找数组中某一项的索引	查找的元素	否	该元素在数组中的索引，没有则返回-1
arr.forEach(function (item,index,arr) {})	遍历数组	item 就是数组中的每一项 index 就是数组的索引 arr 就是原始数组	否	空
arr.map(function (item,index,arr) {})	遍历数组	item 就是数组中的每一项 index 就是数组的索引 arr 就是原始数组	否	作为新数组的每一项
arr.filter(function (item,index,arr) {})	过滤数组	item 就是数组中的每一项 index 就是数组的索引 arr 就是原始数组	否	返回组成的新数组
arr.some(function (item,index,arr){})	判断数组	item 就是数组中的每一项 index 就是数组的索引 arr 就是原始数组	否	只要数组里面有一项满足条件 返回的就是 true 所有的都不满足 返回的就是 false
arr.every(function (item,index,arr){})	判断数组	item 就是数组中的每一项 index 就是数组的索引 arr 就是原始数组	否	每一项数据都满足条件 就返回 true 只要有一项不满足就返回 false

二 . 字符串方法

属性	描述	参数	是否改变原字符串	返回值
str.charAt()	找到字符串中指定索引位置的内容	索引值	否	对应 下标的字符
str.charCodeAt()	对应索引位置的 unicode 编码	索引值	否	对应索引位置的 unicode 编码
str.indexOf()	通过字符找到对应的索引	查找的字符串	否	找到就返回下标 没找到就返回 -1
str.substring(a,b)	截取字符串	从哪个索引开始，到哪个索引截止	否	截取出来的字符
str.substr(a,b)	截取字符串	从哪个索引开始，截取多少个	否	截取出来的字符
str.toUpperCase()	转换成大写		否	转换后的字符串
str.toLowerCase()	转换成小写		否	转换后的字符串
str.split()	字符串分割为数组	用于分割的符号	否	分割以后组成的新数组
str.replace(a,b)	字符替换	需要替换的字符(正则)，替换后的字符	否	替换后的新字符串
str.concat()	把多个字符串进行拼接	要拼接的元素（数据或字符串）	否	拼接以后的新的字符串
str.match(正则)	找到字符串中符合正则条件的内容返回	正则表达式	否	符合条件的内容组成的数组，没有则返回null
str.search(正则)	查找字符串中是否有满足正则条件的内容	正则表达式	否	有的话返回开始索引，没有返回 -1

三. BOM对象方法

属性（方法）	描述	参数	是否改变原对象	返回值
window.innerHeight	获取浏览器窗口的高度（包含滚动条）
window.innerWidth	获取浏览器窗口的宽度（包含滚动条）
document.documentElement.clientWidth	窗口的实际宽度（不包含滚动条）
document.documentElement.clientHeight	窗口的实际高度（不包含滚动条）
document.body.clientWidth	body的实际宽度
document.body.clientHeight	body的实际高度
window.alert()	在浏览器弹出一个提示框	提示文本
window.confirm()	在浏览器弹出一个询问框	询问文本		true；false
window.prompt()	在浏览器弹出一个输入框	提示文本		输入的内容；null
window.location.href	浏览器地址栏内 url 地址的信息
window.location.reload()	重新加载一遍页面
window.history.back()	回退历史记录
window.history.forward()	去到下一个历史记录
window.navigator.userAgent	获取浏览器的整体信息
window.navigator.appName	获取浏览器的名称
window.navigator.platform	获取当前计算机的操作系统
document.body.scrollTop	页面向上滚动的距离
document.documentElement.scrollTop	页面向上滚动的距离
document.body.scrollLeft	页面向左滚动的距离
document.documentElement.scrollLeft	页面向左滚动的距离
window.open()	在新窗口打开一个网页	url地址
window.close()	关闭当前窗口
window.onresize	浏览器窗口大小改变事件
window.onscroll	浏览器页面滚动事件

四. DOM对象方法

方法（属性）	描述	参数	是否改变原对象	返回值
document.getElementById()	通过标签的 id 名称来获取标签	id名	具体元素	对应标签
document.getElementsByClassName()	通过标签的 class 名称来获取标签	class名	伪数组	获取到的一组元素
document.getElementsByTagName()	通过标签的 标签名称 来获取标签			获取到的是一组元素
document.querySelector(‘div’)	按照css选择器的方式来获取元素	css选则器	一个元素	页面中第一个满足条件的元素
document.querySelectorAll(‘div’)	按照css选择器的方式来获取元素	css选择器	伪数组	获取到的一组元素
div.innerHTML	获取元素内部的 HTML 结构		HTML结构
div.innerText	获取元素内部的文本		字符串
div.getAttribute(‘a’)	获取元素的某个属性	属性名		属性值
div.setAttribute(a,b)	给元素设置一个属性	属性名，属性值		undefined
div.removeAttribute(‘class’)	移除元素的某个属性
div.style.css属性	给元素添加 css 行内样式
div.className	查询（修改）元素的 class 值的
div.childNodes	获取所有子一级节点		伪数组
div.children	获取所有子一级 元素节点		伪数组
div.firstChild	获取子一级的 第一个节点		一个节点
iv.lastChild	获取子一级的 最后一个节点		一个节点
div.firstElementChild	获取子一级 第一个元素节点		一个元素节点
div.lastElementChild	获取子一级 最后一个元素节点		一个元素节点
.nextSibling	获取 下一个兄弟节点
div.previousSibling	获取 上一个兄弟节点		一个节点
div.nextElementSibling	获取 下一个元素节点		一个元素节点
div.previousElementSibling	获取 上一个元素节点		一个元素节点
div.parentNode	获取 父节点		一个元素节点
div.attributes	获取 元素节点 的所有 属性节点		对象
eleNode.nodeType	获取节点的节点类型
eleNode.nodeName	获取节点的节点名称
eleNode.nodeValue	获取节点的值
document.createElement(‘div’)	创建一个元素节点	节点名
document.createTextNode(‘我是一个文本’)	创建一个文本节点	文本内容
div.appendChild()	向一个元素节点的末尾追加一个节点	追加的节点		追加的节点
div.insertBefore(a, b)	向某一个节点前插入一个节点	要插入的节点，插入在哪一个节点的前面		插入的节点
iv.removeChild()	移除某一节点下的某一个节点	要移除的子节点		移除的节点
iv.replaceChild(oSpan, oP)	将页面中的某一个节点替换掉	新节点，旧节点
window.getComputedStyle(元素, null).要获取的属性	获取元素的非行间样式			属性值
元素.currentStyle.要获取的属性	获取元素的非行间样式			属性值
div.clientWidth	获取元素的宽度（内容+padding）			属性值
div.clientHeight	获取元素的高度（内容+padding）			number
div.clientLeft	获取元素左边框的宽度			number
div.clientTop	获取元素上边框的宽度			number
node.cloneNode()	复制节点	boolean。 true：它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。	节点对象	拷贝的节点

五. 数组和字符串都能使用的方法

方法	描述	参数	是否改变原对象	返回值
indexOf()	查找数组（字符串）中某一项的索引	查找的字符	否	找到就返回下标 没找到就返回 -1
concat()	把多个数组（字符串）进行拼接	要拼接的元素（字符串或数组）	否	拼接以后的新的数组（字符串）
slice(a,b)	截取数组（字符串）	开始截取的位置 ，结束截取的位置 （包前不包后）	否	截取后的新的数组（字符串）

六 . 常见事件（EVENT）

事件	描述
load	页面全部资源加载完毕
scroll	浏览器滚动事件
resize	浏览器窗口大小改变事件
click	鼠标点击事件
dbclick	鼠标双击事件
contextmenu	鼠标右键单击事件
mousedown	鼠标左键按下事件
mouseup	鼠标左键抬起事件
mousemove	鼠标移动事件
mouseover	鼠标移入事件
mouseout	鼠标移出事件
mouseenter	鼠标移入事件
mouseleave	鼠标移出事件
keyup	键盘抬起事件
keydown	键盘按下事件
keypress	键盘按下再抬起事件
change	表单内容改变事件
input	表单内容输入事件
submit	表单提交事件
blur	表单失去焦点事件
focus	表单获得焦点事件
touchstart	触摸开始事件
touchend	触摸结束事件
touchmove	触摸移动事件
e.offsetX	相对于你点击的元素的左边框内侧距离
e.offsetY	相对于你点击的元素的上边框内侧距离
e.clientX	相对于浏览器窗口左侧距离
e.clientY	相对于浏览器窗口顶部距离
e.pageX	相对于整个页面左侧距离
e.pageY	相对于整个页面顶部距离

七 . 兼容写法

获取键盘码的兼容写法

document.onkeyup = function (e) {
  e = e || window.event
  // 获取键盘码兼容写法 
  keyCode = e.keyCode || e.which

事件对象兼容写法

document.keyup = function (e) {
  // 事件对象的兼容写法
  e = e || window.event

事件监听兼容写法

function on(ele,type,fn){
    // 事件监听兼容写法 
  ele.addEventListener ? ele.addEventListener(type,fn) : ele.attachEvent("on"+type,fn)
}

获取页面滚动距离兼容写法

// 获取页面向上滚动的距离（向左同理）
var top = document.documentElement.scrollTop || document.body.scrollTop

获取元素非行间样式兼容写法

// 获取元素非行间宽度（其余样式同理）兼容写法
var width = window.getComputedStyle ? window.getComputedStyle(dv).width : dv.currentStyle.width
 console.log(width)

获取事件对象属性（target）兼容写法

var target = e.target || e.srcElement

阻止默认事件兼容写法

// 阻止默认事件兼容写法
e.preventDefault ? e.preventDefault() : e.returnValue = false

八 . 三大系列

        box.onclick = function(e){
            e = e || window.event
            // client
            // clientX clientY 光标到浏览器窗口左边/上边的距离
            console.log(e.clientX)

            // clientWidth  clientHeight   元素的内容 + padding
            console.log(box.clientWidth)

            // clientLeft   clientTop     元素的 左边框和上边框
            console.log(box.clientLeft , box.clientTop);


            // offset
            // offsetX offsetY    光标到元素左边/上边的距离(不包含边框)
            console.log(e.offsetX,e.offsetY)

            // offsetWidth    offsetHeight 元素实际的宽和高  内容 + padding + border
            console.log(box.offsetWidth,box.offsetHeight)

            // offsetLeft   offsetTop   元素距离有定位的父元素的左边和上边的距离 如果所有父级元素都没有定位  就是相对 body 左边和上边的距离
            console.log(box.offsetLeft,box.offsetTop)

            // box.offsetParent  拿到有定位的父元素 如果父级元素都没有定位 拿到的就是 body
            console.log(box.offsetParent)


            // page
            // e.pageX e.pageY  光标到页面左边和上边距离
            console.log(e.pageX,e.pageY)