⭐ Web APIs

Web APIs 和 JS 基础关联性

JS的组成

API 和 Web API

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

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

DOM简介

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

DOM树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

获取元素

1. 根据ID获取

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

document.getElementById('id');

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

2. 根据标签名获取

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

document.getElementsByTagName('标签名');

❗注意：

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
• 得到元素对象是动态的

3. 通过 HTML5 新增的方法获取

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

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

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

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

4. 特殊元素获取

• 获取body元素

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

• 获取html元素

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

事件基础

事件三要素