9.24

API的概念

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

• 任何开发语言都有自己的API
• API的特征输入和输出(I/O)
• API的使用方法(console.log(‘adf’))

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构,DOM(是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

[外链图片转存失败(img-oAtXs6FE-1569313570819)(media/1497154623955.png)]

• 文档：一个网页可以称为文档
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• 元素：网页中的标签
• 属性：标签的属性

DOM经常进行的操作

• 获取元素
• 对元素进行操作(设置其属性或调用其方法)
• 动态创建元素
• 事件(什么时机做相应的操作)

创建元素的三种方式

document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');

}

常用的鼠标和键盘事件

• onmouseup 鼠标按键放开时触发
• onmousedown 鼠标按键按下触发
• onmousemove 鼠标移动触发
• onkeyup 键盘按键按下触发
• onkeydown 键盘按键抬起触发