掌握DOM与Web API：前端开发基石-优快云博客

1.API ：预先定义的函数；给开发者提供的工具，以便轻松实现自己需要的功能。
web API：是浏览器提供操作浏览器功能和页面元素的API（bom和dom）

2.DOM
文本对象模型，就是一个接口，用来处理可拓展的标记语言
1.文档：一个页面就是一个文档，DOM中使用document来表示
2.元素：页面的所有标签都是元素，用element表示
3.节点：页面中所有内容都是节点（标签、属性、文本、注释），DOM中用node表示
DOM把以上看做对象

3.DOM获取元素：
getElementByid（）获取有id的元素对象；
返回的是一个元素对象；

4.获取指定标签名的对象的集合
getElementsByTagName（‘标签’）；
1.返回的是获取过来元素对象的集合，以伪数组形式存储
2.可以遍历伪数组，就可以全部输出；
3.得到元素对象是动态的（内容边了，输出的也会变）
4.如果只有一个标签（li）还是伪数组
5.如果没有这个元素返回还是伪数组

5.修改元素的内容：
element.innerText 从起始位置到终止位置，但是他去除html，同时空格和换行也会去除
element.innerHTML 起始位置到终止位置的全部内容，包括html标签，保留空格和换行。

 var span = document.querySelector('span');
 span.innerText = ('<strong>今天是：</strong>:2022');/* 用innerText  strong标签没能识别 */
span.innerHTML = ('<strong>今天是：</strong>2022');/* 可以识别标签 */

6.获得焦点onfocus；失去焦点onblur

7.创建元素三种方法
document.write():直接将内容写入文本流，但是文本流执行完毕之后，会导致页面的全部重绘
document.innerHTML:创建多个元素效率高，但是注意不要拼接字符串，要使用拼接数组，结构稍微复杂一些。
document.createElement:效率低一点点，但是逻辑清晰

8.注册事件
传统方式：利用on开头的事件，onclick；注册事件的唯一性，要是同一个元素同一个事件只能设置一个函数，不然会被后面函数覆盖
方法监听事件：addEventlistener（）；

addEventlistener
eventTarget.addEventListener(type,listener,[useCapture])
同一个事件可以添加多个监听器
eventTarget.addEventListener()是将指定的监听器注册到eventTarget（目标对象）上，当对事件执行之后，就执行事件处理函数
type：事件类型符比如click mouseover 注意这里不带on 是字符串必定带引号
listener：事件处理函数
useCapture：可选参数，默认是个布尔值false

9.dom事件流
事件发生时会在元素节点之间按照特定的传播事件的特定的顺序传播
dom事件流分为三个阶段：捕获阶段、当前目标阶段、冒泡阶段
注意：只能执行捕获或者冒泡阶段；onclick和attachevent只能到冒泡阶段
捕获阶段，如果addeventlistener的第三个参数是true的话，那么处于捕获阶段
document->html->body->father->son
冒泡阶段，如果addeventlistener的第三个参数是false的话或者不写，那么处于冒泡阶段
document<-html<-body<-father<-son.

10事件委托
原理：不是每个子节点单独设置事件监听，而是给父元素设置事件监听，然后利用冒泡原理影响设置每一个子节点

11.contextmenu 阻止右键菜单选择、禁止选中selectstart

 document.addEventListener('contextmenu',function(e){
   e.preventDefault();
   })
document.addEventListener('selectstart',function(e){
    e.preventDefault();
})

12.鼠标事件mouseEvent 和键盘事件对象KeyboardEvent
e.clientX 返回鼠标相对于浏览器的窗口可视区X的坐标
e.clientY 返回鼠标相对于浏览器的窗口可视区Y的坐标
注意：
1.client鼠标在可视区不管有没有滚动条
2.page鼠标在页面文档的X和Y坐标有滚动条就会有区别

e.screenX和e.screenY 鼠标相对于屏幕的x，y轴坐标
鼠标移动事件 mousemove

13.键盘事件
onkeyup：按键弹起触发
onkeydown：按键按下时触发
keypress按键按下时候触发不能识别功能键比如ctrl shif 左右箭头
执行循序：keydown-keyprss-keyup

14.事件：触发-响应机制
事件三部分组成：事件源、事件类型、事件处理程序事件三要素；
1.事件源：事件被触发的对象
2.事件类型：如何触发：点击（onclick）？键盘？
3.事件处理程序通过一个函数赋值的方式完成；
执行事件的步骤：1.获取事件源；2.注册事件；3.添加事件处理程序；

鼠标经过onmouseover；鼠标离开onmouseout