有关于应用程序接口（API）的简单介绍与操作文档API的介绍。

简介

应用程序接口（API）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

客户端JavaScript中的API

这些API并不是JavaScript语言中的一部分，但是建立在JavaScript语言核心的顶部，为JavaScript代码提供强大的功能。

通常它们分为两类：

• 浏览器API：内置于web浏览器中，能从浏览器和电脑周边环境中提取数据。
• 第三方API：缺省情况下不会内置于浏览器中，必须在web中的某个地方获取代码和信息。

JavaScript、API和其他JavaScript工具之间的关系

• JavaScript — 一种内置于浏览器的高级脚本语言，可以用来实现Web页面/应用中的功能。
• 客户端API — 内置于浏览器的结构程序，位于JavaScript语言顶部，使您可以更容易的实现功能。
• 第三方API — 置于第三方普通的结构程序（例如Twitter，Facebook），使您可以在自己的Web页面中使用那些平台的某些功能。
• JavaScript库 — 通常是包含具有特定功能的一个或多个JavaScript文件，把这些文件关联到您的Web页以快速或授权编写常见的功能。例如包含jQuery和Mootools
• JavaScript框架 — 从库开始的下一步，JavaScript框架视图把HTML、CSS、JavaScript和其他安装的技术打包在一起，然后用来从头编写一个完整的Web应用。

API列表查询：https://developer.mozilla.org/en-US/docs/Web/API

常见API

• 操作文档API [内置于浏览器中，例如：DOM API]，允许操作html/css。
• 从服务器获取数据API ：用于更新一小部分而非整体网页（Ajax
• 绘制、操作图形API ：常用<canvas>来创建2D和3D场景。
• 视频音频API ：例如HTMLMediaElement。创建用于播放音频视频的自定义UI控件，显示字幕和视频等。
• 设备API：以对网络应用程序有用的方式操作和检索现代设备硬件中的数据的API
• 客户端存储API ：创建一个应用程序来保存页面加载之间的状态、甚至让设备在处于脱机状态时可用。

常见的第三方API

• The Twitter API, 允许您在您的网站上展示您最近的推文等。
• The Google Maps API 允许你在网页上对地图进行很多操作（也是Google地图的驱动器）。现在它是一整套完整的，能够胜任广泛任务的API。其能力已经被Google Maps API Picker见证。
• The Facebook suite of API 允许你将很多Facebook生态系统中的功能应用到你的app，使之受益，比如说它提供了通过Facebook账户登录、接受应用内支付、推送有针对性的广告活动等功能。
• The YouTube API, 允许你将Youtube上的视频嵌入到网站中去，同时提供搜索Youtube，创建播放列表等众多功能。
• The Twilio API, 其为您的app提供了针对语音通话和视频聊天的框架，以及从您的app发送短信息或多媒体信息等诸多功能。

【更多国外API可参考：https://www.programmableweb.com/category/all/apis】

【国内一些API汇总：https://github.com/Fangmuheng/-Api（仅供学习使用，非商用）】

各类API详细介绍

操作文档（DOM API）

web页面视图中浏览器的主要部分：

• window ： 载入浏览器的标签，在JavaScript中用Window对象表示。

  可以用于：可以返回窗口的大小（Window.innerWidth和Window.innerHeight），操作载入窗口的文档，存储客户端上文档的特殊数据（例如使用本地数据库或其他存储设备），为当前窗口绑定event handler，等等

• navigator ： 表示存在于web上的状态和标识（用户代理），JavaScript中用Navigator表示。

  可以用于：对这个对象获取一些信息，比如用户摄像头的地理信息、用户偏爱语言、多媒体流等。

• document ： （浏览器中用DOM表示）是载入窗口的十几页面。JavaScript中用Document表示。

  可以用于：用这个对象来返回和操作文档中HTML和CSS上的信息。

文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点

• 元素节点: 一个元素，存在于DOM中。
• 根节点: 树中顶层节点，在HTML的情况下，总是一个HTML节点（SVG和定制XML将有不同的根元素）。
• 子节点: 直接位于另一个节点内的节点。
• 后代节点: 位于另一个节点内任意位置的节点。
• 父节点: 里面有另一个节点的节点。
• 兄弟节点: DOM树中位于同一等级的节点。
• 文本节点: 包含文字串的节点

获取元素

document.querySelector()是目前浏览器主流的方式。

//存储在link里的元素<a>的引用。调用会匹配它在文档中遇到的第一个<a>元素。
var link = document.querySelector('a'); 
link.textContent = 'Mozilla Developer Network';//链接名
link.href = 'https://developer.mozilla.org';//链接

Note:如果想要匹配文档中所有的元素，可以使用：Document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个array中。

获取元素的其他方法

• Document.getElementById()，选择一个id属性值已知的元素，例如<p id="myId">My paragraph</p>。id作为参数传递给函数，即 var elementRef = document.getElementById('myId')。
• Document.getElementsByTagName()，返回页面中包含的所有已知类型元素的数组。如<p>, <a>。元素类型作为参数传递给函数，即var elementRefArray = document.getElementsByTagName('p').

创建并放置节点

var sect = document.querySelector('section');
var para = document.createElement('p');//创建新段落
para.textContent = 'We hope you enjoyed the ride.';
sect.appendChild(para);//该函数用于追加创建的新段落于section内
var text = document.createTextNode(' — the premier source for web development knowledge.');
var linkPara = document.querySelector('p');//创建文本节点
linkPara.appendChild(text);

移动和删除节点

//这样可以把linkPara移动到section底部
sect.appendChild(linkPara);

如果一个节点你有引用它的父节点，那么删除这个节点是很容易的，用父节点.removeChild()可以做到，例如：

//section是linkPara的父节点，我们删除linkPara可以这样做
sect.removeChild(linkPara);

但如果没有引用父节点，要删除一个仅基于自身引用的节点，我们需要用本节点.parentNode.removeChild()：

//我们如果没有sect，那么我们需要这样做：
//因为没有哪个方法会让节点删除自己:)
linkPara.parentNode.removeChild(linkPara);

操作样式

通过JavaScript以不同的方式来操作CSS样式 。

第一种方法：直接在想要动态设置样式的元素内部添加内联样式，用HTMLElement.style来实现。

这个属性包含了文档中每个元素的内联样式信息。可以设置这个对象的属性直接修改元素样式。

例如：

para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';

Note:CSS样式的JavaSript属性版本以小驼峰式命名法书写，而CSS版本带连接符号（backgroundColor 对 background-color）。

第二种方法： Element.setAttribute()

两个参数，第一个是：你想在元素上设置的属性，第二个是：你要为它设置的值。

//例如
 <style>
.highlight {
  color: white;
  background-color: black;
  padding: 10px;
  width: 250px;
  text-align: center;
}
</style>
//修改样式
para.setAttribute('class', 'highlight');

小例子：

var div = document.querySelector('div');//先匹配文档中的div属性
// Window对象有一个称为resize的可用事件。每次窗口调整大小时都会触发该事件
window.onresize = function(){
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;
	div.style.width = WIDTH + 'px';
	div.style.height = HEIGHT +'px';
}
//这样我们每改动一下窗口，图片就会随着窗口的改变而改变以适应屏幕大小