元素尺寸/坐标、滚动条、可视区尺寸
//获取可视口尺寸
window.innerWidth //低版本ie不兼容
window.innerHeight //低版本ie不兼容
document.compatMode === 'BackCompat' //向后兼容模式、怪异模式
document.body.clientWidth //适用于怪异模式
document.documentElement.clientWidth //标准模式下，任意浏览器都兼容 <!DOCTYPE html>
//查看元素几何尺寸
div.getBoundingClientRect() //返回一个对象,有坐标信息、宽高
div.offsetWidth //获取元素的整体宽度，包括内容宽度、内边距和边框宽度
div.offsetHeight
//查看元素位置
div.offsetLeft //获取元素相对于其`offsetParent`元素的左侧偏移量
div.offsetTop //对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
div.offsetParent //求最近的有定位的父级元素，没有的话返回body
//查看滚动条位置
window.pageXOffset //查看横向滚动条位置
window.pageYOffset //查看纵向滚动条位置
//让滚动条滚动
window.scroll(x,y) //滚动到该位置，window.scrollTo()一样
window.scrollBy(x,y) //累加滚动
脚本化CSS
//读写
div.style //类数组，里面包含各种可以读写css的方法，仅行间样式
dom.style.prop
//只读取
window.getComputedStyle(div,null)
//返回值是一个`CSSStyleDeclaration`对象，它包含了指定元素的所有计算后样式属性及其值。
//第一个参数是要获取的元素节点，第二个是表示要获取的伪元素的名称。
//通常不需要使用这个参数，大多数情况下传入`null`即可。
事件
给元素绑定事件
ele.onXXX = function(event){}。一种事件只能绑定一个处理函数，后面的会覆盖前面的。可以写在行间上。通过这种方式解除ele.onXXX = false/''/null- 监听的方式 -->
div.addEventListener(事件类型, 处理函数, false)。解除时通过ele.removeEventListener(type,fn,false)需要与绑定的一一对应,匿名函数无法解除，因为两个匿名函数是两个不同的函数
事件冒泡、事件捕获
事件冒泡，结构上（非视觉上）嵌套关系的元素，自子元素冒泡向父元素。focus,blur,change,submit,reset,select等事件不冒泡。 阻止事件冒🫧 ⬇️
div.onclick = function(e){
e.stopPropagation()
}
事件捕获，结构上（非视觉上）嵌套关系的元素，自父元素捕获至子元素，IE浏览器没有，谷歌有。
div.addEventListener(事件类型, 处理函数, true) 第三个参数true就开启了捕获
阻止默认事件，行间事件可以在函数中return false的方式。 addEventListener可以使用e.preventDefault()方式。
事件源对象，e.target。比如点击事件，点击子元素会向父元素冒泡，这时父元素的事件源就是子元素（点击事件绑定在了父元素）。可以进行事件委托。
一些常用事件
鼠标 ⬇️
- onmouseover
- onmouseout
- onmousemove
- onclick
- onmousedown
- onmouseup
键盘 ⬇️
- onkeydown 可以响应任意键盘按键,which对应唯一键
- onkeypress 只可以响应字符类键盘按键，有asc码(charCode)的 --> String.fromCharCode(asc码) 方法可以转换成对应字符
- onkeyup
input ⬇️
- oninput
- onchange
- onfocus
- onblur
窗体操作类（window上的） ⬇️
- onscroll 滚动时触发
- onload 会等renderTree构建完之后，dom的所有资源下载完之后，页面全部就绪后，该load会触发。效率低，返异步。
