DOM：Web API（DOM ）、获取元素的几种方式、事件基础（黑马课程总结【侵删】）

• Web APIs简介 （要了解 DOM BOM都是啥子，先看看他们的爸爸~）

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API 。（W3C 组织的标准）

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

•  API 和 Web API 总结 

1. API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现 
2. Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。 
3. Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数） 
4. 学习 Web API 可以结合前面学习内置对象方法的思路学习 

JS 基础学习 ECMAScript 基础语法为后面作铺垫， Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果 。

1.什么是 DOM 

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

2.获取元素 

DOM在我们实际开发中主要用来操作元素。 我们如何来获取页面中的元素呢? 
2.1 如何获取页面元素 ，获取页面中的元素可以使用以下几种方式: 
 根据 ID 获取 
 根据标签名获取 
 通过 HTML5 新增的方法获取 
 特殊元素获取 

2.2 根据 ID 获取 

使用 getElementById() 方法可以获取带有 ID 的元素对象。 

 document.getElementById('id'); 

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。 

2.3 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。 

 document.getElementsByTagName('标签名'); 

注意：  
1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。 
2. 得到元素对象是动态的 
3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象) 

还可以获取某个元素(父元素)内部所有指定标签名的子元素. 
 

element.getElementsByTagName('标签名'); 

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。 

2.4 通过 HTML5 新增的方法获取 

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 

2. document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象 

3. document.querySelectorAll('选择器');     // 根据指定选择器返回 

注意：  
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

2.5 获取特殊元素（body，html）

获取body元素

doucumnet.body  // 返回body元素对象 

获取html元素 

document.documentElement  // 返回html元素对象 

3. 事件基础

3.1 事件概述 

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 
简单理解： 触发--- 响应机制。 
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

3.2 事件三要素 

1. 事件源 （谁） 
2. 事件类型 （什么事件） 
3. 事件处理程序 （做啥） 

案例：点击按钮弹出警示框 
页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。 

案例分析 
① 获取事件源（按钮） ② 注册事件（绑定事件），使用 onclick ③ 编写事件处理程序，写一个函数弹出 alert 警示框 

实现代码 

var btn = document.getElementById('btn'); 
btn.onclick = function() { 
  alert('你好吗');   
}; 

3.3 执行事件的步骤 

1. 获取事件源 
2. 注册事件（绑定事件） 
3. 添加事件处理程序（采取函数赋值形式）