API

官方：API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。简单地说API就是一个可以提供很多功能的工具。

web API

js提供的两个API，一个用于操作页面的DOM，一个是用于操作浏览器的BOM，通过这两个API就可以轻松对页面惊醒操作。如图：

前面已经学习完了基础缘分的部分，现在则开始进入下一阶段的学习，即DOM和BOM。

DOM简介

DOM（document object model）中文简称文档对象模型。该接口的定义能让我们操作页面上的任任何一个元素。浏览器在解析HTML文件时会首先生成一颗DOM树，这颗DOM树的结构如下：

文档：一个页面就是一个文档，在DOM中使用document表示。

元素：页面上的所有标签都是元素，在DOM中使用element表示。

节点：网页中的所有内容（标签、属性、文本、注释），DOM中用node表示节点DOM把以上内容看做对象。

节点

节点就是一个数据结构类型。在dom的范畴当中就会涉及节点这个概念。它根据概念主要分为：

根节点：即文档最基本的节点，处于dom树的最顶层。在上图中，HTML文档的根节点为。

父节点：节点可以相互嵌套，即存在包含关系 。当前节点包含了另一个节点，就称该节点为被包含节点的父节点。如上图，head节点就是title节点的父节点。

子节点：当前节点被包含在另一个节点中，就称该节点为另一节点的子节点。titlt节点但是head节点的子点。

兄弟节点：处于同一层次并且拥有相同父节点的节点称为兄弟节点。例如上图中的head和body就是兄弟点。

后代节点：一个节点的子节点的集合可以称为该节点的后代节点，与子节点不同的是，后代节点表示的范广。

叶子节点：表示dom树中最底层的节点。如上图中的文本。

根据内容它又分为：元素节点、文本节点、属性节点。

元素节点：一个HTML标签就是一个元素节点，根节点就是一个元素节点

文本节点：包含在元素节点中的文本

属性节点：元素节点的属性

事件

1、什么是事件？

事件是一个用户触发的一种行为。比如单击一下鼠标，页面的某个地方就会改变，正是因为事件的存在，才能让用户可以更好地和网页进行交互。这也正是JavaScript的行为特征。事件就是用户与网页交互的行为。

2、事件的组成

事件源（触发事件的对象）、事件类型（比如onclick）、事件程序（触发事件执行的函数）

3、事件的执行执行事件到的步骤：

1、获取事件源（获取DOM元素）

2、绑定（注册）事件

3、添加事件处理函数 （与上一步是相连接的）

        			//1、获取dom元素
			var btn = document.getElementsByTagName("button")[0];
			//2、注册事件 绑定事件处理函数
			btn.onclick = function(){
				alert(‘hello world‘)
			}

    

执行结果如下：

4、常见的事件处理程序类型：

HTML事件处理程序——写在HTML标签内部的事件处理程序——不常用<button type="button"

        onclick="alert(‘hello world‘)">点击</button>

    

DOM0级事件处理程序——给一个DOM添加一个事件。上面的例子就是0级事件

DOM2级事处理程序—— addEventListener() removeAddEventListener()

5、常见的事件类型

鼠标事件

键盘事件

表单事件

页面事件

原文：https://www.cnblogs.com/qmlove/p/13245823.html