Web前端基础—Web API基础(初识Web API以及常用DOM的使用）

1. JS基础阶段以及Web APIs阶段

JS阶段

1. 我们学习的是ECMAScript标准规定的基本语法
2. 只学习语法，做不了常用的网页交互效果

Web APIs阶段

1. Web APIs是w3c组织的标准；
2. Web APIs主要学习DOM和BOM；
3. Web APIs是学习JS独有的部分；
4. 主要学习页面交互功能；

1. API和Web API

2.1 API

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

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

2.2 Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）.

MDN详细API（API文案档）：https://developer.mozilla.org/zh-CN/docs/Web/API

2.3 API和Web API总结

1.API是为我们程序员提供的一个接口 ，帮助我们实现某种功能，我们使用就可以了，不必纠结内部如何实现。

2.Web API主要是针对浏览器提供的接口，住要针对于浏览器做交互效果；

3.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）。

4.Web API和内置对象有一定的相同思路。

DOM

1. DOM简介
   1. 什么是DOM

文档对象模型（简称DOM）是w3c组织推荐到的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1. DOM树
2. 文档：一个页面就是一个文档，DOM中使用document表示
3. 元素：页面中的所有标签都是元素，DOM中使用element表示
4. 节点：网页中所有的内容都可以看作是节点（标签、属性、文本、注释等），DOM中使用node表示。

DOM把以上内容都看作是对象

1. DOM简介
   1. 如何获取页面元素

1. 根据ID获取；
2. 根据标签名获取；
3. 通过HTML5新增的方法获取；
4. 特殊元素获取
   1. 根据ID获取页面元素  getElementById()

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

1. get  获取；  element  元素；  by  通过。
2. 参数id是大小写敏感的字符串
3. 返回的是一个元素对象
4. console.dir（）  打印我们返回的元素对象  更好的查看里面的属性和方法。
   1. 根据标签名获取页面元素  getElementsByTagName()

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

1. 返回的是  获取过来的元素的集合 以伪数组的形式存储的
2. 如果想要依次打印里面的元素对象  我们可以采取遍历的方式
3. 得到的元素对象是动态的
4. element（元素）.getElementByTagName()  可以得到这个元素中的某些标签（先通过其他方式获取到元素的名字  名字后面再加上上面的方法）
   1. 通过HTML5新增的方法获取页面元素

1. 根据类名获取某些元素   getElementsByClassName(‘类名’)
2. 返回指定选择器的第一个元素对象  querSelector(‘.box’)  切记  里面的选择器需要加符号  .box  #nav
3. 根据指定选择器  返回所有的对象   querSelectorAll(‘选择器’)
   1. 获取特殊元素（body、html）

获取body元素

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

获取html元素

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

1. 事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解：触发------响应机制

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某个按钮时产生一个事件，然后去执行某些操作。

1. 事件是由三部分组成：事件源、事件类型、事件处理程序（也称为事件三要素）
   1. 事件源：事件被触发的对象
   2. 事件类型：如何触发  什么事件
   3. 事件处理程序：通过一个函数赋值的方式  完成
2. 执行事件的步骤
   1. 获取事件源
   2. 注册事件（绑定事件）
   3. 添加事件处理程序（采取函数赋值形式）

1. 操作元素
   1. 改变元素内容

1. element.innerText

从起始位置到终止位置的内容，但它去除了html标签，同时空格和换行也会去掉（不识别html标签，非标准）

1. element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行（识别html标签  W3C标准）

1. 注意

这两个属性是可读写的   可以获取元素里面的内容

1. 1. 常用元素的属性操作
2. innerText、innerHTML  改变元素内容
3. src、href
4. id、alt、title
   1. 表单元素的属性操作

利用DOM可以操作如下表单元素属性：

type、value、checked、selected、disabled

1. 1. 样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

1. elemenr.style           行内样式操作

里面的属性  采取驼峰命名法

注意：

1. JS里面的样式采用驼峰命名法  比如：fontSize、backgroundColor
2. JS修改style样式操作，产生的是行内样式，css权重比较高。

1. element.calsssName  类名样式操作

能够改变当前元素的类名（this.calssName=’’;）

注意：

1. 如果样式修改较多，可以采取操作类名的方式更改元素样式
2. class因为是个保留字，因此使用className来操作元素类名属性
3. className会直接更改元素的类名，会覆盖原先的类名
4. 如果想要保留原先的类名：原先的类名加上空格再加上更改后的类名

1. onfocus  获得焦点
2. onblur   失去焦点