2021-07-22学习Web APIs

一、Web APIs和JS基础关联性

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

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

二、API和Web API

1、API（应用程序编程接口）

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

2、Web API

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

3、API和Web API总结

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

三、DOM

1、DOM简介

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

（2）DOM树

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

2、获取元素

（1）如何获取页面元素
01.根据ID获取
使用getElementById()方法获取带有ID的元素对象
02.根据标签名获取
使用getElementByTagName()方法可以返回带有指定标签的对象的集合
03.通过HTML5新增的方法获取

04.特殊元素获取
001.获取body元素

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

002.获取html元素

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

3、事件基础

（1）事件概述：触发–响应机制

（2）事件组成：事件源、事件类型、事件处理程序 （事件三要素）
01.事件源：事件被触发的对象
02.事件类型：如何触发，什么事件
03.事件处理程序：通过一个函数赋值的方式完成

（2）执行事件的步骤
01.获取事件源
02.注册事件（绑定事件）
03.添加事件处理程序（采取函数赋值形式）

4、操作元素（DOM核心内容）

（1）改变元素内容

Element.innerText（显示从起始位置到终止位置的内容，但它去除HTML标签（因为不识别HTML标签），同时空格和换行也会去掉）

Element.innerHTML（显示起始位置到终止位置的全部内容，包括HTML标签（识别HTML标签），同时保留空格和换行）

（2）常用元素的属性操作
01.innerText、innerHTML 改变元素内容
02.src、href
03.id、alt、title

（3）表单元素的属性操作
type、value、checked、selected、disabled

（4）样式属性操作

01.element.style   行内样式操作

02.element.className     类名样式操作

注意：01.如果样式修改较多，可以采取操作类名方式更改元素样式
	 02.class因为是个保留字，因此使用ClassName来操作元素类名属性
	 03.ClassName会直接更改元素的类名，会覆盖原先的类名

（5）操作元素总结

（6）排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
01.所有元素全部清除样式（干掉其他人）
02.给当前元素设置样式（留下我自己）
03.注意顺序不能颠倒，首先干掉其他人，再设置自己

（7）自定义属性的操作
01.获取属性值

element.属性    //获取属性值

element.getAttribute(‘属性’);

区别：element.属性   获取内置属性值（元素本身自带的属性）
	 element.getAttribute(‘属性’);   主要获得自定义的属性（标椎）程序员自定义的属性

02.设置属性值

element.属性=  ‘值’  //设置内置属性值

element.setAttribute(‘’属性,’值’)；

区别：element.属性=  ‘值’    设置内置属性值
 	 element.setAttribute(‘’属性,’值’)；    主要设置自定义的属性（标椎）

03.移除属性值

Element.removeAttribute(‘属性’)；