DOM

1、选取元素

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

2、特殊

document.body
document.documentElement

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

var btn = document.getElementById('btn');
var div = document.getElementById('div');
btn.onclick = function(){
    div.innerHTML = '2022-7-3';
}

4、属性

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码

BOM

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()