数组常用方法
| join() | 将所有数组元素结合为一个字符串它的行为类似 toString()，但是您还可以规定分隔符： | |
| push() | （在数组结尾处）向数组添加一个新的元素： | 方法返回新数组的长度： |
| pop() | 方法从数组中删除最后一个元素 | 返回“被弹出”的值： |
| shift() | 会删除首个数组元素，并把所有其他元素“位移”到更低的索引。 | 返回被“位移出”的字符串： |
| unshift() | 在开头）向数组添加新元素，并“反向位移”旧元素 | 返回新数组的长度。 |
| sort() | 数组排序 | |
| reverse() | 反转数组 | |
| concat() | 通过合并（连接）现有数组来创建一个新数组： | 它总是返回一个新数组。 |
| slice() | 用数组的某个片段切出新数组。可接受两个参数，比如 (1, 3)。 | 会从开始参数选取元素，直到结束参数（不包括）为止。 |
| splice() | 截取并添加，可用于向数组添加新项： | 返回一个包含已删除项的数组： |
| indexOf() （ES5新增） | ||
| lastIndexOf()（ES5新增） | ||
| forEach() （ES5新增） | ||
| map() （ES5新增） | 映射新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果 | 返回新数组，不会改变原始数组 |
| filter() （ES5新增） | ||
| every() （ES5新增） | 每一项都满足条件 | 布尔值 |
| some() （ES5新增） | 有满足条件的数据 | 布尔值 |
字符串常用方法
| charAt() | ||
| toLowerCase() | ||
| toUpperCase() | ||
| replace() | 字符串.replace(换下内容， 换上内容)字符串内第一个满足的换掉 | |
| trim() | ||
| split() | ||
| substr() | ||
| substring() | ||
| slice() |
数字常用方法
| random() | 0~1之间的随机小数（取不到1） | |
| round() | 四舍五入取整 | |
| ceil() | 向上取整 | |
| floor() | 向下取整 | |
| pow() | 取幂 | |
| sqrt() | 二次方根 | |
| abs() | 取绝对值 | |
| max() | 取最大值 | |
| min() | 取最小值 | |
| PI | 近视π的值 |
BOM操作
Browser Object Model
操作浏览器历史记录
操作浏览器滚动条
操作浏览器标签页的开启和关闭
...
| 获取浏览器窗口尺寸 | window.innerWidth | 获取可视窗口的宽度 |
| window.innerHeight | 获取可视窗口的高度 | |
| 开启和关闭标签页 | window.open('地址') | 开启标签页 |
| window.closed() | 关闭标签页 | |
| 浏览器常用事件 | window.onload = function () {} | 资源加载完毕 |
| window.onresize= function () {} | 可视尺寸改变 | |
| window.onscroll = function () {} | 滚动条位置改变 | |
| 浏览器的历史记录操作 | window.history.back() | 回退历史记录 |
| window.history.forward() | 前进历史记录 | |
| 浏览器卷去的尺寸 | document.documentElement.scrollTopdocument.body.scrollTop | 卷去高度 |
| document.documentElement.scrollLeftdocument.body.scrollLeft | 卷去宽度 | |
| 浏览器滚动到 | window.scrollTo(left, top) 不能滚动，瞬间定位window.scrollTo({ left: xx, top: yy, behavior: 'smooth' //定位方式}) 滚动到指定的位置 | left: 浏览器卷去的宽度top:浏览器卷去的高度 |
DOM操作
Document Object Model
操作 元素 修改样式
操作 元素 修改属性
操作 元素 添加事件
...
| 获取元素的方式 | document.getElementById('id名称') | 有，返回元素没有，返回null |
| document.getElementsByClassName('原始类名') | 有，返回元素没有，空的伪数组 | |
| document.getElementsByTagName('标签名') | 有，返回元素没有，空的伪数组 | |
| 满足选择器的第一个元素 | document.querySelector('选择器') | 有，返回第一个没有，null |
| document.querySelectorAll('选择器') | 有，返回元素没有，空的伪数组 | |
| 操作元素内容 | 获取：元素.innerText设置：元素.innerText = '新内容' | 操作元素文本内容 |
| 获取：元素.innerHTML设置：元素.innerHTML= '新内容' | 操作元素超文本内容 | |
| 操作元素属性 | 获取：元素.属性名设置：元素.属性名= ‘属性值’ | 原生属性 |
| 获取：元素.getAttribute('属性名')设置：元素.setAttribute('属性名', '属性值')删除：元素.removeAttribute('属性名') | 自定义属性 | |
| 操作元素类名 | 获取：元素.className设置：元素.className = '新类名' | |
| 获取：元素.className设置：元素.className = '新类名' | ||
| 操作元素行内样式 | 获取：元素.style.样式名设置：元素.style.样式名 = '样式值'注意：只能获取和设置元素的 行内样式 | |
| 操作元素的非行内样式 | 获取：window.getComputedStyle(元素).样式名注意：可以获取行内样式，也可以获取非行内样式 |
DOM操作 节点操作
| 作用 | 语法 | 返回值 | |
|---|---|---|---|
| 创建 节点 | 创建一个指点的标签 | document.createElement('标签名称') | 一个创建好的元素节点 |
| 插入 节点 | 把子节点放在父节点的内部，并且放在最后的位置 | 父节点.appendChild( 子节点 ) | |
| 把子节点放在父节点的内部，并且放在已存在的子节点前面 | 父节点.insertBefore( 子节点, 哪一个子节点前面 ) | ||
| 删除 节点 | 从父节点内删除某一个子节点 | 父节点.removeChild( 子节点 ) | |
| 把自己删除 | 节点.remove( ) | ||
| 替换 节点 | 在父节点内，替换节点 | 父节点.replaceChild( 换上节点, 换掉节点 ) | |
| 克隆 节点 | 复制一模一样的节点 | 节点.cloneNode( 是否克隆后代节点 ) | 克隆好的新节点 |
