Web APIs 笔记(DOM BOM)

目录

一、Web APIs

1. Web APIs 和JS基础关联性

1.1 JS的组成

1.2 JS基础阶段以及Web APIs 阶段

2. API 和 Web API 总结

二、DOM

1.DOM简介

1.1 什么是 DOM

1.2 DOM 树

2.获取元素

2.1 如何获取页面元素

2.2 根据 ID 获取

2.3 根据标签名获取

2.4 通过HTML5 新增的方法获取

2.5 获取特殊元素（body，html）

3.事件基础

3.1 事件概述

3.2 执行时间的步骤

3.3 常见的鼠标事件

4.操作元素

4.1 改变元素内容

4.2 操作元素-修改元素内容

4.3 常用元素的属性操作

4.4 案例：不同时间问候

4.5 表单元素的属性操作

4.6 案例：显示隐藏密码

4.7 样式属性操作

4.7.1 案例：关闭二维码

4.7.2 案例：循环精灵图

4.7.3 案例：显示隐藏文本框内容

4.7.4 案例：密码框验证信息

4.8 总结

4.9 排他思想（算法）

4.10  案例：百度换肤效果

4.11 表格隔行变色效果

4.12 表单全选取消全选案例​

4.13 自定义属性的操作

1.获取属性值

2. 设置属性值

3. 移除属性

4.14 tab栏切换操作

4.15 H5自定义属性

1. 设置H5自定义属性

2. 获取H5自定义属性

5. 节点操作

1.为什么使用节点操作

2.节点概述

3.  节点层级

     3.1 父级节点

     3.2 子节点

              案例：新浪下拉菜单

     3.3 兄弟节点

4. 创建节点

案例：简易版发布留言

5. 删除节点

案例：删除留言

6. 复制/克隆 节点（重点）

7. 案例：动态生成表格

8. 三种动态创建元素区别 （内含面试重点）

三、 DOM 重点核心

1. 创建

2. 增

3. 删

4. 改 

5. 查

6. 属性操作

7. 事件操作

 四、事件高级

1. 注册事件（绑定事件）

1.1 注册事件概述

1.2  addEventListener 事件监听方式

 1.3 注册事件兼容性解决方案

2. 删除事件（解绑事件）

3. DOM 事件流

4. 事件对象

4.1 什么是事件对象

4.2 事件对象的使用语法

4.3 事件对象的兼容性方案

4.4 事件对象的常见属性和方法

4.4.1 返回触发事件对象

4.4.2 事件对象阻止默认行为

5. 阻止事件冒泡（重点）

5.1 阻止事件冒泡的两种方式

5.2 阻止事件冒泡的兼容性解决方案

6. 事件委托（代理、委派）（重点）

7. 常用鼠标事件对象

7.1 取消鼠标右键菜单 / 禁用

7.2 鼠标事件对象

案例：跟随鼠标移动的天使

8. 常用的键盘事件

8.1 常用键盘事件

8.2 键盘事件对象

案例：模拟京东按钮输入内容

五、BOM

1. BOM 概述

1.1 什么是BOM

1.2 BOM 的构成

2.  window 对象的常见事件

2.1 窗口加载事件

2.2 调整窗大小事件

3. 定时器

3.1 两种定时器

3.2  setTimeout() 定时器 

 案例：5s 后自动关闭的广告

3.3 清除定时器 clearTimeout()

3.4  setInterval() 定时器

案例：倒计时效果 

3.5 停止 setInterval() 定时器

案例： 发送短信

3.6 this（重点）

4. JS执行机制

4.1 JS 是单线程

4.2 同步和异步

4.3 JS 执行机制

5. location 对象

5.1 什么是 location 对象

5.2  URL

5.3 location 对象的属性

案例： 5s 后 跳转页面

案例：获取 URL 参数

 5.4 location 对象的方法

6. navigator 对象

 7. history 对象

---

一、Web APIs

1. Web APIs 和JS基础关联性

1.1 JS的组成

1.2 JS基础阶段以及Web APIs 阶段

JS 基础学习 ECMAScript 基础语法为后面做铺垫，Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果

2. API 和 Web API 总结

1. API 是为程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2. Web API 主要是针对于浏览器提供的借口，主要针对于浏览器做交互效果。
3. Web API 一般都有输入和输出（函数的传参的返回值），Web API 很多都是方法(函数)
4. 学习 Web API 可以结合前面学习内置对象方法的思路学习

二、DOM

1.DOM简介

1.1 什么是 DOM

文档对象模型（Document Object Model，简称 DOM ），是 W3C 组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容，结构和样式。

1.2 DOM 树

•  一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中所有标签都是元素，DOM 中使用 element 表示
• 节点：页面中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看作是对象

2.获取元素