0x01--JS的组成图

0x02--Web_Apis阶段要学什么

JS基础阶段学习的内容

• 1、ecmaScript5/6
• 2、JS基础语法
• 3、只学习语法，做不了网页交互效果
• 4、目的是为了后面的学习内容，打地基

Web_Apis阶段学习的内容

• Web_Apis 是W3C组织的规则
• Web_Apis 主要学习 DOM 和 BOM
• Web_Apis 是我们JS独有的部分
• Web_Apis 主要学习页面交互功能
• 需要使用地基的JS内容做辅助

0x03--Api和WebApi

API ( Application Programming Interface,应用程序编程接口): 是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

举例子：例如手机拿线充电 ：我们需要实现充电的功能，不需要知道线的充电原理，不需要知道线是由哪些材料组成的，在哪台机器上加工的，我们只需要把线插进充电口就完事了。

WebApi: Web API是浏览器提供的一套操作浏览器功能和页面元素的API (BOM和DOM).

现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框,直接使用alert( "弹出 )。因为Web APl很多,所以我们将这个阶段称为Web APls

WebApi在线文档：https://developer.mozilla.org/zh-CN/docs/Web/API

0x04--webapis阶段要达成的flag

• 1、能够说出什么是DOM
• 2、能够获取页面元素
• 3、能够给元素注册事件
• 4、能够操作DOM元素的属性
• 5、能够创建元素
• 6、能够操作DOM节点

0x05--什么是DOM

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

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

0x06--DOM树图

• 文档：：一个HTML页面就是一个文档，DOM中使用document来表示
• 元素：页面中的所有标签都是元素，DOM中使用document表示
• 节点 :网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示