H5语法(移动端随便用):
getElementByClassName()
querySelector(‘选择器’) 返回指定选择器的第一个元素对象 格式：class:.box id:#nav
querySelectorAll('选择器')

document.body
document.documentElement

3、事件 (注册事件具有唯一性)

var btn = document.getElementById('btn');
var div = document.getElementById('div');
btn.onclick = function(){
    div.innerHTML = '2022-7-3';
element.innerText 去除html标签 同时去除空格和换行

element.innerHTML(常用) 能识别html标签 同时保留空格和换行

(表单里面的值 文字内容只能通过value修改) 

element.style JS修改style样式操作，产生的是行内样式，css权重比较高

element.className  会覆盖原来的类名

element.onfocus与element.onblur 失去焦点

element.属性 主要获得内置属性

element.getAttribute('属性') 主要获得自定义属性

element.setAttribute('属性','值') 设置属性

element.removeAttribute('属性')
5、自定义属性
(1)、H5语法：命名格式：data-开头

(2)、element.dataset 得到存放以data开头的自定义属性 ie11
6、节点操作
(1)、 父子节点

parentNode.children[0] 大儿子

parentNode.children[parentNode.children.length-1] 小儿子

(2)、增删改查节点

document.creatElement() 创建节点

node.appendChild(child) 尾部追加元素

node.inserBefore(child,指定元素) 指定位置插入元素

node.removeChild(child)删除元素

node.cloneNode(true/false) 深/浅拷贝

(3)、动态创建元素区别(面试)

innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组式拼接）

creatElement() 创建多个元素效率稍低一点点
1、addEventListener('click',fn,true:捕获阶段/false:冒泡阶段) (存在兼容性问题)

2、事件移除
var div = document.querySelectorAll('div');
        //添加事件古老方法
        div[0].onclick = function() {
            alert(11);
            div[0].onclick = null;//移除事件
        //添加事件(常用)
        div[1].addEventListener('click',fn);
        function fn()
            alert(22);
            div[1].removeEventListener('click',fn);//移除事件
3、dom事件流

(1)捕获阶段 下沉

(2)当前目标阶段

(3)冒泡阶段 上升

4、事件对象
var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e);
常见属性和方法：

e.target:返回触发事件的对象 this:返回绑定事件的对象

e.type:返回事件类型

e.preventDefault():阻止默认事件发生 连接跳转
5、阻止事件冒泡
e.stopPropagation()

e.cancelBubble()  IE678
6、事件委托
核心思想：利用事件流冒泡，通过父节点绑定事件，可以实现多个子节点完成相应功能
7、鼠标事件对象
e.pageX/e.pageY

mousemove事件
8、键盘事件和事件对象
onkeyup

onkeydown(优先) 按下键的那一刻就执行事件，此时还没把数据渲染到文本中

onkeypress 能区分字母大小写 不识别功能键

e.keyCode返回该键的ASCII码
window.addEventListener('load',function(){}); 比较死板，需要全部加载完

document.addEventListener('DOMContentloaded',function(){});DOM加载完就可以执行了 速度快 

window.addEventListener('resize',function(){}) 窗口大小变化
var timer = setTimeout(function(){},时间间隔(ms))

清除定时器 window.cleanTimeout(timer)

var timer = setInterval(函数名,时间间隔(ms));

停止定时器clearInterval(timer)
同步和异步
同步任务: log等等

异步任务：onclick等等
事件循环：主线程执行栈与任务队列保持联系，当任务队列有任务时，执行栈便从中取出任务并执行
location
location.href 返回整个URL

location.search 返回参数 query通过&符号分隔开来

location.assign()  可后退

location.replace() 不记录浏览历史，不可后退
navigator
userAgent 可以了解浏览器版本号 以及判断终端是移动端还是pc端
hoistory
开发OA系统需要用到
offset
offset获取元素位置  style改变元素大小位置
element.offsetParent 返回有定位的父级元素 父级都无定位则返回body

element.offsetTop 返回元素相对带有定位父元素上方的偏移

element.offsetLeft

element.offsetWidth 返回自身包括padding、border、内容的宽度，不带单位

element.offsetHeight
client 获取元素大小
element.clientWidth 返回自身包括padding、内容的宽度，不带单位

element.clientHeight 
立即执行函数：创建一个独立的作用域，都是局部变量
(function(){}) 或者 (function(){})()
物理像素比
window.devicePixelRatio() pc端为1
flexible源码分析
获取html根元素 
var docEl = document.documentElement;
function setRemUnit(){
   var rem = docEL.clientWidth / x; 将html页面划分为x等份
   docEl.style.fontSize = rem + 'px';
//页面尺寸大小变化，重置rem
window.addEventListener('resize',setRemUnit) 
//页面刷新，重置rem
window.addEventListener('pageshow',function(e))
    if(E.persisted){
        setRemUnit();
pageshow事件与load事件，pageshow兼容firefox
scroll事件 获取滚动距离
element.scrollHeight 实际文本高度 不包括边框 

element.scrollWidth 

element.scrollTop 滚上去模块的高度

document.pageYOffset 页面卷去的头部

document.pageXOffset
mouseenter
与mouseover的区别就是mouseenter不会冒泡，同理mouseleave也不会冒泡
function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (target == obj.offsetLeft) {
                clearInterval(obj.timer);
                if (callback) callback();
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 30);
案例：轮播图
1、手动调用事件 element.click();
2、节流阀：设置一个开关flag，控制程序的进行
3、窗口滑动：window.scroll(x,y) 不需要单位
移动端特效
触摸事件对象
touchstart 触摸

touchmove   拖拽

touchend 离开

e.touches

e.targetTouches 正在触摸的dom元素的手指列表

e.changedtouches
classList用法 H5新增,ie10+
element.classList.add('current') 
element.classList.remove('current') 
element.classList.toggle('current') //转换
移动端click延时300ms问题
解决方法：引入fastclick插件(js文件)
移动端开发插件like：swiper
移动端开发框架like：booststrap
1、引入相关文件(js,css)
2、引入3件套
3、填充内容、修改样式
sessionStorage生命周期：浏览器打开状态
localStorage生命周期：forever
setltem(key,value)
getltem(key)
removeltem(key)
clear()