[前端学习笔记]JavaScript APIs(DOM和BOM)

一、Web API

1. API

API(Application Programming Interface,应用程序编程接口)：是一些预定义的接口(如函数、HTTP接口)。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源码或理解内部工作机制的细节。
简单理解为：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

2. Web API

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

二、DOM(页面文档对象模型)

1. 什么是DOM

DOM(Document Object Model,文档对象模型)：是W3C组织推荐的处理可扩展标记语言(HTML/XML)的标准编程接口。W3C定义了一系列DOM接口，通过接口可以改变网页的内容、结构和样式。

2. DOM树

1）文档：一个页面就是一个文档，document
2）元素：页面中的所有标签都是元素，element
3）节点：页面中的所有内容(标签、属性、文本、注释等)都是节点，node
DOM 把以上内容都看作“对象”！！对象就有很多方法～

3. 增删查改

1）增加

2）删除

3）查看

4）修改

4. 事件

事件是可以被JS侦测到的行为，是触发响应的一种机制。
1）事件三要素：事件源、事件类型、事件处理程序
2）执行事件步骤：

		// 1. 获取事件源
        var div = document.querySelector('div');
        // 2. 绑定事件/注册事件 div.onclick 
        // 3. 添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }

3）添加和删除事件

4）事件流
事件流是描述从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

5）事件对象
事件对象是事件的一系列相关数据的集合，有了事件才会存在，由系统自动创建。可以由程序员命名，写在侦听函数的小括号里，作为形参。
事件对象兼容性写法：e=e||window.event

6）事件委托
事件委托，又称事件代理/事件委派。核心原理是给父节点添加侦听器，利用事件冒泡影响每一个子节点。

		var ul = document.querySelector('ul');
        // 事件写在father上即可
        // 不用再获取每个li添加事件，只操作了一次DOM，提高了程序的性能
        ul.addEventListener('click', function (e) {
            e.target.style.backgroundColor = 'pink';
        })

7）常用事件

5. 补充知识

三、BOM(浏览器对象模型)

1. 什么是BOM

BOM(Browser Object Model,浏览器对象模型)提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window。JS标准化组织是ECMA；DOM标准化组织是W3C；而BOM缺乏标准，最初是网景公司的Netscape浏览器标准的一部分，各厂商在各自浏览器定义，兼容性较差。

2. DOM与BOM

1）DOM文档对象模型：把文档当作对象，操作页面元素。顶级对象为document。
2）BOM浏览器对象模型：把浏览器当作对象，浏览器窗口交互。顶级对象为window。
BOM包含DOM！

3. window

window是JS访问浏览器的一个接口。
window是全局对象。定义在全局作用域的变量、函数都会变成window对象的属性和方法，可以省略window。

4. 除document以外的四个

1）location


2）navigation

// navigator对象包含浏览器的信息。
// 最常用的是navigator.userAgent，可以返回由客户机发送服务器的user-agent头部的值。

// 判断为移动端
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
		// 跳转到移动端主页
       window.location.href = "../H5/index.html";	
}

3）screen

4）history