webapi

less

// out: ./ 生成当前路径css // out: false 不生成css

&:hover 当前标签

@变量名：数据； 定义变量

import '路径' 引入

DOM(页面文档对象模型）

获取元素 document.querySelector('css标签')

类名

修改 className

添加 元素.classList.add('类名')

删除 .remove('')

切换 .toggle('')

判断 .contains('')

修改

内容

对象.innerText='' 不识别标签 对象.innerHTML=''

属性

对象.style.属性=''

自定义

对象.dataset.自定义=''

定时器

const 标识=setInterval(函数，间隔时间)

const 标识=setTimeout(函数，间隔时间)

关闭 clearInterval(标识)

事件

用户的动作

自动触发 对象.click()

元素对象.addEventListener('事件类型',执行函数)

click 单击 dblclick 双击

mouseenter mouseover(支持冒泡) 鼠标经过

mouseleave mouseout 离开

mousemove 移动

keydown 键盘按下 keyup 抬起

事件流（事件触发后的流程)

function(e)

e.target 最先触发的元素

e.stoppropagation() 阻止冒泡

e.preventDefault() 阻止默认行为

 ul.addEventListener('click', e =>  {
   // e.target.tagName 判断是不是要点击的标签 
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'blue'
      }
    })

页面

加载完成 load

尺寸改变 resize

滚动 scroll

移动端

tuchstart 按下

touchmove 移动

touchend 离开

表单

focus 获得焦点 blur 失去焦点

change 发生改变 input 输入事件

.trim()去除字符串两端空格

.checked=true   选中
.disabled=true  禁用

日期

Date() 当前时间

Date('6:6:6') Date(2001,3,31,6,6,6) 指定时间

对象.toLocaleSting() 转为本地时间

getDate() 以数值返回天（1-31）

getDay() 以数值获取周名（0-6）

getFullYear() 获取四位的年（yyyy）

getHours() 获取小时（0-23）

getMilliseconds() 获取毫秒（0-999）

getMinutes() 获取分（0-59）

getMonth() 获取月（0-11）

getSeconds() 获取秒（0-59）

getTime() 获取时间（从 1970 年 1 月 1 日至今）

节点

1.父节点

子节点.parentNode

2.子节点

父节点.childNodes 所有子节点

父节点.children 该标签子节点

• 获取首子节点：parentNode.firstChild
• 获取尾子节点：parentNode.lastChild
• 获取首尾子元素节点（兼容）

• • 首：parentNode.children[0]
  • 尾：parentNode.children[parentNode.children.length - 1]

• 获取首尾子元素节点（ie9+）

• • 首：parentNode.firstElementChild
  • 尾：parentNode.lastElementChild

3.兄弟节点

• 上 / 下一个兄弟节点（兼容）返回当前元素的上 / 下一个兄弟节点，找不到则返回null

• • 上：node.previoussibling
  • 下：node.nextsibling

• 上 / 下一个兄弟元素节点（ie9+）返回当前元素上 / 下一个兄弟元素节点，找不到则返回null

• • 上：node.nextElementSibling
  • 下：node.previousElementSibling

4.创建节点

document.createElement('HTML元素')

5.添加节点

将一个节点追加到父节点的子节点列表未尾，似 css 的 after伪元素

追加节点：node.appendChild(child)

将一个节点添加到父节点的指定子节点前面，似 css 里面的 befor

插入节点：node.insertBefore(child, 指定索引)

6.删除节点

从 node 节点中删除一个子节点

语法：node.removeChild(child)

返回：删除的节点

例：ul.removeChild(ul.children[0]);（删除 ul 里第一个子元素节点）

7.克隆节点

返回调用该方法的节点的一个副本，也称为克隆节点 / 拷贝节点

语法：node.cloneNode()

• 如果括号参数为空或者为 false，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点
• 如果括号参数为 true，则是深度拷贝，会复制节点本身以及里面所有的子节点

BOM(浏览器对象模型）

本地存储

localStorage （长久保存）

sessionStorage （临时保存)

localStorage.setItem("属性名",'属性值')

localStorage.getItem("属性名")

localStorage.removeItem("属性名") 删除

JSON.stringify(数据) 转字符串

JSON.parse(数据) 转对象

location.href 地址栏内容

reset() 重置表单

正则