webapi的作用和分类#

DOM是什么#

DOM树：浏览器对应html标签树生成的对象树#

DOM对象：浏览器对应html标签生成的对象（再增加一些方法）#

注：CSS修改的内容在style标签内

document.querySelector(‘css选择器’)：获取匹配的首个元素#

获取到的元素可以直接修改

多选一也用css选择的方法

document.querySelectorAll(‘css选择器’)：获取匹配的多个元素#

获取到的是伪数组，需要遍历修改

document.getElementBy XX ( )#

innerText 不解析标签#

innerHTML 解析标签#

操作元素常用属性#

设置随机图片，可以利用${}

操作元素样式属性（CSS样式）#

通过style属性操作CSS（名字带短横线的换成小驼峰）#

通过类名className操作CSS 覆盖旧的类名#

在css内预先写一个类，包含需要写的样式，在js内添加类名

覆盖的时候可以添加多个类名，由此保留之前的类名

通过classList操作类以控制CSS#

toggle切换的类不存在的话，会自动添加

操作表单元素属性#

注意表单内的元素值是input.value

innerHTML和innerText是文本值

更改表单元素类型使用input.type

标签内的属性不填写值相当于false，填写字符串相当于true

html中填写的是checked = “checked”， 该字符串布尔值为true

而js中应该填写 element.checked = true

disable的用法，不填写值写个disable也有效果（相当于false）

自定义属性#

对一个元素设置各种属性和值，调用的时候返回属性集合的对象

比如对某个element设置data-name =“NAME”,data-value = true

调用的时候则是

chosedElement.dataset.name =“NEW NAME”

chosedElement.dataset.value = false

间歇函数#

开启定时器 setInterval#

可以填写匿名函数

填写具名函数时，不应添加括号，否则会立刻调用

填写字符串的情况下可以加括号，但比较少见

关闭定时器 clearInterval#

延时函数setTimeout#

老版本的事件监听btn.onclick = func(){}#

推荐使用新版本，可以对一个事件绑定多个函数

事件类型#

事件对象#

事件对象的属性#

key的值是按键名字的字符串形式

环境对象this#

每个函数内都有一个this对象。初始的this指向window，也就是浏览器。实际上调用一个函数的完全写法是window.fn()

粗略来看，this实际指向的是函数的调用者

在这个例子里，this指向btn

回调函数 做参数的函数#

事件捕获#

事件的捕获由根开始，上述显示顺序

注：L0事件如onclick

事件冒泡#

事件的冒泡由元素开始，显示顺序为儿子-父亲-爷爷

阻止冒泡/捕获：限制事件范围 e.stopProgation#

阻止默认行为 e.preventDefault()#

中断并提示#

提交前遍历元素，使用return alert(‘输入不能为空’)的写法中断提交表单

解绑事件#

鼠标经过事件#

事件委托#

父级绑定同名事件和子级未绑定事件时,子级才会冒泡(委托)到父级

使用e.taget(当前选定的对象)选定当前子级#

通过e.target.tagName(当前选定的大写的标签名)筛选受影响的子级#

除此之外，e.target.id、e.target.className也可使用

页面加载事件 (window)load、(document)DOMContentLoaded#

window.addEventListener(“load”,function(){})#

document.addEventListener(“DOMContentLoaded”,function(){})#

页面滚动事件 (window、document)scroll#

获取位置（一般在回调函数内获取，返回数字，单位是px）#

要获取整个页面的滚动情况，应先对页面进行监听，使用window.addEventListener(‘scroll’,function(){})

再获得html的对象，其名为document.documentElement

可以复制给scrollTop或Left，以设置默认滚动位置，注意不带单位

滚动到指定的坐标#

页面尺寸事件#

注意对象是html，因此对应的dom是document.documentElement

获取元素宽高clientWidth /clientHeight 不含border/margin/滚动条#

含padding，不含border

获取尺寸 offsetWidth/offsetHeight 包含border/padding/滚动条#

获取位置 属性offsetLeft与offsetTop#

检测最近一级带定位的祖先元素，都没有则为整个页面

相对当前视窗同时获得尺寸与位置 element.getBoundingClientRect()#

返回一个对象，包含以下元素，其值相对于视口

日期对象创建#

日期对象的方法#

获得的数字要+1才是现实月份，星期从星期日对应0开始计数

时间戳#

获得时间戳#

查找DOM节点#

注：选择的是最近的子级

增加节点 创建 - 插入#

创建节点createElement#

插入节点appendChild/insertBefore#

克隆节点cloneNode#

一步到位的写法

删除节点 父元素.removeChild 元素.remove#

要删除元素也可以是：元素.remove()

BOM浏览器对象模型#

JS执行机制 事件循环#

两个的输出结果都是1111 3333 2222

location对象#

跳转页面location.href(‘’)#

查找链接的表单数据(?后部分)location.search()#

查找链接的哈希值(#后部分)location.hash#

刷新当前页面location.reload(true)#

强制刷新：不走浏览器缓存，从服务器获取数据

navigator对象#

history对象#

localStorage#

存储/修改数据setItem#

获取数据getItem#

本地存储只能存储字符串数据类型，数字会被转为字符串

删除数据removeItem#

sessiontorage#

通过JSON.stringify(obj)存取复杂数据类型#

map-join渲染页面#

元字符#

边界符#

量词#

字符类#