webapi

webapi分为dom和bom,

作用

使用js操作html和浏览器

dom

文档对象模型,用来呈现html交互的api

白话:是浏览器提供的一套专门用来操作网页内容的功能

作用:开发网页特效和实现用户交互

dom对象

浏览器根据html标签生成的js对象,所有的标签属性都可以在这个对象上面找到.

修改这个对象的属性会自动映射到标签上面;

dom核心思想:把网页内容当成对象来处理

document对象是dom提供的一个对象

一般我们操作dom就要先获取dom元素

Domapi

修改元素样式:

举例div.style.backgroundColor=''

注意多单词需要使用小驼峰

使用添加类名的方式

例如 div.className='color name'

这种方式可以简单的大量添加样式,但是缺点是他添加了类名会覆盖标签上所有的类名.可以使用空格添加多个类名

使用追加类名的方式

例如 div.classList.add('类名')追加

div.classList.remove('类名')删除

div.classList.toggle('类名')切换 ,有就去除,没有就添加

可以使用空格添加多个类名,这种方式不会覆盖之前已经有的类名.

修改文本

innertext 可以修改文本不能修改html

innerhtml可以修改文本和html

定时器

节点操作

获取父节点

parentNode

获取子节点

children 得到的是一个伪数组

获取兄弟节点

nextElementsibling 下一个兄弟节点

previousElementsibling 上一个兄弟节点

添加元素节点步骤

1创建节点

let div=document.createlement('div')

2添加节点

父元素.appendchild(div)向父元素内容的末尾添加一个元素

append可以插入多个节点

insertbefore 向父元素指定位置的前面添加元素

例如div.insertbefore('需要插入的元素',被插入的元素)

创建文本节点document.createtextNode

3删除元素

必须有父元素

语法:父元素.remove()删除自身及其子元素

父元素.removeChild('要删除的子元素')删除子元素

4克隆节点

div.cloneNode(true或者false)

true深克隆会把div的后代节点一起克隆

false浅克隆不会吧后代节点克隆

内置时间对象

获取当前时间

语法:new Date()

格式化时间:

获取时间戳

获得1970年到现在的毫秒数

语法:+new Date()或new Date().gettime或者Date.now

事件对象event

每个事件触发都有个事件对象

鼠标坐标

e.clientX clientY获取鼠标在窗口的左上角距离

e.offsetXY 参照物 当前元素本身

键盘按下事件 key='Enter'

事件捕获,事件冒泡

事件捕获从父到子依次捕获

事件冒泡从子冒泡到父.

阻止冒泡:e.stopPropagation

使用addeventlisten('事件类型',处理函数,true/false)默认false为冒泡,true为捕获,工作中都是用冒泡

阻止默认行为:e.preventDefault

阻止右键菜单

事件委托

给父元素绑定事件.子元素通过冒泡触发,通过e.targer.nodeName判断是不是指定元素触发

页面滚动

给window绑定scroll事件获取元素document.documentElement.scrollTop值.

给某个元素绑定